由于 IE9 字体对于 <h2> 来说太大，页面布局被破坏

Question

页面布局在所有浏览器中都很好，但 IE9 除外。

我们在页面上使用块式布局，宽度为 660px，居中。

为了保持 660 像素的最大宽度，我将 h2 的宽度设置为 660 像素 这在所有浏览器中都很好，除了（惊喜）在 IE9 上，h2 字体很大并且跑偏了 660px 布局的巨大数量。

我可以更改 h2 中的措辞来缓解这种情况（缩短文本）吗？

不。页面上的措辞不是我的权限——别人的工作（'UE'gal）。

这是我的 CSS：

    h2 {
        width: 660px;
    }

660px 的宽度用于页面上的其他 div，并在页面上提供视觉上吸引人的“块布局”。

但是在着陆页上，其中一个 h2 标记内的文本 -- h2 文本在 IE9 上要大得多，因此 660px 的宽度超过了 IE9 的 h2 大字体大小。

这是一个违规行的示例：

   <h2 class="grayDecorative">Make your Relics visible on our site now! -- OurSite!</h2>

这里是“灰色装饰”风格：

   .grayDecorative
   {
      font-family: Arial, sans-serif;
      background-image: url('images/chromishbg.gif');
      background-repeat: repeat-x;    
   }

这种样式在 h2 中填充了文本后面具有视觉吸引力的渐变背景。

我正在考虑通过使用“有条件的 IE9”来解决这个问题，比如使用 h3 标签而不是 h2 标签，但 仅 在 IE9 上。 p>

如何让 html 有条件地使用 IE 的 h3？

Answer 1

我想发布我发现的解决方案。

我和其他人认为使用以下样式应该使 h2 标签的文本在 IE 和 FF 等上的字体大小相同：

     h2
     {
         width: 660px;
         font-size: 20px;
     }

为 h2 标签设置相同的 font-size 应该可以解决问题。但事实并非如此。 对于上面 h2 标签中相同的 font-size: 20px，IE 文本字体要大得多。

当我注意到时我很幸运——同一页面上的其他文本元素在 FF 和 IE9 上的大小完全相同。 但这些标签不是 h2——它们主要是 anchors 和几个 label 标签。

以下文本样式在 IE9 和 Firefox 上以完全相同的大小生成文本 -- 但请注意 下面的标签不是 h2 标签，这是我遇到文本大小问题的标签：

 .pageTopRowTextStyle
 {
      color:RGB(255,255,255); 
      text-decoration:none;
      font-family: Arial, sans-serif;
      font-size: 15px;    
 }

 <a class="pageTopRowTextStyle" href="oursite.com">
              This text size was the same in IE9 and FF</a>

这是我发现的。请注意，这是我们在 IE9 中发现的。
如果涉及 h2 标签，则无法可靠地协调跨浏览器的文本大小差异。 我没有检查其他标题标签（h1、h3、h4 等）。

我假设同样的问题。

在 h2 上为样式使用 font-size: 20px; 设置确实会产生影响 - 例如，如果您增加到 25px 或减小到 15px - - 你可以看到 IE9 和 FF 的字体大小都在变化 ---

-- h2 标签在 FF 和 IE9 中对 font-size ??px 的响应方式不同。

使用 h2 标签 -- IE9 上的 font-size:16px 比 font-size:16px 更大strong>h2 在 Firefox 上。 其他标签则不然—— label 和 anchor 标签在两个浏览器上呈现相同的大小。

所以我们只是把 h2 标签去掉了，现在我们使用 label 标签代替 h2 标签，现在是字体大小在 FF 和 IE9 上相同：

   .h2XtraStyle
   {
      /*width: 660px;  LABEL doesn't recognize 'width' so we used   padding */
      font-size: 20px;
   }

这是一个跨浏览器的 h2 标签——在 IE9 和 FF 上看起来是一样的

    <br />
    <label class="h2XtraStyle">Make your Relics visible on our site now! -- OurSite! 
         &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </i></label>
    <br />

我真的不知道为什么 h2 标签的字体大小在 IE9 中的处理方式不同，但解决方法是根本不使用它。 我们的解决方案不是很优雅，但它完成了工作。