给大家带来CSS网页制造教程:表单button的行高

那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？
破洛洛文章简介：表单button的行高成绩。
HTMLCode
<inputtype="submit"id="button"value="engage"/>
CSSCode
#button{
border:2pxsolid#06f;
color:#06f;
background-color:#6cf;
font:bold12pxArial,Helvetica,sans-serif;
line-height:50px;
}
多最终效果中，分明的告知我们，在Firefox和Opera扫瞄器中都存在成绩，并且致命的一点是：“不管你经由过程甚么手腕往修正button的line-height，在Firefox和Opera扫瞄器下都无任何效果。”是甚么招致的呢？（我之前从没注重到他们有如许的一个bug存在）。看了下面的文章我才晓得，本来是扫瞄器对界说button的line-height是分歧的，我们来看看扫瞄器在Firefox下的剖析line-height值的截图：

从图中告知我们一个事理：button的行高在Chrome/Safari/IE8等扫瞄器剖析准确的line-height(用户自定的值“50px”);而在Firefox和Opera剖析的line-height倒是默许的值，只要“15px”。那为何会如许呢？
要回覆这个成绩，我回覆不出来，大概您晓得是为何？我只能把他看成是Firefox和Opera扫瞄器下的一个特性，换句话就是：这两个扫瞄器的line-height默许值为normal而且还加了一个“!important”,相似于：
button,input[type="reset"],input[type="button"],input[type="submit"]{
line-height:normal!important;
}
那我们是否是能够在设置值的时分也加个“!important”办理呢？我实验了，但是失利了，那我们必要怎样来办理呢？
怎样办理？
RobGlazebrook在他的《TheFirefoxInputButtonLine-HeightBug》教程中利用了一种办法——在button中不重置line-height的值，而是利用padding来制造不异的效果。如许下面的实例能够如许修正：
#button{
border:2pxsolid#06f;
color:#06f;
background-color:#6cf;
font:bold12pxArial,Helvetica,sans-serif;
padding:18px6px;
}

</p>
支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。