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

【问题标题】：My input fields render inline on IE, but on new lines in Chrome and Firefox. How can I fix that?我的输入字段在 IE 上呈现内联，但在 Chrome 和 Firefox 中呈现新行。我该如何解决？
【发布时间】：2015-05-19 14:35:12
【问题描述】：

我需要进行哪些更改才能使 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 link

【问题讨论】：

是不是因为你没有使用规范化 CSS 文件？
@PoeHaH，.Field 是一种缺失类型，如果您删除它，问题仍然存在！
彼得，这个回复不适合我 :) 请重新阅读我的问题

标签： html css google-chrome internet-explorer html-rendering

【解决方案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

DEMO HERE

【讨论】：

谢谢你拯救了我的一天！

【解决方案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 种浏览器

【讨论】：

输入应该覆盖该区域的其余部分，看这个例子jsfiddle.net/3u3jg3y3/9 第二种形式doseent 适应我想要的方式..
啊 - 我以为你的问题是：标签和输入都不显示在一行中，彼此相邻。是的，你是对的 - 要实现你想要的（输入字段水平拉伸到整个剩余空间），你需要使用 calc() 函数。 width: calc(100% - 100px);。并且后备是硬编码/固定宽度放置在css中的上述规则之前：width: 200px;，然后是width: calc(100% - 100px);。我也可以在这里看到 flexbox 的潜力 - 但我需要使用它，并最终将它作为第二个答案发布，因为我制定了解决方案。
...同时，您可以尝试测试这个小技巧：JSfiddle

【解决方案3】：

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

【讨论】：

【解决方案4】：

您的语法有错误，请查看类 `.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>

【讨论】：

是的，这是一个错误类型，但即使我删除它，问题仍然存在！