奇怪的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浏览器一切正常，但在Chrome当我集中input，则background-color丢失。

这是Chrome错误还是我失去了一些东西？

应该怎么看：

它是如何看起来：

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

Answer 1

正如我在评论中所指出的，td.selected确实显示了在Chrome版本38.0.2125.101米绿化背景，但它并没有在最新的Chrome工作。这似乎是行为的倒退，或者可能是让它无法工作的明智决定。我不能评论为什么行为发生了变化，但我认为这是一种倒退。

没有可用于Chrome浏览器的最新版本但是修复。似乎造成问题的部分是应用于tr的background-color: white。将其从tr中删除，并将白色背景应用于td。这似乎使它正常工作。

这适用于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。

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

<div class="field"> 
 
    <input type="text" /> 
 
    <div class="suggestions"> 
 
    <table> 
 
     <tbody> 
 
     <tr> 
 
      <td>1</td> 
 
      <td class="selected">2</td> 
 
      <td>3</td> 
 
      <td>4</td> 
 
      <td>5</td> 
 
      <td>6</td> 
 
      <td>7</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>