奇怪的Chrome TD背景颜色问题

Question

CSS的组合在Chrome中引起了一个奇怪的问题，而不是Safari或Firefox。

我在使用max-height转换来隐藏输入时没有注意到内容：

.suggestions {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease-in-out;
}
input:focus ~ .suggestions {
  max-height: 300px;
}

我还有CSS来设置表格单元格的background-color，当它获得所选的类时。

tr:nth-child(odd) {
  background-color: light-blue;
}
td.selected {
  background-color: dark-blue;
}

在Firefox和Safari上一切正常，但在我关注input时Chrome上，background-color丢失了。

这是Chrome错误还是我错过了什么？

应该如何看待：

实际上看起来如何：

您可以在此jsfiddle- https://jsfiddle.net/a7mboskj/中看到此问题。 专注于chrome的输入，第二个单元格不具备绿色背景。在Safari或Firefox中，它确实具有绿色背景。

Answer 1

正如我在评论中所指出的那样，td.selected确实在Chrome版本38.0.2125.101 m中显示绿色背景，但它在最新的Chrome中不起作用。它似乎是一种行为的倒退，或者可能是一种让它变得不起作用的明智决定。我无法评论行为发生变化的原因，但我认为这是一种回归。

但是有最新版本的Chrome可用修复程序。似乎导致问题的部分是应用于background-color: white的{​​{1}}。将其从tr中删除，然后将白色背景应用于tr。这似乎使它正常工作。

这适用于Chrome v48.0.2564.22 dev-m，Chrome v38.0.2125.101 m，Safari v5.1.7（在Win 7上）IE11，IE10，IE9，Edge，Opera和Firefox。

＆＃13;

＆＃13;

td

＆＃13;

.suggestions {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease-in-out;
}
input:focus ~ .suggestions {
  max-height: 500px;
}
table, input {
  width: 100%;
}

tr {
  /* background-color: white; remove this */
}
td {
  width: 14.258%;
  cursor: pointer;
  position: relative;
  background-color: white; /* add it here */
}
td:hover {
  background: blue;
  color: white;
}
td.selected, td.selected:hover {
  background: green;
}

＆＃13;

＆＃13;

＆＃13;