使用bootstrap时浏览器之间的CSS问题

Question

我使用CSS制作这个设计，它在Chrome上看起来很棒。我也使用bootstrap，并注意到引导程序在FF上看起来不同

这是我的CSS。我在jsbin上有我的deno：http://jsbin.com/yosusixe/2

知道为什么会这样吗？

         div.bonecard {
                background-color: white;
                margin: 10px;
                width: 340px;
                height: 210px;
                border: 2px solid black;
                border-left: 2px solid black;
                padding: 10px;
                -webkit-border-radius: 20px;
                -webkit-border-top-right-radius: 50px;
                -webkit-border-bottom-right-radius: 50px;
                -moz-border-radius: 20px;
                -moz-border-radius-topright: 50px;
                -moz-border-radius-bottomright: 50px;
                -webkit-box-sizing: content-box;
                border-radius: 20px;
                border-top-right-radius: 50px;
                border-bottom-right-radius: 50px;
                position: relative;
                float: left;
                -webkit-transition: color 0.5s ease;
            }
            div.bonecard:after, div.bonecard:before {
                background-color: white;
                position: absolute;
                display: block;
                content:"";
                border: 2px solid black;
                border-right: 2px solid white;
                width: 6px;
                left: -10px;
            }
            div.bonecard:before {
                top: 60px;
                height: 60px;
            }
            div.bonecard:after {
                top: 180px;
                height: 30px;
            }

这是它看起来如何的图像

Answer 1

由于一个未知的原因，Firefox正在使用box-sizing：border-box（来自bootstrap），而Chrome则没有。您可以为每个类添加以下代码：

div.bonecard {box-sizing:content-box}
div.bonecard:after, div.bonecard:before {box-sizing:content-box}

现在两个浏览器中的元素看起来都一样。

Answer 2

Bootstrap在所有东西上使用box-sizing：border-box - 它在所有元素中都是全局的，没有异常 - 所以你不计算边框或填充：

现在两者都有效：

http://jsbin.com/yosusixe/4/edit