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

Question

我需要更改什么才能使 Chrome 和 Firefox 以与 Internet Explorer 相同的方式呈现？我的第一个想法是使用CSScalc()，但我仍然需要支持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 link

Answer 1

你的语法有误，查看class `.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 2

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

Answer 3

只需将 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

DEMO HERE

Answer 4

我得到了这个解决方案：

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 种浏览器

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

My input fields render inline on IE, but on new lines in Chrome and Firefox. How can I fix that?

html

css

internet-explorer

google-chrome

html-rendering