Question

我的目标是绘制条形图，Google Chrome上的所有内容都很正常，但在Mozilla Firefox（v 46.0.1）上，td元素内的div标签根本不显示背景颜色。这是一个实例：https://jsfiddle.net/zck5mw7m/ 绿色栏不会出现在Mozilla Firefox中，但会出现在Google Chrome中

table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  border-bottom: 1px solid #aaa;
  position: absolute;
  z-index: 2;
}

td {
  vertical-align: bottom;
  position: relative;
  margin: 0;
  padding: 0;
  width: initial;
  z-index: 3;

  > div {
    background: #72a822;
    margin: 0 20%;
  }
}

<table>
  <tbody>
    <tr>
      <td>
        <p>Label</p>
        <div ng-style="{'height': order.value/maxValue * 100 + '%'}"></div>
      </td>
    </tr>
  </tbody>
</table>

EDIT 最初我使用angularjs动态计算并设置div元素的height属性。我提醒一下，此代码适用于Google Chrome，但IT DOEST不适用于Mozilla Firefox，因此问题在于浏览器的兼容性。

编辑第2卷

以下是实例：https://jsfiddle.net/zck5mw7m/ 绿色栏不会出现在Mozilla Firefox中，但会出现在Google Chrome中

Answer 1

使用所谓的内联css。

<td style="background-color: #E30000;">this is a Test </td>

这应该适合你。

td内的Div标签没有在mozilla上显示背景颜色

1 个答案: