IE和Firefox之间的CSS差异：显示 [英] CSS Differences Between IE and Firefox: display

问题描述

我正在开发一个需要使用IE7和Firefox 3.6的Web应用程序。我正在布置使用CSS的表单。表格很标准。我想每个div（数据组）在自己的行与标签和选项排列在一起的div（作为一个行）。下面是在Firefox中运行的CSS：
$ b $ $ $ $ $ $ $ $ $ $内嵌块; * /
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中工作，如果我添加一个清除div，我已经清除了这两个div的类别，但是这看起来像是一个黑客。）

我在这里丢失了一些明显的东西吗？建议在这两个浏览器中使这项工作非常好。

编辑：提供请求的（简单化的）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> 
 
 <！ - 重复很多差异。数据组。 - > 
< 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> 
  

解决方案

inline-block 在IE中无法正常工作， http：// work.arounds.org/using-inline-block-ie7-and-ie6/

您必须重新声明显示：inline; 在块级别元素上给出 inline-block 到IE。这意味着您必须在单独的规则中重新声明您给予内嵌块的规则。

 <！ -  [如果lt IE 8]> 
< style> 
 .editor-label {display：inline;缩放：1; } 
< / style> 
<！[endif]  - > 
  

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

I am developing a web application which needs to work with both IE7 and Firefox 3.6. I am laying out the forms using CSS. The forms are pretty standard. I want each div (data-group) on its own line with the labels and options lined up together within the div (as a row). Here is the CSS that works in Firefox:

.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;
}

Unfortunately, this does not work in IE7. To achieve the same effect, I have to uncomment the two commented lines and comment the inline-block on .editor-label, .option1, .option2 selection. Unfortunately this breaks Firefox...and this really does not seem like the correct thing to do anyway (the Firefox way makes far more sense). (I can get this way to work in Firefox if I add a "clear" div where I have "clear: both" on that div's class...but this seems like a hack.)

Am I missing something obvious here? Suggestions to help make this work in both browsers would be great.

Edit: Provide requested (trivialized) 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>

解决方案

inline-block doesnt properly work in IE, http://work.arounds.org/using-inline-block-ie7-and-ie6/

You have to re-declare display:inline; on the block level elements that are given inline-block to IE. Meaning you have to redeclare the rule for the div you gave inline-block in a separate rule.

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

This will most likely solve your issue. If not, please post a demo.

这篇关于IE和Firefox之间的CSS差异：显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！