5.23日音讯,使表单行高适应多浏览器

　　5.23日音讯,使表单行高适应多浏览器。表单的不兼容，在我们网页制作中是比较常见的，为什么会出现这种情况呢，是因为浏览器对所默认值的认同不一样导致的，当然了，我们不应该去追究谁对谁错，只能我们能把它们的内涵掌握了，让它们互相兼容，就是我们所必须要学会的。

　　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;

　　}