Html IE头痛-CSS：第一个子选择器不工作，使用谷歌网页字体的怪异行为

我正试图布局一个网站，但马上就有问题与IE。你可以看到的问题在

如果你看看IE和Firefox中的页面，你会发现两个不同点。第一个是右侧的顶部模块。IE在顶部添加了一个10px的边距，并忽略了CSS中我指定第一个子元素有一个顶部边距的部分：0px

另一个区别是字体。我使用的是谷歌网页字体，当然在FF中效果很好，但在IE中，每次我刷新页面时，字体都在变化。自己测试一下，每次页面刷新都会改变字体。这是非常奇怪的，因为我在我的个人网站上使用谷歌网页字体，没有跨浏览器问题

模块的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>

---

您忘记在页面中添加DOCTYPE声明，因此IE正在退回到怪癖模式。因此，它会忽略您的

：first child

和

：hover

伪类，并且不会呈现非EOT格式的Web字体（Google只提供WOFF）

---

Firefox还以怪癖模式呈现您的页面。但是，它本机支持这两个伪类，因此您在Firefox中观察到的行为与IE中的行为不同。

正如BoltClock所说，您似乎没有在

正文上设置
边距：0
。IE有一个默认页边距-这对于未设置样式的页面是一件好事，因为将文本压缩到窗口边缘是非常不吸引人的。
所有主要浏览器都有默认的正文页边距。是吗？隐马尔可夫模型。。。这不是我最后一次检查，但请注意，我已经好几年没检查了：D
<link href='http://fonts.googleapis.com/css?family=Alegreya:400,700,400italic,700italic,900,900italic' rel='stylesheet' type='text/css'>

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