English
资源说明：之前只有ie6、ie6、firefox时,只要写!important就能够零丁给firefox做hack了，偏生firefox有个致命的bug就是不撑持input的line-height属性，下面为大家介绍下Firefox专属hack的写法感兴趣的朋友可以参考下
在网页开发过程中，由于不同浏览器对CSS样式的支持程度和解析方式存在差异，有时需要针对特定浏览器进行所谓的“hack”来确保样式在各个浏览器中表现一致。本文主要关注的是Firefox浏览器的专属hack，解决Firefox中的一些特定问题，尤其是针对Firefox不支持`input`元素的`line-height`属性这一bug。
我们需要理解`line-height`属性的重要性。`line-height`用于设置文本行的高度，它可以帮助调整文本在元素内的垂直对齐，特别是在按钮、输入框等元素内使文本垂直居中。然而，Firefox浏览器对`input`元素的`line-height`属性支持不佳，导致无法通过此属性来控制输入框内文本的垂直位置。
在早期，开发者通常使用`!important`来为Firefox单独设定样式，但随着IE8、Opera、Chrome等现代浏览器的出现，这种方法已经不再适用，因为这些浏览器同样理解`!important`规则。因此，我们需要寻找一种只被Firefox识别的CSS语法来进行hack。
Firefox的专属hack主要是利用`@-moz-document url-prefix()`规则。这是一个Firefox特有的CSS文档前缀指令，它可以包含一组CSS声明，这些声明只在Firefox浏览器中生效。例如，如果一个按钮的原始CSS样式如下：
```css
.defaultmallsearchbt {
width: 70px;
height: 22px;
line-height: 22px; /* 这在Firefox中无效 */
padding-left: 16px;
color: #fff;
border: none;
background: url(../images/defaultmallsearchbt.gif) no-repeat;
cursor: pointer;
}
```
在Firefox中，由于`line-height`不起作用，我们可以使用`@-moz-document url-prefix()`来修复文本垂直居中的问题：
```css
@-moz-document url-prefix() {
.defaultmallsearchbt {
padding: 0 0 4px 16px; /* 使用padding代替line-height来实现垂直居中 */
}
}
```
此外，对于具有类似问题的输入框`input2`，也可以用相同的方法处理：
```css
.input2 {
width: 30px;
height: 21px;
padding-top: 4px;
border: 1px solid #d5d5d5;
position: relative;
*top: 4px; /* IE7及以下的hack */
}
@-moz-document url-prefix() {
.input2 {
top: 2px; /* 调整Firefox中的垂直位置 */
}
}
```
需要注意的是，`*top: 4px;`是一种针对IE7及以下版本的hack，使用星号(*)前缀的属性只有IE7及更低版本会识别，而在其他浏览器中将被忽略。
通过这种Firefox专属的hack方法，我们可以有效地解决浏览器兼容性问题，确保样式在Firefox中正常显示。不过，随着浏览器的不断更新和CSS标准的完善，这类hack的使用应越来越少，尽可能采用跨浏览器的CSS3属性和适配技术来实现兼容性。在实际开发中，推荐使用预处理器（如Sass或Less）以及自动化工具（如Autoprefixer），它们能帮助我们更优雅地处理浏览器的兼容性问题。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
