Firefox中使用display: table-cell; vertical-align: middle;可以實現div垂直置中,而IE6中則需要藉助IE6中css的特點實現垂直置中。為了實現Firefox和IE6相容的垂直置中,還需要 藉助於!important標記。Firefox支援!important標記,而IE6忽略!important標記,因此可以使用! important標記區別Firefox和IE6。
[範例程式碼]
<html>
<body>
<div style="display: table-cell; vertical-align: middle; height: 200px; border: 1px solid red;">
<p>垂直置中,Firefox only</p>
<p>垂直置中,Firefox only</p>
<p>垂直置中,Firefox only</p>
</div>
<div style="border: 1px solid red; height: 200px; position: relative;">
<div style="position: absolute; top: 50%;">
<div style="position: relative; top: -50%;">
<p>垂直置中,IE6 only</p>
<p>垂直置中,IE6 only</p>
<p>垂直置中,IE6 only</p>
</div>
</div>
</div>
<div style="border: 1px solid red; height: 200px; position: relative; display: table-cell; vertical-align: middle;">
<div style="position: static !important; position: absolute; top: 50%;">
<div style="position: relative; top: -50%;">
<p>垂直置中,Firefox IE6 only</p>
<p>垂直置中,Firefox IE6 only</p>
<p>垂直置中,Firefox IE6 only</p>
</div>
</div>
</div>
</body>
</html>
[div+css的瀏覽器安全色問題]
水平置中,Firefox使用margin-left: auto; margin-right: auto; IE6 使用text-align: center;
垂直置中,Firefox中使用display: table-cell; vertical-align: middle;可以實現div垂直置中,而IE6中則需要藉助IE6中css的特點實現垂直置中。
!important標記,Firefox支援!important標記,IE6忽略!important標記