CSS <div>在IE和Firefox </div>之间不能很好地扩展

Question

我无法将模板大小调整为与IE相同。 我试图在IE和Firefox上制作名为face 3和face4 scale的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>