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的错误还是我遗漏了一些东西?

外观如何:

css - 奇怪的Chrome TD背景色问题-LMLPHP

实际外观:

css - 奇怪的Chrome TD背景色问题-LMLPHP

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

最佳答案

正如我在评论中所指出的,td.selected在Chrome版本38.0.2125.101 m中的确显示绿色背景,但在最新的Chrome中不起作用。这似乎是行为上的退步,或者可能是明智的决定,使其无法正常工作。我无法评论行为改变的原因,但我认为这是一种回归。

但是,最新版本的Chrome有一个修复程序。可能引起问题的部分是应用于background-color: whitetr。将其从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>

08-25 11:44
查看更多