火狐下input button 按钮line-height不起作用的解决方法

问题描述：

      今天遇到一个问题，一个页面并排放四个按钮如下图：

      但是大家有没有发现input button类型的按钮和a标签的按扭的高度不同。注意这里四个按钮应用的class是相同的。为什么会这样呢。？

问题分析：

      经过查资料是因为火狐下input button 按钮line-height不起作用而造成的，解决这个问题的方法是用padding值来解决。但牵扯另外一个问题就是这四个按钮在除了火狐以外的其他浏览器的高度都是相同的。那么现在的问题就是只在火狐下使用这个padding值了。

      首先：-moz-padding:5px 10px 6px 10px;这种写法是不正确的，也不起作用。

解决问题的方法：

      用@-moz-document url-prefix() { .selector { property: value; } }这个是只适用于火狐的Css样式。

       @-moz-document url-prefix() { input.btn {padding:5px 10px 6px 10px; } }

转载于:https://www.cnblogs.com/xiaonalove/p/3326651.html