代码之家 › 专栏 › 技术社区 › JasCav

IE和Firefox的CSS差异:显示

firefox internet-explorer css

JasCav · 技术社区 · 15 年前

我正在开发一个web应用程序,它需要同时使用IE7和Firefox3.6。我用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 selection上的内联块。不幸的是,这打破了Firefox…而且这看起来并不是正确的做法(Firefox的方式更有意义)(如果我在Firefox中添加一个“clear”div,在这个div的类中我有“clear:both”,我就可以用这种方式在Firefox中工作……但这看起来像是一个黑客攻击。)

我是不是漏掉了什么明显的东西?建议在两种浏览器中都可以使用。

编辑:提供请求的(平凡化的)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>

3 回复 | 直到 15 年前

meder omuraliev 15 年前

inline-block 在IE中不能正常工作, http://work.arounds.org/using-inline-block-ie7-and-ie6/

你必须重新申报 display:inline; 内联块 这意味着您必须在单独的规则中为您提供的inline块重新声明div的规则。

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

Marko 15 年前

我使用下面的代码,在所有浏览器中都可以使用。

<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”元素上设置一个宽度,如果你不想让它填满整个可用空间的话。

David Thomas 15 年前

在撰写本文时,您的问题中没有(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>

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

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

这种方法的缺点是,您将所有样式都放在一个样式表中,这使得长期维护样式表相当困难。

另外,值得一提的是,使用CSS重置样式表和有效的doctype可能会减少专业