中文按钮完美显示方案

omiga — Sat, 20 Dec 2008 06:17:30 +0000

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

代码：

在各浏览器中的表现：

可以明显观察到在默认样式下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

line-height and relative

omiga — Thu, 06 Mar 2008 16:25:21 +0000

且先在FF和IE中查看页面显示差异～···Demo

很多时候需要在一个容器的右边添加一个“more”，我不喜欢浮动，惯用的做法是使用绝对定位。那么为其父层设置position:relative，同时为了保证文本垂直居中对齐，并为之添加line-height属性。有时候line-height是可以当height用的，因为line-height也可以撑开高度。但是这种做法会在IE中产生问题～···Y？不知道～···解决办法依然是触发对象的layout属性～···

omiga » line-height

中文按钮完美显示方案

line-height and relative