Question

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

如果您查看IE与Firefox中的页面，您会看到两个不同之处。第一个是右侧的顶部模块。 IE正在向顶部添加10px的边距，忽略我的CSS中的部分，我指定第一个孩子有一个上边距：0px。

另一个区别是字体。我使用的是Google Web字体，当然在FF中运行良好，但在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;}

（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
 {font-family: 'Alegreya', serif; font-weight:400; font-style:normal;}

Answer 1

您忘记向页面添加DOCTYPE声明，因此IE正在回归怪癖模式。因此，它会忽略您的:first-child和:hover伪类，并且不会呈现不属于EOT格式的Web字体（Google仅提供WOFF格式）。

Firefox也在怪异模式下渲染你的页面。但是，它本身支持两个伪类，因此您不会在Firefox中观察到与IE中相同的行为。

Answer 2

除了BoltClock所说的内容之外，您似乎没有在margin: 0上设置body。 IE有一个默认的边距 - 这对于没有样式的页面是一件好事，因为将文本压缩到窗口的边缘是非常不吸引人的。

IE头痛 - CSS：使用Google Web Fonts的第一个孩子选择器不工作，奇怪的行为

2 个答案: