Question

我正在开发一个需要同时使用IE7和Firefox 3.6的Web应用程序。我正在使用CSS布置表单。表格非常标准。我希望每个div（数据组）在它自己的行上，标签和选项在div中排成一行（作为一行）。以下是适用于Firefox的CSS：

.data-group 
{
    /*display: inline-block;*/
    vertical-align: top;
    padding-top: 5px;
    padding-bottom: 5px;
}

.editor-label, .option1, .option2
{
    display: inline-block;
    /*float: left;*/
}

.editor-label
{
    width: 250px;
    vertical-align: top;
}

不幸的是，这在IE7中不起作用。为了达到同样的效果，我必须取消注释两个注释行并注释.editor-label，.option1，.option2选择上的内联块。不幸的是，这打破了Firefox ...而且这似乎不是正确的事情（Firefox方式更有意义）。（我可以通过这种方式在Firefox中工作，如果我添加一个“clear”div，我在那个div的类上有“clear：both”......但这看起来像是一个黑客。）

我错过了一些明显的东西吗？有助于在两种浏览器中使用此功能的建议都很棒。

编辑：提供请求的（无关紧要的）HTML。

    <div class="data-group">
        <div class="editor-label">
            <%: Html.CheckBoxFor(model => model.cb1)%>
            <%: Html.LabelFor(model => model.label1) %>
        </div>
        <div class="option1">
            <%: Html.TextBoxFor(model => model.tb2)%>
            <div class="label"><%: Html.LabelFor(model => model.label2) %></div>
        </div>
        <div class="validation">
            <div><%: Html.ValidationMessageFor(model => model.tb2) %></div>
        </div>
    </div>

    <!-- Repeat many diff. data-groups. -->
    <div class="data-group">
        <div class="editor-label">
            <%: Html.CheckBoxFor(model => model.cb1)%>
            <%: Html.LabelFor(model => model.label1) %>
        </div>
        <div class="option1">
            <%: Html.TextBoxFor(model => model.tb2)%>
            <div class="label"><%: Html.LabelFor(model => model.label2) %></div>
        </div>
        <div class="validation">
            <div><%: Html.ValidationMessageFor(model => model.tb2) %></div>
        </div>
    </div>

Answer 1

inline-block无法在IE http://work.arounds.org/using-inline-block-ie7-and-ie6/

中正常使用

您必须在向IE提供display:inline;的块级元素上重新声明inline-block。这意味着您必须重新声明您在单独规则中为内联块提供的div的规则。

<!--[if lt IE 8]>
<style>
.editor-label { display:inline; zoom:1; }
</style>
<![endif]-->

这很可能会解决您的问题。如果没有，请发布演示。

Answer 2

我使用以下代码，该代码适用于所有浏览器。

HTML

<div class="field clearfix">
    <label for="firstName" id="firstNameLabel">First Name</label>
    <input name="firstName" type="text" id="firstName" />
</div>

CSS

.field {
    margin: 0 0 10px;
}
.field label {
  font-size: 13px;
  padding: 8px 0;
  margin: 0 18px 0 0;
  display: block;
  float: left;
  width: 90px;
}
.field input,
.field textarea {
  width: 220px;
  font-size: 11px;
  line-height: 11px;
  padding: 6px 10px;
  color: #666;
  background: #fff;
  border: 1px solid #c4c6c7;
  display: block;
  float: left;
}

而且非常着名的clearfix hack（阻止你必须添加清除元素。只需设置包含浮动元素的父div，它就像魅力一样。

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    font-size:0;
    clear: both;
    visibility:hidden;
}
   .clearfix{display: inline-block;}
  * html .clearfix {height: 1%;}
  .clearfix {display:block;}

你可以摆弄宽度来达到你的效果，你也可以在“field”元素上设置一个宽度，如果你不想让它填满可用的整个空间。

祝你好运。

Answer 3

在撰写本文时，您的问题中没有（x）html示例，因此我只能为您提供方法 - 而不是特定解决方案 - 来解决您的问题，但这些技术可以很容易地进行调整。

你有两种明显的方法可以定位不同的浏览器（虽然它使用的是IE条件注释，所以它基本上是针对IE和非IE，可能没有你需要的那么有用），要么使用条件注释来导入专门用于Internet Explorer的样式：

<head>
    <link rel="stylesheet" type="text/css" href="path/to/general/stylesheet.css" />

    <!--[if ie]>
        <link rel="stylesheet" type="text/css href="path/to/ie/stylesheet.css" />
    <![endif]-->
</head>

这种方法的缺点是你有两个独立的样式表需要维护。

或者您可以使用条件注释来改变选择器的特异性：

<body>
    <!--[if ie]>
        <div id="ieOnly">
    <![endif]-->

    <div id="somethingToStyle">
        ...content...
    </div>

    <!--[if ie]>
        </div>
    <![endif]-->
</body>

这种方法可以让你以不同于适当浏览器的方式定位IE，而不使用CSS中的黑客攻击：

body > div#somethingToStyle { /* for non-IE */ }

body > div#ieOnly > div#somethingToStyle { /* IE only */}

这种方法的缺点是你在一个样式表中得到了所有的样式，这使得长期维护变得相当笨拙。

此外，值得一提的是，使用CSS重置样式表和有效的doctype可能会减少主要浏览器差异的影响（尽管不是全部，显然）。

IE和Firefox之间的CSS差异：显示

3 个答案: