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

HTML标准未定义<text>元素。可缩放矢量图形（SVG）defines one，但您并未在SVG元素的上下文中使用它。让我们来看看为什么它在Chrome中运行，但不是Internet Explorer 8，以及我们如何（如果我们想）可以修复＆＃34;它

首先，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。

我希望这会有所帮助。

Answer 2

text 标记没有定义标准。要添加段落，请使用 p 标记。我确实检查了IE 8中的标签，因为看起来标签是直接关闭的，没有文本。所以你只需要使用像 p

这样的允许标签

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

这是小提琴：http://jsfiddle.net/bd5Lrkjn/embedded/result/

在Internet Explorer 8中设置文本元素的样式

2 个答案: