IE和Firefox之間的CSS差異：顯示

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的方式更有意義）。 （如果我在該div的班級上添加了“ clear：both”，則可以在Firefox中使用這種方式，但是在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/

您必須重新聲明display:inline; 在塊級元素上，這些元素被inline-block給IE。 這意味着您必須在單獨的規則中重新聲明為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的，它們可能沒有您所需要的有用），或者使用條件注釋來專門針對IE瀏覽器：

<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而不是針對適當的瀏覽器來定位IE，而無需在CSS中使用hack：

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

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

這種方法的缺點是您將所有樣式都放在一個樣式表中，這使得長期維護變得很笨拙。

另外，值得一提的是，使用CSS重置樣式表和有效的doctype可能會減少主要瀏覽器差異的影響（盡管顯然並非全部）。

IE和Firefox之間的CSS差異：顯示

問題描述

3 個解決方案

解決方案1
2 已采納 2010-08-03 19:53:27

解決方案2
1 2010-08-03 19:33:32

解決方案3
0 2010-08-03 19:34:40

IE和Firefox之間的CSS差異：顯示

問題描述

3 個解決方案

解決方案1 2 已采納 2010-08-03 19:53:27

解決方案2 1 2010-08-03 19:33:32

解決方案3 0 2010-08-03 19:34:40

解決方案1
2 已采納 2010-08-03 19:53:27

解決方案2
1 2010-08-03 19:33:32

解決方案3
0 2010-08-03 19:34:40