[英]Issue with the CSS border on hover
I am customizing a style and I have a problem with the border. 我正在自定义样式,边框有问题。 When I flew over the element, it is not static (it moves to the right because of the border). 当我飞过该元素时,它不是静态的(由于边界,它向右移动)。
I have noticed this problem too on IP.Board and I can't find a solution: http://screencast.com/t/49DgJmXuCN0v and with the border removed, all is perfect: http://screencast.com/t/n3JVAYFQRxK 我在IP.Board上也注意到了这个问题,但找不到解决方案: http : //screencast.com/t/49DgJmXuCN0v并删除了边框,这一切都很完美: http : //screencast.com/t/ n3JVAYFQRxK
If anyone can help me, thanks. 如果有人可以帮助我,谢谢。
Simply add box-sizing: border-box;
只需添加box-sizing: border-box;
to your element. 到你的元素。 for more information http://www.w3schools.com/cssref/css3_pr_box-sizing.asp 有关更多信息, 请访问http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
A border normally increases the dimensions of the area occupied by an element. 边框通常会增加元素所占区域的尺寸。 This causes subsequent content to be pushed forward, though the exact effects depend on many settings. 尽管确切的效果取决于许多设置,但这会导致后续内容被推送。 Trying to avoid this lead to problems, since the context area dimensions would shrink if the total dimensions remain the same when a border is added. 尝试避免导致问题,因为如果在添加边框时总尺寸保持不变,则上下文区域尺寸将缩小。 But there are several other options: 但是还有其他几种选择:
<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!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.