input button文字的行高在FF下的顯示問題

2024-07-11 08:29:08

字體：大中小

來源：轉載

供稿：網友

最近國外有開發者發現Firefox和Opera的一個BUG：無法改變按鈕里文字的行高（包括input type=”sumbit”和HTML的button標簽）。舉個例子，對一個按鈕使用以下樣式：

復制代碼

代碼如下:
input#button {
border: 2px solid #06f;
color: #06f;
background-color: #6cf;
font: bold 12px Arial, Helvetica, sans-serif;
line-height: 50px;
}

按照常理，這個樣式將為按鈕設置50px的行高，并使文本垂直居中。因為這個樣式在Chrome、Safari和IE8里的表現都一致，唯獨在Firefox和Opera里并沒有表現出50px的行高，具體效果如下圖。
button-sizes-by-browser

是什么原因引起了這個問題？
在Firebug的幫助下，該開發人員發現雖然自己已經把行高設為50px，但Firefox依然使用15px的行高。
firebug-firefox-line-height

該開發人員認為是Firefox強行限制了按鈕文本的行高，于是編寫了以下的CSS用于驗證。

復制代碼

代碼如下:
button, input[type="reset"], input[type="button"], input[type="submit"] {
line-height:normal !important;
}

該開發人員發現，Firefox會私自把按鈕內文本的行高設置為normal，這個值在Firefox里默認為15px，但各個瀏覽器對normal的值并沒有一個統一的標準。最后這個開發人員放棄了通過行高把按鈕撐開并使文本居中的方法，而采用了以下的樣式，解決了Firefox的按鈕行高問題。

復制代碼

代碼如下:
input#button {
border: 2px solid #06f;
color: #06f;
background-color: #6cf;
font: bold 12px Arial, Helvetica, sans-serif;
padding: 18px 6px;
}

這并不是最好的辦法，但也算是達到了所需的效果。

學習交流

如何查找有故障的配件

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本