Встроенный стиль HTML хорошо в Firefox, не работает в IE - PullRequest
Новая
       4

Встроенный стиль HTML хорошо в Firefox, не работает в IE

1 голос
/ 16 марта 2011

Это интересно. Прикрепленный очень простой код дает хороший текстовый фон в Firefox, но не отображает подсветку в IE7 (и, возможно, в других, еще не протестированных).

Использование таких встроенных элементов важно, потому что я использую их в сетке для выделения важных слов и т. Д.

test.html 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="Test.css" type="text/css" />
</head>
<body>
This is <hlr>a test</hlr> of the <hlr>highlighting</hlr>
</body>
</html>

Test.css 

/*RED Highlighted text.*/
hlr
{
    background-color: #FF5555;
    font-weight: bold;
    font-size:100%;
}

Bizarre! Есть мысли о том, как это исправить?

Ответы [ 3 ]

3 голосов
/ 16 марта 2011

В HTML нет элемента hlr. Internet Explorer не делает элементы, которые он не распознает, доступными для механизма выбора CSS.

Решение состоит в том, чтобы писать HTML, не создавайте свои собственные элементы . Вы, вероятно, должны использовать <em> или <strong> вместо этого, возможно, с классом, чтобы отличать их от других форм акцента.

Вы также можете заставить новые элементы распознаваться механизмом выбора с помощью document.createElement('element_name'), но добавление зависимости JS не является хорошей идеей и не решает проблему, связанную с тем, что ни один браузер не будет знать, какую семантику применить. 1011 *

2 голосов
/ 16 марта 2011

hlr - неверная разметка. Попробуйте вместо этого: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="Test.css" type="text/css" />
</head>
<body>
This is <span class='hlr'>a test</span> of the <span class='hlr'>highlighting</span>
</body>
</html>

тогда: 

/*RED Highlighted text.*/
.hlr
{
    background-color: #FF5555;
    font-weight: bold;
    font-size:100%;
}
0 голосов
/ 16 марта 2011

Вам также необходимо указать приведенный ниже XHTML-тип документа. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...