css - CSS在 IE 和 Firefox 之间不能很好地扩展

Question

我在调整模板大小以使其看起来与 IE 相同时遇到问题。我正在尝试在 IE 和 firefox 上制作名为 face 3 和 face4 的 div，但我不能。如果 div 非常适合 Firefox 。然后它会在 IE 上运行。有人可以帮帮我吗 。

CSS

.face1 {
    text-align: center;
    background-color: #AAAAAA; 
    height: 450px;
    width: 390px;
    position: absolute;
    left: 520px;top:100px;
    border-style:solid;
    border-color:#1BE968;
    border-width:35px;
}
.face3 {
    text-align: center;
    background-color: #DDDDDD; 
    width: 300px;
    position: relative;
    left: 10px;top:0px;
    text-align: center;
    color: #FFFFFF;
    font-family: Arial;
    font-size: 33px;
}
.face4 {
    text-align: center;
    background-color: #DDDDDD;  
    width: 50px;height:30px;
    position: absolute;
    left: 290px;top:200px;
    text-align: center;
    color: #CCCCCC;
    font-family: Arial;
    font-size: 33px;
}

HTML

<div class="face1">
    <div class="face3">24 x 7 customer web supprt</div>
    <div class="face4">supprt</div>
</div>

演示在http://jsfiddle.net/Yg3yq/

Answer 1

在 IE8（和 IE9）中打开http://jsfiddle.net/Yg3yq/show/呈现与 Firefox 相同的效果，这让我相信您的文档可能会以Quirks Mode呈现。

要解决这个问题，请将其作为 HTML 文件的第一行（前面没有空格或字符！）

<!document html>