CSS 表格行背景色与表格背景色答案

【问题标题】：CSS Table-Row Backcolor vs Table BackcolorCSS 表格行背景色与表格背景色
【发布时间】：2015-08-15 23:19:42
【问题描述】：

我遇到了 CSS 问题。我列出了 div 标签。问题是： .table-cell 后面是 .table-row，这就是为什么我认为 .table-cell 的背景颜色是黄色，然后是灰色。

但是当我将border-top-left-radius 应用于.table-cell 时，蓝色穿过角落，而不是灰色。 As you can see here.我在 Windows 8.1 上使用 Google Chrome 43.0。

<div class="table">
  <div class="table-row">
    <div class="table-cell">Row 1 - Cell 1</div>
    <div class="table-cell">Row 1 - Cell 2</div>
    <div class="table-cell">Row 1 - Cell 3</div>
    <div class="table-cell">Row 1 - Cell 4</div>
  </div>
  <div class="table-row">
   <div class="table-cell">Row 2 - Cell 1</div>
    <div class="table-cell">Row 2 - Cell 2</div>
    <div class="table-cell">Row 2 - Cell 3</div>
    <div class="table-cell">Row 2 - Cell 4</div>
  </div>
</div>

CSS 代码如下所示：

.table {
  display:table;
  background-color:blue;
}

.table-row {
  display:table-row;
  background-color:gray;

}

.table-cell {
  display:table-cell;
  background-color: yellow;
  border-top-left-radius: 10px;
}

【问题讨论】：

预期输出是什么
我希望角落的颜色是灰色的。但它们是蓝色的。
只有灰色，我没看到蓝色.. 我用的是 mozilla
你是对的，mozilla 是灰色的。但是对于 chrome 和 IE，它是蓝色的。

标签： html css background-color css-tables

【解决方案1】：

您是否尝试过刷新浏览器缓存？我无法重现该问题，因为我在 Mac OSX 10.9.5 上的 Firefox 38 中得到了这个：

【讨论】：

是的，同样的问题。你用什么浏览器？
这是一个浏览器的东西。使用 Chrome 会产生这个问题。不过不确定非黑客解决方案。
你知道是否有可用的黑客攻击吗？

【解决方案2】：

更改.table的背景颜色

.table {
  display:table;
  background-color:grey;
}

【讨论】：