IE頭痛 - CSS：ファーストチャイルドセレクタが動作しない、Google Webフォントを使った奇妙な動作

Question

私はウェブサイトをレイアウトしようとしていますが、すぐにIEに問題があります。問題はhttp://dhines.com/moyatestで確認できます。

IEとFirefoxのページを見ると、2つの違いがあります。最初は右のトップモジュールです。 IEはトップに10ピクセルのマージンを追加し、最初の子がトップマージン：0ピクセルを持つように指定したCSSの部分を無視しています。

他の違いはフォントです。私はもちろんFFでうまくいくGoogle Web Fontを使用していますが、IEではフォントを毎回変更してページを更新しています。あなた自身のためにそれをテストし、すべてのページリフレッシュはフォントを変更します。これは非常に奇妙です。私は自分の個人用サイトでGoogle Webフォントを使用しており、ブラウザ間の問題はないからです。モジュールの

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;} 

（モジュールスペーサークラスは左側からテキスト20ピクセルを保持し、その高さは、モジュールの最小の高さを制御）

そして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で次にボディセレクタ

：あなたはIEがQuirksモードにフォールバックされるので、自分のページにDOCTYPE宣言を追加するのを忘れ

body 
{font-family: 'Alegreya', serif; font-weight:400; font-style:normal;} 

Answer 1

。その結果、あなたの:first-childと:hover疑似クラスは無視され、EOT形式ではないWebフォントはレンダリングされません（GoogleはWOFFのみを提供します）。

Firefoxはまた、あなたのページをquirksモードでレンダリングします。しかし、それはネイティブに両方の擬似クラスをサポートしているので、FirefoxでIEと同じ動作をしません。

Answer 2

また、BoltClockによると、bodyにはmargin: 0を設定していないようです。 IEはデフォルトのマージンを持っています。これは、ウィンドウの端までスムーズにテキストをスムージングすることが非常に魅力的であるため、スムーズでないページにとっては良いことです。