你可以做一个“无形的边界”吗？
我正在尝试做一个导航栏作为练习。
我使用的a:hover在围绕buttona:hover的实心边框。 但是，这使得所有其他button移动的边界的大小。
这个问题的正确解决方法是什么？ 我知道还有其他的（在这里讨论过 ），我专门设法让边界“隐身而不占空间”。 我设定border:transparent希望它可以做我想要的，但它没有显示出空间。
我知道我可以用手挑边框的颜色，使其与背景相同，并使其稳定，但这不是我想要的。 有没有一个理智的方法来解决这个问题？
border: 10px solid transparent如何border: 10px solid transparent ？
你最好的select是将填充或边距添加到与边框尺寸相同的元素，并使边框的宽度为零，然后显示边框并使用a:hoverselect器删除填充。
这是一个示例。 你也可以经常利用这些利润来做到这一点。
a { display: inline-block; height: 2em; width: 100px; padding: 2px; background: #0ff; } a:hover { padding: 0; border :2px solid #000; }
<a href="#">Hello World</a>
原因之一是你不能像预期的那样工作，因为你只应用display:block :hover ，它需要被应用到没有：hoverselect器的元素，否则你会得到“移位”的尺寸。 使用哪种显示types并不重要，您只需确保它们是相同的，默认情况下<a>是内联的。
另一个原因与你的速记边界有关，你需要为透明的版本添加一个边框types，比如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; }
您可以使用outline CSS属性而不是边框，它的行为像一个边框，但在大小计算中不考虑。
但是，这确实有一些问题， IE 7或更早版本不支持 。
border:transparent是指border: transparent 0 none
如果在使用简写语法时未指定属性，则将所有属性重置为其默认值。
你需要给它一个边框样式和边框宽度。
设置边框颜色：透明; 做这个工作。
a { border-color : transparent ; } a:hover { border-color : black; }
使用伪元素::after和::before使不可见边界停止。
