html - Firefox 和 IE 以不同方式呈现表格背景颜色

Question

虽然 Firefox (54.0) 将附加代码呈现为蓝色背景上的红色条，但 IE(11 和 Edge)将红色条呈现在蓝色背景后面。

有什么方法可以让 IE 像 FF 一样在背景上绘制条形图？

此 HTML 代码已尽可能减少以显示问题。最初它来自一个网络应用程序，在日历上显示事件，蓝色背景标记特殊日子(周末/假期)。

table {
  border-collapse: collapse;
}

table td {
  width: 100px;
  max-width: 100px;
  border: 1px solid;
  height: 30px;
}

div {
  height: 10px
}

.b {
  background-color: blue;
}

<table>
  <tr>
    <td>
      <div style="width:250px;background-color:red">
      </div>
    </td>
    <td class="b"></td>
    <td></td>
  </tr>
</table>

Answer 1

如果 Edge 无法显示与 Firefox 相同的颜色，请尝试使用以 HEX 格式编写的颜色。

只需重写您的代码:

 .b {
  background-color: blue;
}

十六进制颜色代码:

    .b {
  background-color: #0000ff;
}

否则您可以为每个浏览器定义特殊的 CSS，这是针对 MS Edge 的:

@supports (-ms-ime-align:auto) {
    .selector {
        property: value;
    }
}

或者对于 Firefox:

 <style type="text/css">
@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}
</style>

希望对您有所帮助。

//编辑:对于那个背景/前景，尝试在 CSS 中使用 Z-Index 值