Проблема с пробелами в CSS в Safari 6.1/7.0 с выравниванием текста по центру

Когда я выравниваю текстовый центр в 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>

Как это отображается во всех других браузерах: http://i.imgur.com/JfdM2YG.png

Как это отображается в Safari 7.0: http://i.imgur.com/OrhLa2Y.png

Демо: jsfiddle.net/2rwa3/2/

Есть ли обходные пути для этого, не оборачивая отдельные слова тегами?

2 ответа

Решение

В качестве обновления это было подтверждено Apple как ошибка и объединено в еще одну открытую ошибку. Не уверен в статусе разрешения на данный момент.

Установка h1 для inline-block устраняет проблему в Safari.

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

Скрипка: http://jsfiddle.net/yPDZd/9/

Другие вопросы по тегам