html - 使用 Bootstrap 时浏览器之间的 CSS 问题

Question

我使用 CSS 制作了这个设计，它在 Chrome 上看起来很棒。我也在使用 Bootstrap ，并注意到 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}

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