html - IEの頭痛-CSS:first-childセレクターが機能せず、Google Web Fontsを使用した奇妙な動作

html css cross-browser internet-explorer-9 css-selectors

Webサイトをレイアウトしようとしていますが、すぐにIEで問題が発生します。この問題はhttp://dhines.com/moyatestで確認できます。

IEとFirefoxのページを見ると、2つの違いがあります。最初は右側の一番上のモジュールです。 IEは上部に10ピクセルのマージンを追加しており、最初の子にtop-margin:0pxがあることを指定しているCSSの部分は無視しています。

他の違いはフォントです。もちろんFFで問題なく動作するGoogle Web Fontを使用していますが、IEではページを更新するたびにフォントが変更されます。自分でテストしてみてください。ページを更新するたびにフォントが変わります。私は個人のサイトでGoogle Web Fontsを使用しているため、ブラウザ間で問題が発生しないため、これは非常に奇妙です。

モジュールのCSS:

#page-modules
{width:250px; margin:0px; padding:0px; float:right;}

.module
{width:250px; margin:0px; padding:0px; margin-top:10px; background:url('../images/trans-bg.png');}

.module:first-child
{margin-top:0px;}

.module-spacer
{width:20px; height:200px; padding:0px; margin:0px; float:left;}


(モジュールスペーサークラスはテキストを左側から20pxに保ち、その高さはモジュールの最小高さを制御します)

そしてHTML:

<div id="page-modules">
    <div class="module">
        <div class="module-spacer">
        </div>
            <div class="module-content">            
            Test            
        </div>
            <div class="clear">
        </div>
    </div>

    <div class="module">
        <div class="module-spacer">
        </div>
        <div class="module-content">
            Test        
        </div>
        <div class="clear">
        </div>
    </div>      
    <div class="clear">
    </div>
</div>


フォントについては、これをヘッドセクションに追加します。

<link href='http://fonts.googleapis.com/css?family=Alegreya:400,700,400italic,700italic,900,900italic' rel='stylesheet' type='text/css'>


次に、私のCSSの本体セレクター:

 body
 {font-family: 'Alegreya', serif; font-weight:400; font-style:normal;}
答え
ページにDOCTYPE宣言を追加するのを忘れたため、IEは互換モードにフォールバックしています。その結果、:first-childおよび:hover疑似クラスは無視され、EOT形式でないWebフォントはレンダリングされません(GoogleはWOFFのみを提供します)。

Firefoxはページを互換モードでレンダリングしています。ただし、両方の疑似クラスをネイティブにサポートしているため、FirefoxでIEと同じように動作することはありません。
関連記事

android - 多数のテキスト行とスタイルを持つEditTextで2Dスクロールを有効にします

html - CSS / HTML:IE9 + jsFiddleの配置の問題

html - <TD>セルに背景画像が表示されない

html - cssでメニュー項目の幅を自動的に計算する

php - php / htmlにフレームのような構造を作成しますか?

html - GoogleマップとHTML 5 GeoLocationから国コードを取得する

javascript - SQLite openDatabaseで複数のデータベースを作成する

html - <span> + <sup>改行が原因で間に空白がある

html - 含むdivの背景色がページ全体に表示されないのはなぜですか?

jquery - 大量の画像を含む保守可能なPhoneGapページを作成するにはどうすればよいですか?