Question

问题

我已经设置了CSS;

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
     box-sizing: border-box;
     margin:0;
     padding:0
}

因为这样做虽然我与不同浏览器中设置高度的div的高度不一致。

Div的问题

.content.one /*inquiry form*/ {
    position: absolute;
    float: left;
    display: none;
    top: 50px;
    height: 615px;
    left: -255px;
    width: 960px;
    z-index: 5;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 5px;
    padding-bottom: 10px;
    background-color: #000000;

}

Answer 1

你必须使用非标准属性（悲伤但代码将变得无效，因为它们:(）

-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari, Chrome */

完整的风格将是：

div {
    width: 300px;
    background: #ccc;
    padding: 20px;
    -moz-box-sizing: border-box; /* Firefox */
    -webkit-box-sizing: border-box; /* Safari, Chrome */
    box-sizing: border-box; /* ie, opera */
}

现在div的宽度为300px，包含所有边距和填充。

一个缺点是box-sizing属性在IE6和IE7中不起作用。

您可以改为使用嵌套图层：

HTML：

<div class="block">
    <div>I have 100% width</div>
</div>

的CSS：

.block { 
    width: 150;
}
.block div {
    background: #fc0;
    margin: 10px;
    padding: 20px;
    border: 1px solid #000;
}

来源：http://htmlbook.ru/samlayout/blochnaya-verstka/blochnaya-model

使用盒子大小是否有任何已知问题？

1 个答案: