内联 html 样式在 Firefox 中很好，在 IE 中不起作用答案

【问题标题】：Inline html style fine in Firefox, not working in IE内联 html 样式在 Firefox 中很好，在 IE 中不起作用
【发布时间】：2011-03-16 07:02:29
【问题描述】：

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

奇怪！有什么解决办法吗？

【问题讨论】：

标签： html css internet-explorer firefox stylesheet

【解决方案1】：

HTML 中没有 hlr 元素。 Internet Explorer 不会将它无法识别的元素提供给它的 CSS 选择器引擎。

解决办法是写HTML，不要自己编元素。您可能应该使用 <em> 或 <strong> 代替，可能使用一个类来区分它们与其他形式的强调。

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

【讨论】：

感谢大卫的评论。听起来它会起作用，尽管通过 Jhourlad 提到的类引用/跨度标签引用自定义样式确实像一个魅力。感谢您的回复伙伴。
@conqenator：你伤害了我的感觉。开个玩笑：D

【解决方案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%;
}

【讨论】：

非常感谢伙计，完美地完成了这个把戏！确实是一个奇怪而有趣的效果。非常感谢！
@Glinkot 如果这对你有用，你为什么不接受答案？？
我要去，但它告诉我由于某种原因我不得不再等 4 分钟 :)

【解决方案3】：

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

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

【讨论】：

谢谢。它最终没有成为依赖项，但符合标准始终是一个很好的方案。