div 中的文本在 safari 8.2 中显示，chrome 39 中显示，但在 firefox 34 中不显示。为什么？

Question

我的 HTML 文档正文中有一个 div 标签，如下所示：

    <div id="content_text"></div>

div的内容后来通过javascript这样设置

    var content_text = document.getElementById("content_text")
    content_text.innerText = content

其中内容是一个字符串。

此外，div 的样式如下：

        #content_text 
        {
            font-size: 30px;
            font-family: alexandria_n;
            position: absolute;
            top: 280px;
            left: 100px;
            z-index: 1;
            overflow-y: scroll;
        }

字体 'alexandria_n' 从本地文件夹加载，@font-face 在样式表的前面

        @font-face
        {
            font-family: alexandria_n;
            src: url("resources/alexandria_n.ttf");
        }

所以问题是，这在 Safari 中显示 'content' 字符串文本，在所有正确样式中显示 Chrome，但在 Firefox 中不显示任何文本。在 Firefox 中打开页面时 div 没有任何痕迹。

我在 Firefox 中加载页面时打开浏览器控制台，出现以下错误：

downloadable font: kern: Kerning pairs are not sorted., table discarded (font-family: "alexandria_n" style:normal weight:normal stretch:normal src index:0) source: file:///.../resources/alexandria_n.ttf

然而，即使将 div 样式更改为此（将 alexandria_n 替换为 Arial），div 文本仍然不会在 Firefox 中显示：

        #content_text 
        {
            font-size: 30px;
            font-family: Arial;
            position: absolute;
            top: 280px;
            left: 100px;
            z-index: 1;
            overflow-y: scroll;
        }

我对 CSS/HTML 的细微差别了解不够，无法找到调试它的好方法。任何帮助将非常感激！ :)

Answer 1

innerText 不是标准化的属性，它是由 IE 引入并被许多浏览器复制但不是 Firefox。 W3C 等效项是 textContent，但 IE 直到第 9 版或之后才支持它。

您可以这样做：

function setText(element, text) {

  if (typeof element.textContent == 'string') {
    element.textContent = text;

  } else if (typeof element.innerText == 'string') {
    element.innerText = text;

  } else {
    element.innerHTML = '';
    element.appendChild(document.createTextNode(text));
  }
}

然后：

setText(content_text, content);

Answer 2

FireFox 似乎有一个 different method

您可以重写一个函数来执行此操作：

function innerPlain(element) {
  return element.innerText || element.textContent;
}

JSFiddle

div 中的文本在 safari 8.2 中显示，chrome 39 中显示，但在 firefox 34 中不显示。为什么？

text in div displays in safari 8.2, chrome 39, but not in firefox 34. Why?

javascript

html

css

firefox