自定义标签在 ie8 中不起作用答案

【问题标题】：custom tags not working in ie8自定义标签在 ie8 中不起作用
【发布时间】：2011-07-28 06:13:17
【问题描述】：

我尝试制作自定义标签，以便用户可以输入在呈现为 HTML 时显示红色或粗体等内容的文本，例如，

<rb>text here becomes red and bold</rb> and goes to default here

这会在带有“note”类的 div 中呈现，并且我设置了以下 css

.note rb
{
    color:Red;
    font-weight:bold;
}

它可以在 ie9、chrome、firefox 中运行，但在 ie8 中不可用。我怎样才能让它在那里工作？

【问题讨论】：

标签： css ie8-compatibility-mode

【解决方案1】：

如果你不介意一点 javascript：

<!--[if lt IE 9]>
<script>
document.createElement("rb");
</script>
<![endif]-->

如果您想添加多个元素/标签，您可以：

<!--[if lt IE 9]>
<script>
// bold, italic, underlined, striked
els = ['rb', 'ri', 'ru', 'rs'];
for(i = 0; i < els.length; i++) {
    document.createElement(els[i]);
    }
</script>
<![endif]-->

更新

看起来定义自定义元素的能力正在开发中 (W3C Working Draft 6 June 2013)

一些使用这个的项目：

另见：

Introducing Brick: Minimal-markup Web Components for Faster App Development（2013 年 8 月 27 日）
Custom Elements: defining new elements in HTML（2013 年 8 月 28 日）
Custom Elements: a web components gallery for modern web apps

【讨论】：

这是对上述问题的“正确”答案，尽管我恭敬地建议您的方法本身（出于文体目的使用自定义标签）相当可怕。（请注意，您需要在文档头部的某处添加此代码才能使其正常工作。）
请记住，这不是有效的 HTML5。如果您希望您的页面进行验证（大多数开发人员应该这样做），那么您不能创建自己的自定义标签。 stackoverflow.com/questions/9845011/…
@JeremyMoritz 对该答案的评论说这是（或将是）现在正确的 HTML5。
@tomdemuyt 经过数小时的搜索，我还没有看到可靠的消息来源表明可以在遵循当前 HTML5 规范的同时制作自定义 html 元素。开发人员有很多假设，但规范似乎是一致且清晰的 (w3.org/TR/html5/sections.html#the-body-element)，并且 w3c 验证器总是在自定义元素上抛出错误。如果将来发生变化，那很好，但我很确定一切都没有改变，因此建议开发人员遵循当前标准
是的，是的，使用自定义标签是“可怕的”。但这就是如今使用 Angular 等框架的情况。人。了解这些情况非常有用 - 事实上，这基本上是 Angular 文档 (docs.angularjs.org/guide/ie) 中建议的技术

【解决方案2】：

为了取悦高级浏览器（IE8 和更早版本），我会选择类似的东西：

HTML：

<span class="RB">text here becomes red and bold</span> and goes to default here

CSS：

.RB {color:Red; font-weight:bold; }

这针对所有RB 类。所以你只需要把所有东西都包在里面

<span class="RB"></span>

【讨论】：

我有多个这些标签。所以仅仅设置跨度 css 是行不通的。