css : display很關鍵，兼容性不得不注意的問題

 

最近比較注意css的兼容性。

這兩天發現一個東西很有用，就是display

在ie下，我如是定義a的樣式

.wtbar a
{
color: #000;
text-decoration: none;
text-align: center;
height: 26px;
width: 71px;
padding-top: 5px;
}
.wtbar a:hover
{
border: 0px;
background: url(../images/tbar/btn-b.gif) no-repeat;
height: 26px;
width: 71px;
padding-top: 5px;
}

這個屬性在ie下可以生效，當鼠標移動到a上，出現圖片底紋。

但是在ffox下就不行了，其效果表現在a的寬度和高度不生效了。

本以為在ffox下，a是沒有寬度和高度的屬性，但是，查了一下dhtml的知識庫，a是有這兩個屬性的。

于是想到，display的屬性，css關于html元素，應該都有其默認的“顯示類型”，于是我去找了一下，display有幾個值: block，inline, list-item,none,inline-block,table-cell,table-row,table-footer-group,table-header-group

我修改個css代碼

.wtbar a
{
color: #000;
text-decoration: none;
text-align: center;
height: 26px;
width: 71px;
padding-top: 5px;
display:table-cell;
}
.wtbar a:hover
{
border: 0px;
background: url(../images/tbar/btn-b.gif) no-repeat;
height: 26px;
width: 71px;
padding-top: 5px;
}

效果就出來了。

隨后檢查了一下，以前發現解決不了的頁面扭曲的問題，嘗試著修改/添加display的值，問題也解決了。

看來，display蠻關鍵的。

如果高度或寬度設定失效，可能就是display的問題。