CSS <div> 在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模式呈现。

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

<!document html>