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中,它的背景为绿色。
最佳答案
正如我在评论中所指出的,td.selected
在Chrome版本38.0.2125.101 m中的确显示绿色背景,但在最新的Chrome中不起作用。这似乎是行为上的退步,或者可能是明智的决定,使其无法正常工作。我无法评论行为改变的原因,但我认为这是一种回归。
但是,最新版本的Chrome有一个修复程序。可能引起问题的部分是应用于background-color: white
的tr
。将其从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>