CSS буквенно-пространственные части слова

Question

Я хочу сделать что-то подобное в HTML:

"T i t l e"

W3C рекомендует использовать свойство CSS letter-spacing вместо вставки пробелов.Итак, я могу сделать следующее: &quot;<span style="letter-spacing: 0.5em;">Title</span>&quot;

, что дает следующий результат:

"T i t l e" (sometimes IE), "T i t l e " (all other browsers)

Альтернатива, используя &quot;<span style="letter-spacing: 0.5em;">Titl</span>e&quot;, приводит к

"T i t le" (sometimes IE), "T i t l e" (all other browsers)

Есть ли какой-нибудь простой и элегантный способ получить желаемый результат во всех распространенных браузерах (IE6-8, FF, Opera, Safari)?Я знаю, что могу использовать что-то вроде <span class="a"><span class="b">Titl</span>e</span> и условных комментариев , которые назначают правильный CSS на основе выбора браузера, но я хочу избежать загромождения моего HTML и CSS с помощью обходных путей, специфичных для браузера.

---

РЕДАКТИРОВАТЬ: О "иногда IE": у меня есть две машины, оба с Windows 7 и IE8 (8.0.7600.16385).Один из них дает результат для левой руки, другой - для правой (для точно того же HTML-файла).К сожалению, IE7 клиента выдает левый результат ...

Answer 1

Рассматривали ли вы добавление margin-right: -0.5em к вашему промежутку.

, например

&quot;<span style="letter-spacing: 0.5em; margin-right:-0.5em">Title</span>&quot;

Протестировано в FF 3.5.7, Opera 10.10, Chrome 3.0.195.38, IE6, IE7 и IE8 и режимах совместимости, вроде как работает. В вашем точном примере это выглядит нормально, хотя было бы неправильно, если бы интервал имел цвет фона, так как он попадал бы во вторую кавычку.

Кроме того, вы должны быть осторожны, чтобы не добавлять CSS в диапазон, который вызвал установку hasLayout в IE6, IE7, так как это могло бы его сломать.

Комментарий:

Это очень любопытное поведение. CSS 2.1 и более ранние версии довольно неопределенны в отношении того, что должно произойти после последнего символа. В нем говорится о интервале между символами, но этого недостаточно, когда интервал рассматривается как часть большой строки текста. Похоже, что Microsoft изначально пришла к другому выводу других производителей браузеров относительно того, что это значит. Затем MS в IE8 решила переключиться и скопировать другие браузеры.

CSS 3, с другой стороны, вполне понятен. Это обеспечивает этот пример:

Например, с учетом разметки

а б CD эф г

и таблица стилей

LS {межбуквенный интервал: 1em; }

Z {межбуквенное расстояние: 0,3em; }

Y {межбуквенный интервал: 0,4em; }

интервал будет

а [0] б [1em] с [0.3em] д [1em] е [0.4em] F [0] * г * тысяча сорок-один

Запишите расстояния после d, f и g. Очевидно, это указывает на поведение IE6, IE7.

Следует отметить, что этот раздел CSS 3 является черновиком, и этот пример был написан задолго до создания IE8. Поэтому, IMO, вполне вероятно, что требования CSS 3 могут в будущем измениться.

Answer 2

Я попробовал ваш код в IE8 и получил "T i t l e". Возможно, вам следует попробовать разные типы документов, чтобы увидеть, будет ли браузер реагировать на них и адаптировать их поведение CSS.

Answer 3

Вы пробовали использовать px вместо ems? IE иногда делает забавные вещи с ems - попробуйте следующее:

Название