1

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

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

为了与 660 像素的最大宽度保持一致，我将 h2 的宽度设置为 660 像素，这在所有浏览器中都很好，除了（惊喜）在 IE9 上，h2 字体非常大，并且在 660 像素布局的右侧大量运行。

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

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

这是我的 CSS：

    h2 {
        width: 660px;
    }

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

但是在登录页面上，其中一个 h2 标记内的文本——在 IE9 上的 h2 文本要大得多，因此 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 中填充了文本后面具有视觉吸引力的渐变背景。

我正在考虑通过使用'conditional-for-IE9'来解决这个问题，比如说——一个h3标签而不是h2标签——但仅限于IE9。

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

4

1 回答 1

1

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

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

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

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

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

以下文本样式在 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 等）。

我假设同样的问题。

使用字体大小时：20px；在h2上设置样式确实会有所不同——比如说，如果你增加到 25px 或下降到 15px——你可以看到 IE9 和 FF 上的字体大小都在变化——

-- h2标签在 FF 和 IE9中对字体大小 ??px的响应方式不同。

使用h2标签 - IE9 上的 font-size:16px 与 Firefox 上的 h2 相同的font - size :16px更大。但是，其他标签并非如此——标签和锚标签在两个浏览器上呈现相同的大小。

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

   .h2XtraStyle
   {
      /*width: 660px;  LABEL doesn't recognize 'width' so we used &nbsp; 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 />

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

于 2012-04-21T21:01:08.840 回答