Стайлинг Текстовые элементы в Internet Explorer 8

Question

.title { 
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
    font-weight: 800; 
    color: #1e1e1e; 
    font-size: 24pt; 
} 

https://jsfiddle.net/pa3ztdwt/

выше скрипку отлично работает в Google Chrome, но не работает в Internet Explorer 8. Представляется, что font-weight свойство не отображается правильно в Internet Explorer 8 .

У нас есть решение для этого?

Answer 1

текст тег не определен стандарт. Чтобы добавить абзац, используйте тег p. Я проверил тег в IE 8, и, как кажется, тег напрямую закрыт без текста внутри. Так что вам просто нужно использовать разрешенную тег как р

<p class='boldText title'> 
    sometitle 
</p> 

Вот скрипка: http://jsfiddle.net/bd5Lrkjn/embedded/result/

Answer 2

HTML-стандарт не определяет <text> элемента. Масштабируемая векторная графика (SVG) defines one, но вы не используете ее в контексте элемента SVG. Давайте посмотрим, почему это работает в Chrome, но не в Internet Explorer 8, и как (если бы мы этого хотели) мы могли бы «исправить» его.

Во-первых, ни Chrome, ни Internet Explorer 8 не считают это известным элементом. В Chrome можно создать экземпляр, и проверить его конструктор:

document.createElement("text").constructor; // function HTMLUnknownElement() 

Хотя Chrome не распознает это как известный элемент, это позволяет стиль, несмотря на тот факт. Internet Explorer 8 рассматривает общий <text> элемент (без SVG контекста) аналогичным образом:

console.log(document.createElement("text")); // LOG: [object HTMLGenericElement] 

Internet Explorer обрабатывает это как общего элемента, много так же, как он рассматривает современные элементы, такие как <section>, <article>, и <canvas>. Эти действительны элементов, перенесенных таким же образом <text> делает это в том, что они были сложны для стиля в более старых версиях Internet Explorer.

Одна интересная вещь, которую мы узнали в попытке доставить - анахронически - современный поддержки устаревших браузеров, в том, что если вы создаете элемент с JavaScript, укладка волшебно начинает работать:

<script>document.createElement("text");</script> 
<text>This element can now be styled in Internet Explorer 8.</text> 
<text>This element can also be styled, because of the effect line 1 has.</text> 

Хотя все это интересно, и интересно учиться, вы должны избежать избежать этого. В то время как нормально использовать пользовательские элементы, вы должны избегать создания двусмысленности. Как упоминалось ранее, элемент <text> принадлежит SVG и должен быть зарезервирован для этих контекстов.

Если вы хотите настроить таргетинг на целый блок текста или группу элементов, используйте Grouping Elements. Если вам хотелось бы использовать несколько предложений или слов, подумайте об использовании Text-level semantics.

Я надеюсь, что это было полезно.