跨度与 ie6 中的 h1 不对齐

Posted 2023-03-06

【中文标题】跨度与 ie6 中的 h1 不对齐

【英文标题】：Span doesn't align with h1 in ie6

【发布时间】：2011-01-07 19:45:59

【问题描述】：

我有一个 div，一个 h1 标签后跟一个 span 标签，它们一个挨着一个，但是 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;
  

【问题讨论】：

您有实时链接吗？有时以这种方式进行测试更容易。但是，为我尝试一件事。这可能是一个简单的空白错误。只需删除两行返回，如下所示：</h2><span class="breadcrumb">

你在这里发布的 CSS 和你在网上看到的不一样。这是来自开发版本的 CSS 吗？

@Doug 是的，我还去掉了 cmets。

【参考方案1】：

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

【参考方案2】：

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

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

#article-header h1
   display: inline;

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

【讨论】：

我修复了它，但它仍然无法在 ie6 中工作：S 我还在线程帖子中更新了我的代码