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;
}

至HEX颜色代码：

    .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值

Firefox和IE以不同的方式呈现表背景颜色

1 个答案: