l20n: 为什么 IE 无法渲染翻译字符串包含的 HTML 标签?

l20n: Why does IE fail to render HTML tags that translation string contains?

L20n 在我们的 Web 应用程序项目中实现本地化需求时非常有用,并且在 Chrome 和 Firefox 中工作得非常好,almost 让我们在那里Internet Explorer 11.

我们在翻译字符串中使用 HTML(支持),它们的格式如下例所示:

"About <strong> a </strong>"

它在 Chrome 和 Firefox 中运行良好:

Translation result in Chrome

不幸的是,当我切换到 Internet Explorer 11 时,在页面的同一部分看到了这个可爱的景象:

Translation result in IE 11

我们没有做任何奇怪或特别特别的事情,它是非常基本的实现。

问题是 - 是否有人在使用 l20n 时遇到过这个问题?如果是 - 是否可以采取任何措施让 Internet Explorer 在翻译字符串中呈现标签?

由于 Internet Explorer 11 不支持 <template> 元素,以下操作失败:

// https://github.com/l20n/builds/blob/0d58a55afa6ae5aa868b8002fae5ee0e2124e35d/l20n.js#L94
var templateSupported = 'content' in document.createElement('template');

值得注意的是the l20n.js team doesn't consider IE to be supported

在@Sampson 的帮助下(欢呼!)并指出 a) 这是 IE11/Edge 模式而非边缘问题 b) IE11 不支持 HTML5 元素之一,例如模板, 在我即将宣布彻底失败并挖掘 l20n github 页之前,我稍微挖掘了一下:

l20n compatibility

  • 使用 babel polyfill
  • 使用修补的 webcomponents HTMLTemplateElement polyfill(link 在页面
  • 上提供

我添加了 babel 并修改了 polyfill js 文件,在快速部署和神经刷新后,看起来解决方案有效。在我们说话的时候对其进行测试,这样它就不会导致应用程序出现问题,但到目前为止一切看起来都很好。

我知道这是一个解决方法,但我们的 IE 流量足够小,但我无法放弃这些想要使用我目前在爱尔兰语中工作的东西的用户,巧合的是最终会使用 IE11。