我的输入字段在IE上以内联方式呈现，但在Chrome和Firefox中以换行方式呈现。 我该如何解决？

Question

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:

JSFiddle link

Answer 1

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>

DEMO HERE

Answer 2

I got this solution:

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>   

CSS:

* {
    box-sizing: border-box;
}
.Width300 {
    width: 300px;
    padding: 5px;
    border: black 1px solid;
}
.Field {
    white-space: nowrap;
    min-height: 26px;
    padding: 1px 0;
    width:100%;
}
label {
    float: left;
}
input {
    display: block;
    float:right;
}
.LabelSize100 .Field {
      margin-right: 100px;
      overflow: hidden;
}
.LabelSize100 label {
    width: 100px;
}   

And JSFiddle

Seems to work on all 3 browsers

Answer 3

You have an error in your syntax, look at class `.Field

{
    white-space: nowrap;
    min-height: 26px;
    padding: 1px 0;.Field
} 

.Field should not be after padding

Is this what you're looking for?

 * { 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: inline-block; width: 100%; } .LabelSize100 .Field { margin-right: 100px; } .LabelSize100 label { width: 100px; } .LabelSize100 input { margin-left: 0px; } 

 <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> 

Answer 4

You should include a normalize CSS file. It's a file that makes browsers render all elements more consistently and in line with modern standards. Download this file and include it before your CSS: http://necolas.github.io/normalize.css/