Firefox Input Button Line-Height Bug

bolo — Mon, 01 Mar 2010 07:33:56 +0000

最近国外有开发者发现Firefox和Opera的一个BUG：无法改变按钮里文字的行高（包括input type=”sumbit”和HTML的button标签）。举个例子，对一个按钮使用以下样式：

input#button {
	border: 2px solid #06f;
	color: #06f;
	background-color: #6cf;
	font: bold 12px Arial, Helvetica, sans-serif;
	line-height: 50px;
}

按照常理，这个样式将为按钮设置50px的行高，并使文本垂直居中。因为这个样式在Chrome、Safari和IE8里的表现都一致，唯独在Firefox和Opera里并没有表现出50px的行高，具体效果如下图。

在Firebug的帮助下，该开发人员发现虽然自己已经把行高设为50px，但Firefox依然使用15px的行高。

该开发人员认为是Firefox强行限制了按钮文本的行高，于是编写了以下的CSS用于验证。

1
2
3

ibutton, input[type="reset"], input[type="button"], input[type="submit"] {
	line-height:normal !important;
}

该开发人员发现，Firefox会私自把按钮内文本的行高设置为normal，这个值在Firefox里默认为15px，但各个浏览器对normal的值并没有一个统一的标准。最后这个开发人员放弃了通过行高把按钮撑开并使文本居中的方法，而采用了以下的样式，解决了Firefox的按钮行高问题。

input#button {
	border: 2px solid #06f;
	color: #06f;
	background-color: #6cf;
	font: bold 12px Arial, Helvetica, sans-serif;
	padding: 18px 6px;
}

这并不是最好的办法，但也算是达到了所需的效果。

我认为这个开发人员似乎并没有考虑到令一个CSS属性，而是抱着“完成了就好”的心态去解决问题。你认为这个所谓的BUG有更好的办法解决吗？欢迎讨论一下。

我喜爱的Firefox浏览器插件

bolo — Sun, 20 Sep 2009 13:06:09 +0000

我喜爱的Firefox插件

大名鼎鼎的Firefox(火狐)浏览器以快速的浏览速度和大量的插件而深受广大Web Designer的喜爱.下面我将介绍一下我喜欢的几个Firefox插件,并进行简单的功能描述和评分(满分为5★,1★=2☆).

Firebug通常被用来查看网页的框架结构,从而找出网页中可能存在的BUG.是不可多得的利器,也是众多Developer们的必装插件.
实用指数:★★★★☆

YSlow是yahoo美国开发的一个页面评分插件，非常的棒，从中我们可以看出我们页面上的很多不足，并且可以知道我们改怎么去改进和优化。对优化页面效率有很大帮助.
实用指数:★★★★

Web Developer不但可以验证当前网页是否符合W3C的相关标准,还可以控制是否使用缓存,是否允许执行JavaScript,是否允许读写Cookies等,还能方便地查看页面里相关标签的内容.是十分强大的一款页面分析工具.
实用指数:★★★★☆

Html Validator是一款快速的页面错误提示工具,可以检测出页面是否有语法错误.
实用指数:★★

MeasureIt是一款标尺插件,可以方便地量出页面上某个元素的尺寸,是CSSer们的好帮手.
实用指数:★★