CSS word-spacing issue in Safari 6.1/7.0 with text-align center

懵懂的女人 提交于 2020-01-14 18:58:17

问题


When I align text center in Safari 6.1/7.0 and add word-spacing, it centers the text as if its width did not include the space in the center.

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>

How it displays in all other browsers: http://i.imgur.com/JfdM2YG.png

How it displays in Safari 7.0: http://i.imgur.com/OrhLa2Y.png

A demo: jsfiddle.net/2rwa3/2/

Are there any workarounds for this without wrapping the individual words with tags?


回答1:


Setting the h1 to inline-block fixes the issue in Safari.

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

Fiddle: http://jsfiddle.net/yPDZd/9/




回答2:


As an update, this was confirmed as a bug by Apple and merged into another open bug. Not sure on the resolution status at this time.



来源:https://stackoverflow.com/questions/19673337/css-word-spacing-issue-in-safari-6-1-7-0-with-text-align-center

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!