你能做“一个看不见的边界”吗？答案

【问题标题】：Can you make "an invisible border"?你能做“一个看不见的边界”吗？
【发布时间】：2011-08-13 00:49:04
【问题描述】：

我正在尝试make a navbar 作为练习。

我正在使用a:hover 在悬停的按钮周围添加一个实心边框。但是，这会使所有其他按钮移动边框的大小。

这个问题的正确解决方法是什么？我知道还有其他人（讨论过here），我特意尝试让边框“即使不悬停也不会占用空间”。我设置了border:transparent，希望它能做我想做的事，但它根本没有显示占用空间。

我知道我可以手动选择与背景相同的边框颜色并使其纯色，但这不是我想要的。有没有理智的方法来解决这个问题？

【问题讨论】：

标签： html css border

【解决方案1】：

您最好的选择是为您的元素添加与边框大小相同的内边距或边距，并使边框的宽度为零，然后显示边框并使用a:hover 选择器删除内边距。

这是一个示例。您通常也可以使用边距来执行此操作。

a {
    display: inline-block;
    height: 2em; width: 100px;
    padding: 2px;
    background: #0ff;
}

a:hover {
    padding: 0;
    border :2px solid #000;
}

&lt;a href="#"&gt;Hello World&lt;/a&gt;

【讨论】：

@Phliplip 的建议怎么样？（评论）
@Phliplip 的解决方案也可以，只要您不必支持 IE6。我已经处理了足够长的时间，以至于我自动转到了完全跨浏览器的解决方案。使用最适合您的网站和客户需求的方式。

【解决方案2】：

您可以使用outline CSS 属性代替边框，它的作用类似于边框，但在大小计算中不考虑在内。

但是，这确实存在一些问题，not being supported by IEs 7 or earlier。

【讨论】：

【解决方案3】：

border:transparent 表示border: transparent 0 none

如果您在使用速记语法时未指定属性，则将所有属性重置为默认值。

你需要给它一个边框样式和一个边框宽度。

【讨论】：

【解决方案4】：

这不能像您期望的那样工作的一个原因是因为您仅在 :hover 上应用 display:block，它需要应用于没有 :hover 选择器的元素，否则您将获得“移位”方面。使用哪种显示类型无关紧要，您只需确保它们相同，默认情况下<a> 是内联的。

另一个原因与您的速记边框有关，您需要为透明版本添加边框类型，例如 solid 而不是 none。

您使用的技术完全合法，无需填充黑客或轮廓（不会增加尺寸）。

http://jsfiddle.net/Madmartigan/kwdDB/

试试这个：

#wd-navbar li a {
     border: medium solid transparent;
     display: block;
     margin: 1px;
}

#wd-navbar li a:hover {
     background-color: #F5DEB3;
     border: medium solid;
}

【讨论】：

【解决方案5】：

border: 10px solid transparent 怎么样？

【讨论】：

我会接受这个，因为它似乎是最干净的解决方案，尽管@derekerdmann 的答案也很好并且是跨平台的（据说这个解决方案在 IE 6 中不起作用）。 stackoverflow.com/questions/5790615/…

【解决方案6】：

设置边框颜色：透明；完成这项工作。

a {
  border-color : transparent ;
}

a:hover {
   border-color : black;
}

【讨论】：

【解决方案7】：

使用伪元素::after 和::before 来划分不可见的边界。

【讨论】：

【解决方案8】：

请注意，透明边框仅在元素上没有任何 box-shadow 时才有用。看看图片：

【讨论】：