Question

这很有趣。附带的非常简单的代码在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%;
}

奇妙！有关如何补救的任何想法？

Answer 1

HTML中没有hlr元素。 Internet Explorer不会创建它无法识别的CSS选择器引擎可用的元素。

解决方案是编写HTML，不要构成自己的元素。您应该使用<em>或<strong>代替，可能使用类来区分它们与其他形式的重点。

您还可以强制选择器引擎使用document.createElement('element_name')识别新元素，但添加JS依赖性不是一个好主意，并且不能解决没有浏览器知道要应用什么语义的问题

Answer 2

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%;
}

Answer 3

您还需要指定以下XHTML文档类型..

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

在Firefox中内联html样式很好，不在IE中工作

3 个答案: