Angular JS：具有绑定值的内联样式适用于 mac 而不是 windows

Question

我用 ng-repeat 构建了一个 table，显示项目的类型规范，列为 "swatches":

如您所见，在 Mac Safari 和 Chrome 上运行良好。但是，在 IE 11/Win 8 上：

table行是这样的：

<tbody>
      <tr ng-repeat="item in type.header">
        <td class="{{item.extraclass}}">{{item.tag}} &ndash; {{item.font}}</td>
        <td>{{item.use}}</td>
        <td>
          {{item.tag}}{{item.class}}
          <span class="swatch" style="background-color:{{item.color}};color: #fff">{{item.color}}</span>,
          {{item.tag}}{{item.altclass}}
          <span class="swatch" style="background-color:{{item.altcolor}};color: #fff">{{item.altcolor}}</span>,
          {{item.tag}}.ko
          <span class="swatch" style="background-color:#fff; color:#2e2e2e">#FFFFFF</span>
        </td>
      </tr>
    </tbody>

出于某种原因，IE 似乎不喜欢内联样式标签。

在 Safari 浏览器中检查代码看起来符合预期。您可以看到带有背景颜色和颜色的样式标签：

但是在IE11中检查，全乱了。只有一种颜色，它是白色和 rgb：

那么，为什么这适用于 Mac 而不是 IE？我对我的语法做了一些假设，但我已经尝试了一些东西，但到目前为止没有结果。

Answer 1

使用ng-class代替class

<td ng-class="item.extraclass">{{item.tag}} &ndash; {{item.font}}</td>

Answer 2

您需要使用ng-style:

<span ng-style="{'background-color':item.color, 'color': '#fff'}">

Angular JS：具有绑定值的内联样式适用于 mac 而不是 windows

Angular JS: inline style with bound value works on mac not windows

html

javascript

css

angularjs

ng-style