What do I need to change to make Chrome and Firefox render the same way as Internet Explorer? My first idea was to use CSS calc()
, but I still need to support IE8.
I have the following CSS:
* {
box-sizing: border-box;
}
.Width300
{
width: 300px;
padding: 5px;
border: black 1px solid;
}
.Field
{
white-space: nowrap;
min-height: 26px;
padding: 1px 0;
}
label
{
float: left;
display: inline;
}
input
{
display: block;
width: 100%;
}
.LabelSize100 .Field
{
margin-right: 100px;
}
.LabelSize100 label
{
width: 100px;
}
.LabelSize100 input
{
margin-left: 100px;
}
and the following HTML:
<div class="LabelSize100 Width300">
<div class="Field">
<label>test:</label>
<input type="text" />
</div>
<div class="Field">
<label>test:</label>
<input type="text" />
</div>
</div>
and the result is totally different in IE/Chrome and FF:
Just set display:inline-block;
to <label>
and <input>
CSS
label
{
float: left;
display: inline-block;
}
input
{
display: inline-block;
width: 100%;
}
.LabelSize100 input
{
// Remove margin-left
}
Note: remove margin-left
from <input>