1

ページ レイアウトは、IE9 を除くすべてのブラウザで問題ありません。

ページではブロック スタイルのレイアウトを使用し、幅は 660px で中央揃えです。

660px の最大幅に合わせて、h2 の幅を 660px に設定しました。IE9 の (サプライズ サプライズ) を除いて、すべてのブラウザで問題ありません。

これを軽減するために h2 の言い回しを変更できますか (テキストを短くします)?

いいえ。このページの言葉遣いは私の権限ではありません。他の誰かの仕事です ('UE' gal)。

これは私のCSSです：

    h2 {
        width: 660px;
    }

その 660px の幅は、ページ上の他の div で使用され、ページ上で視覚的に魅力的な「ブロック レイアウト」を提供します。

しかし、ランディング ページでは、いずれかの h2 タグ内のテキスト -- h2 テキストは IE9 では非常に大きいため、IE9 の大きな h2 フォント サイズが 660px の幅を超えています。

問題のある行の例を次に示します。

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

「grayDecorative」スタイルは次のとおりです。

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

このスタイルは、テキストの背後にある視覚的に魅力的なグラデーションの背景で h2 を埋めます。

h2タグの代わりにh3タグを使用する「条件付きIE9」を使用することで、これを解決しようと考えていますが、 IE9のみです。

IE で h3 を使用するように html を条件付きにするにはどうすればよいですか?

4

1 に答える 1

1

解決につながった発見を投稿したいと思います。

私と他の人は、次のスタイルを使用すると、IE と FF などのh2タグのテキストのフォント サイズが同じになるはずだと考えました。

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

h2タグに同じfont-size を設定すればうまくいくはずです。しかし、それはしませんでした。同じfont-size: 20px上でh2タグの場合、IE テキスト フォントははるかに大きくなります。

幸運なことに、同じページの他のテキスト要素が FF と IE9 でまったく同じサイズであることに気付きました。 しかし、これらのタグは h2 ではありませんでした。ほとんどがアンカーであり、2 つのラベルタグでした。

次のテキスト スタイルでは、 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 など) はチェックしませんでした。

私は同じ問題を想定しています。

font-size: 20px;を使用している場合。h2でスタイルを設定すると違いが生じます -- たとえば、25px に増やしたり、15px に減らしたりすると、IE9 と FF の両方でフォント サイズが変化することがわかります ---

-- FF と IE9 の間で、 h2タグがfont-size ??pxに対して同じように応答しません。

h2タグ を使用すると、IE9 のfont-size:16pxは、Firefoxのh2の font-size : 16px より大きくなります。ただし、他のタグには当てはまりません。ラベルタグとアンカータグは、両方のブラウザで同じサイズで表示されます。

そのため、h2タグを変更し、 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 />

h2タグのフォント サイズが IE9 で異なる方法で処理される理由はよくわかりませんが、回避策はまったく使用しないことです。私たちのソリューションはあまりエレガントではありませんが、うまくいきました。

于 2012-04-21T21:01:08.840 に答える