Is there any known problems with using box-sizing? - html

Question

Problem
I have set my CSS with;
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin:0;
padding:0
}
Since doing so though i have inconsistencies with the height of a div that has a set height, across different browsers.
Div's CSS in question
.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

You have to use non-standart properties to use (sad but code will become invalid, because of them :()
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari, Chrome */
So full style will be:
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 */
}
Now div will be 300px width with all margins and paddings.
One cons is box-sizing property doesn't work in IE6 and IE7.
You can use nested layers instead:
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;
}
Source: http://htmlbook.ru/samlayout/blochnaya-verstka/blochnaya-model