html - IE 头痛 - CSS :first-child selector not working, 使用 Google Web 字体的奇怪行为

Question

我正在尝试对网站进行布局，但马上就遇到了 IE 问题。您可以在 http://dhines.com/moyatest 查看问题.

如果您在 IE 和 Firefox 中查看页面，您会发现两个不同之处。第一个是右侧的顶部模块。 IE 在顶部添加了 10 像素的边距，并忽略了我的 CSS 中我指定第一个 child 的顶部边距为 0 像素的部分。

另一个区别是字体。我使用的是 Google Web 字体，当然它在 FF 中工作正常，但在 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;}

(module-spacer 类保持文本距左侧 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 选择器:

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

Answer 1

您忘记在页面中添加 DOCTYPE 声明，因此 IE 退回到怪癖模式。因此，它会忽略您的 :first-child 和 :hover 伪类，并且不会呈现非 EOT 格式的 Web 字体(Google 仅提供WOFF)。

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