具有文本对齐中心的Safari 6.1 / 7.0中的CSS字间距问题

时间:2013-10-30 03:33:13

标签: css safari webkit osx-mavericks word-spacing

当我在Safari 6.1 / 7.0中对齐文本中心并添加文字间距时,它会将文本居中,就像它的宽度不包括中心的空间一样。

E.g。 CSS

div {
    width:300px;
    border: 1px solid #CCC;
}
h1 {
    text-align:center;
    word-spacing: 90px;
}

E.g。 HTML

<div>
    <h1>Text Text</h1>
</div>

它在所有其他浏览器中的显示方式:http://i.imgur.com/JfdM2YG.png

它在Safari 7.0中的显示方式:http://i.imgur.com/OrhLa2Y.png

演示:jsfiddle.net/2rwa3/2 /

如果没有用标签包装单个单词,是否有任何解决方法?

2 个答案:

答案 0 :(得分:1)

将h1设置为内联块可以解决Safari中的问题。

h1 {
    display:inline-block;
    text-align: center;
    word-spacing: 90px;
}

小提琴:http://jsfiddle.net/yPDZd/9/

答案 1 :(得分:1)

作为更新,这被Apple确认为一个错误,并合并到另一个开放的bug中。目前还不确定解决状态。