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

IE和Firefox的CSS差异:显示

  •  0
  • JasCav  · 技术社区  · 14 年前

    我正在开发一个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 回复  |  直到 14 年前
        1
  •  2
  •   meder omuraliev    14 年前

    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]-->
    

        2
  •  1
  •   Marko    14 年前

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

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

        3
  •  0
  •   David Thomas    14 年前

    在撰写本文时,您的问题中没有(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可能会减少 专业