css - 奇怪的 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 m 中确实以绿色背景显示，但在最新的 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>