Firefox错误计算伪元素上的盒子模型

时间:2015-02-16 12:45:49

标签: css

以下HTML:

<div>foo<br/>bar</div>

和以下CSS:

div {
    border-left: 30px solid #995D2F;
    position: relative;
}
div::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 0px;
    border: 3px solid #EBBD00;
    width: 24px;
    height: 24px;
}

根据Firefox Dev-tool&#34; Boxmodel&#34;它呈现的伪元素的宽度/高度为25px,边框宽度为2px。

为什么?

我的Firefox版本是35.0.1。如果它有所不同,它是一个Firefox便携式。

http://jsfiddle.net/neg3f9yn/

Firefox Zoom Level end Devtools

修改:如果我将box-sizing: border-box;添加到伪元素并将宽度/高度更改为30px,那么它看起来适合我:http://jsfiddle.net/neg3f9yn/1/ 我仍然对解释那里发生的事情感兴趣。

0 个答案:

没有答案