Firefox专属hack的写法介绍

在浏览器的前世今生中，从IE6、IE7到Firefox的时代，我们曾通过简单的“!important”给Firefox浏览器施展小技巧。随着浏览器世界的繁荣发展，诸如IE8、Opera和Chrome等现代标准浏览器逐渐崛起，它们也开始熟悉并接纳Firefox的许多工具。尽管如此，Firefox却有一个致命的短板：不支持input元素的line-height属性。面对这个问题，我开始陷入沉思，究竟该如何解决呢？

网络之旅开启，经过一番广泛搜索，终于发现了一个妙招。那就是使用@-moz-document url-prefix()，这是一个专门为Firefox定制的魔法语句。它的作用范围仅限于Firefox浏览器，允许我们针对该浏览器定制特定的CSS规则。就像给Firefox穿上了定制的衣服。举个例子来说吧，原本一个按钮的CSS样式是这样的：

```css

.defaultmallsearchbt {

width: 70px;

height: 22px;

line-height: 22px;

padding-left: 16px;

color: fff;

border: none;

background: url(../images/defaultmallsearchbt.gif) no-repeat;

cursor: pointer;

}

```

但在Firefox浏览器中，文字无法垂直居中对齐。这时我们就可以使用@-moz-document url-prefix()，添加如下CSS代码：

```css

@-moz-document url-prefix() {

.defaultmallsearchbt {

padding: 0 0 4px 16px; / 针对Firefox调整padding实现垂直居中 /

}

}

```疑难问题解决，一切都好了！这个技巧不仅解决了Firefox下的对齐问题，还让我们的CSS代码更具浏览器兼容性。另一个例子是关于input元素的CSS样式：

```css

put2 {

width: 30px;

height: 21px;

padding-top: 4px;

border: 1px solid d5d5d5;

position: relative; / 使用相对定位调整元素位置 /

top: 4px; / 针对IE浏览器的特定样式 /

}

```对于Firefox浏览器，我们可以使用@-moz-document url-prefix()再次施展魔法：

```css

@-moz-document url-prefix() {

put2 { / 针对Firefox调整位置 /

top: 2px; / 只对Firefox生效 /

}

}经过这些精细的调整和优化，我们的网页在不同的浏览器中都能展现出完美的效果。这不仅是技术的胜利，更是用户体验的胜利。现在我们可以安心地欣赏我们的作品了。