Question

我正在自定义样式，边框有问题。当我飞越元素时，它不是静态的（由于边界而向右移动）。

我在IP.Board上也注意到了这个问题，我找不到解决方案：http://screencast.com/t/49DgJmXuCN0v并删除了边框，一切都很完美：http://screencast.com/t/n3JVAYFQRxK

如果有人可以帮助我，谢谢。

Answer 1

只需将box-sizing: border-box;添加到您的元素即可。了解更多信息http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Answer 2

边框通常会增加元素占据区域的尺寸。这会导致后续内容被推送，但确切的效果取决于许多设置。试图避免这种情况会导致问题，因为如果在添加边框时总尺寸保持不变，则上下文区域尺寸会缩小。但还有其他几种选择：

最初设置一个透明边框，并在悬停时仅更改其颜色。
初始设置与元素背景颜色相同的颜色。这只是上述内容的一种变体。
除了勾勒外，不要设置边框。轮廓出现在其他任何内容的顶部（z方向），可能包含一些内容，但不会更改布局。这比前两个选项稍微简单，但浏览器支持略有限制（IE的旧版本，你知道）。

<style>
body {
  background: white;
  color: black;
}
.a:hover { 
  border: solid red medium;
}
.b {
  border: solid transparent medium;
}
.b:hover { 
  border-color: red;
}
.c {
  border: solid white medium;
}
.c:hover { 
  border-color: red;
}
.d:hover { 
  outline: solid red medium;
}
</style>
<p><span class=a>Illustrating the problem.</span> What happens on mouseover?
<p><span class=b>This has transparent border initially.</span> What happens on mouseover?
<p><span class=c>This has white border initially.</span> What happens on mouseover?
<p><span class=d>No border, but outline.</span> What happens on mouseover?
<p>That’s all folx!

悬停时CSS边框问题

2 个答案: