字母间距和文字对齐:中心之间的冲突？

Question

使用letter-spacing似乎真的搞砸了text-align:http://jsfiddle.net/NFAzv/

谷歌搜索没有任何进展.我在这里错过了什么吗？

编辑#1:这就是我得到的内容(Vista上的Firefox 3.6.8和Chrome 12.0.742.91):由于新手的链接限制而删除链接(可以在评论中找到)(注意中心如何排队)在所有)

编辑#2:这是IE9,中心垂直线显示错误:http://i.stack.imgur.com/C0J0n.png

编辑#3:我在下面的评论中得到确认,问题出现在Windows 7上的Chrome 10.至少我不是唯一一个疯狂的人.

Answer 1

似乎所有的浏览器都集中在一个字母间距的实现上,这显然与css3所说的应该发生的事情不一致.

特别参见http://dev.w3.org/csswg/css3-text/#letter-spacing0上的示例XV

浏览器根本就不这样做.IE甚至最近改变了它的行为(IE9,我认为)更像其他浏览器,而不像目前编写的CSS3规范.

有问题的CSS3规范仍然处于工作草案状态,因此可能在某些时候它将被更改以匹配浏览器的功能.

您可以通过添加填充左侧值来匹配字母间距来重新平衡线条,但这可能并不总是可行.

Answer 2

由于问题没有真正描述,我认为文本没有完全居中.

您可以使用text-indent字母间距的一半大小来纠正这个问题.

.centered {
  letter-spacing:12px;
  text-indent:6px;
}

仅在Chrome OSX上测试过..

Answer 3

它似乎工作,但你对这个像素完美度的要求不符合默认的工作letter-spacing.如果您突出显示文本,您会看到它确实居中.

您可以使用以下解决方法:演示小提琴

<div style="text-align: center;">           
  <div style="font-size: 130%; letter-spacing: 0.6em; padding-left: 0.6em;">THIS</div>
  <div style="font-size: 350%; letter-spacing: 0.4em; padding-left: 0.4em;">ILLUSTRATES</div>            
  <div style="font-size: 130%; letter-spacing: 0.4em; padding-left: 0.4em;">THE</div>
  <div style="font-size: 200%; letter-spacing: 0.1em; padding-left: 0.1em;">PROBLEM</div>           
</div>

Answer 4

我已经看到链接下划线的类似问题：最后一个字母的宽度包括字母间距值。所以申请letter-spacing:0;最后一个字母应该可以解决问题。这很丑，但它有效

...
<div style="font-size: 350%; letter-spacing: 0.4em;">
    ILLUSTRATE<span style="letter-spacing:0;">S</span>
</div>
...