中文按钮完美显示方案

2008-12-20 14:17:30

先看这段代码在不同浏览器中的表现。

代码：

<input type="submit" value="提交" /> <input type="submit" value="按钮左右左右内边距会随文本自动增加" /> <input type="reset" value="重置" />

在各浏览器中的表现：

可以明显观察到在默认样式下IE6/7中文按钮显示主要存在两个问题：

那么一个按钮正常的默认样式是怎么样的？我们可以通过Firebug观察button的“盒模型”，如下图：

Firefox中按钮默认有2px的边框，6px的左右内边距。

注意：以上测试都是在windows经典主题下完成，而不同主题下的按钮的样式是有所差别的。比如我最初使用的MCE 2005主题下按钮的边框宽度为3px。

在上面的测试中似乎IE8 beta2已经比较完美了，其实不然。我们对按钮的高度做一些改变，你就会发现IE8还没有想象中的完美，如下图：

可以看到，事实上IE8(b2)中，按钮中的文本（包括英文文本）是固定在距按钮上边框4px的位置，看起来情况比IE6/7还要糟糕！当然IE8(b2)已经解决了左右内边距随文本变化的问题，而且IE8也还是beta版本，希望能在正式版中修复这些问题。

而对于IE6/7（更低版本没测试）中按钮文本与左右边框的间距随文本长度变化的问题就不仅限于中文文本的按钮，所以似乎早在05年就有人提出了解决办法：http://jehiah.cz/archive/button-width-in-ie

具体方法即是重置padding：

.button{
    overflow:visible; /* for ie6/7 */
    padding:0 6px;
}

该方法存在一个明显的缺点：IE6/8中按钮的高度会增加1px。

（更新说明：经过进一步测试发现IE6/7中文本与左右边框的间距并不是附加在按钮上的左右内边距，而是附加在文本上的某种边距。个人认为overflow:visible;在此正是用于清除该边距。）

而对于中文文本无法正确居中对齐的问题，在我和TZ讨论一天后似乎也没找到一个比较满意的解决方案。暂时只能通过line-height来解决，而且还得使用hack来解决重置padding后增加的1px高度问题。

line-height的具体取值就去这里看看吧：http://fedcn.org/?p=3

omiga