Проблема с пробелами в 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/