CSS Table-Row Backcolor vs Table Backcolor

Question

我遇到了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;
}

Answer 1

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