Question

我想在HTML中做这样的事情：

"T i t l e"

The W3C recommends使用CSS属性letter-spacing而不是插入空格。所以，我可以执行以下操作："Title"

得出以下结果：

"T i t l e" (sometimes IE), "T i t l e " (all other browsers)

使用"Title"的替代方案会产生

"T i t le" (sometimes IE), "T i t l e" (all other browsers)

是否有一些 easy 和优雅方式可以在所有常见浏览器（IE6-8，FF，Opera，Safari）中获得所需的结果？我知道我可以使用类似Title和conditional comments的内容，根据浏览器选择分配正确的CSS，但我希望避免使用浏览器特定的解决方法来混淆我的HTML和CSS。

编辑：关于“有时IE”：我有两台机器，都有Windows 7和IE8（8.0.7600.16385）。其中一个给出了左手结果，其中一个是右手结果（对于完全相同的HTML文件）。不幸的是，客户的IE7产生了左手的结果......

Answer 1

您是否考虑过将margin-right：-0.5em添加到您的范围内。

e.g。

&quot;<span style="letter-spacing: 0.5em; margin-right:-0.5em">Title</span>&quot;

在FF 3.5.7，Opera 10.10，Chrome 3.0.195.38，IE6，IE7和IE8标准版和兼容模式中进行了测试，它有点工作。在您的确切示例中，它似乎没问题，但如果跨度具有背景颜色则不正确，因为它会泄漏到第二个引号上。

另外，你需要注意不要在IE6中设置hasLayout的范围中添加任何CSS，IE7要设置，因为这会破坏它。

评论：

这是一种非常奇怪的行为。 CSS 2.1及更早版本对于在最后一个角色之后应该发生的事情非常模糊。它讨论了字符之间的间距，但是当跨度被视为更大的文本字符串的一部分时，这是不够的。似乎微软最初对其他浏览器制造商的结论与其意味着什么不同。然后MS在IE8中选择切换并复制其他浏览器。

另一方面，CSS 3非常清楚。它提供了这个例子：


例如，给定标记

＆LT; P＆gt;一种与LT; LS＆GT; b将; Z＆GT; CD＆LT; / Z＆GT;＆LT; Y＆GT; EF＆LT; / Y＆GT;＆LT; / LS＆GT;克LT; / P＆GT;

和样式表

LS {letter-spacing：1em; }

Z {字母间距：0.3em; }

Y {letter-spacing：0.4em; }

间距为

一个[0] B [1EM] C [0.3em] d [1EM] E [0.4em] F [0]克

注意d，f和g之后的距离。这显然似乎是指定IE6，IE7的行为。

应该注意的是，CSS 3的那一部分是草稿，并且该示例是在IE8创建之前很久就编写的。因此，IMO可能会在未来很好地改变CSS 3的要求。

Answer 2

我在IE8中尝试了你的代码，得到了“T i t l e”。也许你应该尝试不同的doctypes来看看浏览器是否会响应这些并调整他们的CSS行为。

Answer 3

您是否尝试过使用px代替ems？ IE有时会使用ems做有趣的事情 - 请尝试以下方法：

＆lt; span style =“letter-spacing： 10px的;“＆GT;标题＆LT; /跨度＆GT;

CSS字母间距的一个单词

3 个答案: