Question

我有一个div，一个h1标签后跟一个span标签，它们是一个紧挨着另一个，但是跨度是向右浮动的。它适用于firefox，chrome和Internet Explorer 7和8，但不适用于ie6。在ie6中，h1标签无缘无故，因此span标签保持低于它。

下面是代码：

     <div style="width: 740px; float:left">

        <div id="article-header">

            <h1><span>Text</span></h1>

            <span class="breadcrumb">Link1 > Link2</span>

        </div>

Css：

  #article-header h1
  {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     font-weight: bold;
     color: #F2612F;
     text-transform: uppercase;
     display: inline;
     position: relative;
  }
  .breadcrumb
  {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 9px;
    float: right;
    text-transform: uppercase;
    vertical-align: baseline;
    margin-top: 0px; 

    text-align: right;
    display: inline;
  }

Answer 1

您可能需要使用CSS Reset File来摆脱IE6中的随机预定义样式。这消除了从一个浏览器到另一个浏览器的各种“隐形”样式。

Answer 2

不要在H1上使用float:left，只需使用display:inline

如果由于某种原因确实需要使用float:left，请尝试将其添加到IE6 仅样式表中：

#article-header h1{
   display: inline;
}

它不应该对渲染产生负面影响，但在IE6中结合浮动效果不同于普通display:inline

跨度与ie6中的h1不对齐

2 个答案: