CSS Table-Row Backcolor vs Table Backcolor

Question

我有CSS的问题.我列出了div标签.问题是:.table-cell后面是.table-row,这就是为什么我认为.table-cell的背景颜色为黄色,接下来是灰色.

但是当我将border-top-left-radius应用于.table-cell时,蓝色来自角落,而不是灰色.正如你在这里看到的那样.我在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 中遇到此问题：