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

Question

要使Chrome和Firefox呈现与Internet Explorer相同的方式，我需要更改什么？ 我的第一个想法是使用CSS calc() ，但我仍然需要支持IE8。

我有以下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;
}

以及以下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>

结果在IE / Chrome和FF中完全不同：

JSFiddle链接

Answer 1

只需设置display:inline-block; 到<label>和<input>

的CSS

label
{
    float: left;
    display: inline-block;
}

input
{
    display: inline-block;
    width: 100%;
}

.LabelSize100 input
{
 // Remove margin-left
}

注意：从<input>删除margin-left距

此处演示

Answer 2

我得到了这个解决方案：

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

和JSFiddle

似乎可以在所有3种浏览器上使用

Answer 3

您的语法有误，请查看类`.Field

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

.Field不应在padding后

这是您要找的东西吗？

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

您应该包括一个规范化的CSS文件。 这个文件可以使浏览器更一致地呈现所有元素，并符合现代标准。 下载此文件并将其包含在CSS之前： http : //necolas.github.io/normalize.css/