Firefox下的text-indent
前天在给豆豆调试东西的时候碰到的一个问题。在之前的一篇日志–“同一行中的左右两侧文字该怎么定位”里，我提到过一种方法，现在再来回顾下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
h2 { background:#FFECC8; font-size:12px;}
h2 span { float:right;}
</style>
</head>
<body>
<h2><span>我在右边</span> 我在左边</h2>
</body>
</html>
这样子可以实现如下图所示的效果：
这时，我们给 h2 添加一个 CSS 属性：text-indent，看看会发生什么情况：
h2 { background:#FFECC8; font-size:12px; text-indent:2em;}
首先看下 IE 7 下的显示：
我们再来看下 Firefox 3.0.2 下的显示：
为什么在 Firefox 下没有表现出来我们定义的属性呢？用 Firebug 看一下，发现不是没有表现，而是作用在了 span 上边，如下图所示：
另外在 IE 6、IE 8 Beta2、Opera 9.52、Safari 3.1.1、Google Chrome 0.2 下的测试结果与 IE 7 相同，你可以用不同的浏览器打开这个页面测试。到底是哪个表现比较正确呢？
如果真的需要使用 text-indent 的话不妨使用 padding-left 代替，以兼容 Firefox。
标签： Firefox, text-indent
这篇文章发布于 2008年09月26日，星期五，08:19，归类于 CSS。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。
