在IE中使用<table>或<select>中的dom-repeat中断

Question

当与聚合物表和选择下拉菜单中工作,我发现我可以使用DOM重复模板的内<table>/ <select>打印出值的数组的标签.除了当然Internet Explorer之外,这对所有浏览器都完美无缺.

例:

<select>
  <template is="dom-repeat" items="{{listOfItems}}" as="item">
    <option value="{{item.value}}">{{item.name}}</option>
  </template>
</select>

直接来自聚合物元素目录的另一个例子:

<table id="element-table">
  ...
  <tbody>
    <template is="dom-repeat" items="[[elements]]">
      <tr on-tap="nav" target$="[[item.name]]">
        <td class="name" width="100">[[item.name]]</td>
        <td class="description relative">[[item.description]]</td>
        <td class="tags">
          <template is="dom-repeat" items="[[item.tags]]">
            <tag-link name="[[item]]" on-tap="tagTapped"></tag-link><span>,</span>
          </template>
        </td>
        <td class="actions">
          <element-action-menu element="[[item.name]]" icons-only=""></element-action-menu>
        </td>
      </tr>
    </template>
  </tbody>
</table>

这是不是现在Internet Explorer中不支持(我在Polymer网站上注意到他们不允许IE浏览器访问表页面)或有没有办法做到这一点？

Answer 1

IE浏览器不具备原生支持<template>标签,并有额外的怪癖,它怪异的东西非<tr>,<thead>或<tbody>在表内标签和非<option>内选择标签.

基本上当前的状态是dom-repeat在模板中放置一个或类似的东西只会炸毁IE中的解析器,并且可能实际上泄漏并破坏应用程序的其他部分而不仅仅是表呈现.

Polymer团队肯定知道这个问题但是(截至2016-04-01)没有正式的解决方法.

您可以尝试使用CSS伪造表格display: table.这是一个丑陋的黑客,但IE没有提供太多的选择.