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

Question

.title {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 800;
    color: #1e1e1e;
    font-size: 24pt;
}

https://jsfiddle.net/pa3ztdwt/

上面的 fiddle 在 Google Chrome 中工作正常，但在 Internet Explorer 8 中不起作用。似乎 font-weight 属性是无法在 Internet Explorer 8 中正确呈现。

我们对此有什么解决方案吗？

Answer 1

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

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

这是 fiddle：http://jsfiddle.net/bd5Lrkjn/embedded/result/

Answer 2

HTML 标准没有定义 <text> 元素。可缩放矢量图形 (SVG) defines one，但您并未在 SVG 元素的上下文中使用它。让我们看看为什么这在 Chrome 中有效，但在 Internet Explorer 8 中无效，以及（如果我们愿意）我们如何 "fix" 它。

首先，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> 和 [=17] 等现代元素的方式大致相同=].这些有效元素与 <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. If you would instead like to target a few sentences or words, consider using Text-level semantics。

希望对您有所帮助。

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

Styling Text Elements in Internet Explorer 8

css

internet-explorer

internet-explorer-8