Question

当我将鼠标悬停在鼠标上时，我正在将以下css应用于div：

border-bottom: 10px solid;

问题是div中包含的所有文本都向上移动了10px。我怎样才能防止这种情况发生？

修改：
它需要与IE8 +

兼容

Answer 1

一个选项是将box-sizing设置为border-box，就像有人提到的那样。

第二个是为边框创建一个空格，然后在悬停时放置边框。

<div id=a></div>
<div id=b></div>

<style>
    div {height: 100px;}
    #a {background: red; margin: 0 0 10px;}
    #b {background: green}

    #a:hover {margin-bottom: 0; border-bottom: 10px solid blue}
</style>

http://jsfiddle.net/uwng4vg7/

最后一个选项将透明边框设置为默认状态

#a {background: red; border-bottom: 10px solid transparent;}
#a:hover {border-color: blue}

http://jsfiddle.net/uwng4vg7/1/

Answer 2

作为答案状态box-sizing: border-box;将是答案，但请记住，这仍然是实验性的。

这是一项实验技术，因为这项技术规范尚未稳定，请检查兼容性表在各种浏览器中使用的正确前缀。还要注意实验技术的语法和行为可能会发生变化在规范更改的未来版本的浏览器中

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

您可以通过padding减少1px。这样，您实际上会将padding像素替换为border，看起来只有下划线显示。

Answer 3

您可以尝试将此属性添加到div box-sizing: border-box

box-sizing属性用于告诉浏览器应该包括哪些大小属性（宽度和高度）。它们应该包含border-box还是仅包含content-box，它是width和height属性的默认值。（http://www.w3schools.com/cssref/css3_pr_box-sizing.asp）

这适用于大多数浏览器（也是IE8）http://caniuse.com/#search=box-sizing

这是一个例子。

div{
  font-family:sans-serif;
  background:#eee;
  padding:12px 24px;
  color:#333;
  box-sizing:border-box;
}

div:hover{
  border-bottom:10px solid #333;
}

<div>Some Text</div>

Answer 4

请添加box-sizing：border-box属性或 border-bottom 10px在普通border-bottom-color上是纯透明的：hover上的＃000。

添加border-bottom属性css

4 个答案: