Div+CSS网页制作教程:表单button的行高

Div+CSS网页制作教程：表单button的行高设置方法

HTML Code

<input type="submit" id="button" value="engage"/>

CSS Code

#button {

     border: 2px solid #06f;

     color: #06f;

     background-color: #6cf;

     font: bold 12px Arial, Helvetica, sans-serif;

     line-height: 50px;

    }

    多效果图中，明显的告诉我们，在Firefox和Opera浏览器中都存在问题，而且致命的一点是：“无论你通过什么手段去修改button的line-height，在Firefox和Opera浏览器下都无任何效果。”是什么导致的呢？（我以前从没注意到他们有这样的一个bug存在）。

    这就告诉我们一个道理：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”解决呢？我尝试了，可是失败了，那我们需要怎么来解决呢？

    Rob Glazebrook在他的《The Firefox Input Button Line-Height Bug》教程中使用了一种方法——在button中不重置line-height的值，而是使用padding来制作相同的效果。这样上面的实例可以这样修改：

#button {

     border: 2px solid #06f;

     color: #06f;

     background-color: #6cf;

     font: bold 12px Arial, Helvetica, sans-serif;

     padding: 18px 6px;

    }