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;
}

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

本文案例出自The Firefox Input Button Line-Height Bug

后记

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

Oprea的怪异识别码

bolo — Tue, 17 Nov 2009 06:00:16 +0000

我打算重新设计一个博客引导页，在里面设计一个小彩蛋。通过PHP识别访客所用的浏览器，并输出不同的欢迎语。省时起见，在网上搜索了一段代码：

if(strpos($_SERVER["HTTP_USER_AGENT"],"MSIE 8.0"))
echo "MSIE 8";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"MSIE 7.0"))
echo "MSIE 7";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"MSIE 6.0"))
echo "MSIE 6";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"Firefox/3"))
echo "Firefox 3";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"Firefox/2"))
echo "Firefox 2";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"Chrome"))
echo "Google Chrome";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"Safari"))
echo "Safari";
else if(strpos($_SERVER["HTTP_USER_AGENT"],"Opera"))
echo "Opera";
else echo $_SERVER["HTTP_USER_AGENT"];

这段代码的意思是根据浏览器识别码来控制输出的内容，在IE、Firefox，甚至Oprea9里都测试正常，可是用Opera10测试时却返回了Opera/9.80 (Windows NT 5.1; U; zh-cn) Presto/2.2.15 Version/10.00也就是浏览器的原始识别码(其实这段代码可以在Opera地址栏里输入“opera:about”看到)。换句话说，上面那段程序不能正确检测出Opera10。
Opera10有个很奇怪的地方，大家留意一下返回的代码，会发现Opera是9.80，但Version却是10.00。
这里面有个小故事：

Opera 的工程师在测试中发现，Opera 10 Alpha 在很多老网站上的运作很不正常。原来，有很多网站使用了“浏览器嗅探”技术，也就是说网站会针对不同的浏览器提供不同的内容或功能。然而不幸的是，这些网站无法识别两位数的浏览器版本号，于是 Opera 就成了首当其冲的受害者——它们把 Opera 10.0 误认为是 Opera 1.0，并因此向 Opera 10 提供不完整的功能，甚至有些网站干脆拒绝 Opera 10 的访问。
这当然是 Opera 不愿意看到的。于是，Opera 的工程师们决定，将用户代理信息中的版本号定格在 9.8，并另外启用 Version 字段来标识真正的版本号。当然他们也考虑过选用 9.99 这个最接近 10 的可用作版本号的数字，不过出于预留空间的考虑，最终还是决定采用 9.8 作为象征性的版本号——它正好介于（Opera 9 的最后一个版本号）9.6 与 10 之间。

于是我开始修改程序，却发现用Opera/9.80也无法识别出Opera10.
经过几次修改和测试，我最后采用了以下方法识别Opera10。

1 2	else if(strpos($_SERVER["HTTP_USER_AGENT"],"Version/10.00")) echo "Opera 10";

可是这个方法有一个极大的弊端，就是Opera10升级到10.XX就不能使用了。谁能告诉我在PHP里，应该怎么识别Opera10呢？

Bolo的博客 » Opera

Firefox Input Button Line-Height Bug

是什么原因引起了这个问题？

后记

Oprea的怪异识别码