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

标签 css safari webkit osx-mavericks word-spacing

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

例如CSS

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

例如HTML

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

它在所有其他浏览器中的显示方式:/image/IFW3H.png

在 Safari 7.0 中的显示方式:/image/pMsKW.png

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

是否有任何解决方法,无需用标签包装各个单词?

最佳答案

将 h1 设置为 inline-block 可以修复 Safari 中的问题。

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

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

关于Safari 6.1/7.0 中文本居中对齐的 CSS 字间距问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19673337/

相关文章:

css - 提交表单时图像消失

css - 如何在 Bootstrap 中使用 col-sm-6 响应 3 项?

javascript - HighCharts 无法在 Safari 上运行,但在 Firefox 和 Chrome 上运行良好

webkit - 开发网页内容时如何在 WebOS 上为 webkit 实现简单的 javascript 触摸事件

html - Bootstrap-3 Navbar 的透明色

jquery - 如何只显示当前所选选项的图标?

CSS - 进度条不会出现在 Safari 中,也不会在 Firefox 中显示动画

html - Safari 不会将 div 设置为其父级高度的 100%

android - 双指缩放 Google Maps API v3 Android Webkit

css - Webkit Animation 在其下方打破 SVG