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的结果完全不同： GUI Error

JSFiddle link

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
}

注意：从margin-left

中删除<input>

<强> DEMO HERE

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/

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

4 个答案: