Question

所以，我对一些css悬停和表格有点麻烦。我得到了大部分工作，但是当chrome改变颜色只是内容并忽略填充时，firefox没有。它只是改变一切，填充或不填充。即使使用css重置，我也无法弄清楚如何在两种浏览器中看起来都一样。

我在firefox 35和chrome 40中试过这个。

编辑：应该说我正在寻找firefox来像Chrome一样显示它。

Here's摆弄代码。

span {
    height: 50px
    line-height: 50px;
    background-color: orange;
}
table {
    border-spacing: 0;
}
tr > td {
    padding-top: 6px;
}
tr:hover {
    background-color: red;    
    background-clip: content-box;
}

Answer 1

在Chrome中，似乎背景剪辑正在应用于子元素，而在Firefox中，它正在应用于tr而不是子元素。

要使Firefox的行为与Chrome一样，只需更改

即可

tr:hover {
    background-color: red;    
    background-clip: content-box;
}

要

tr:hover>td {
    background-color: red;    
    background-clip: content-box;
}

每个td的背景将分别剪裁。

http://jsfiddle.net/degLm3vv/6/

>运算符指定以下CSS选择器仅适用于前一个选择器的直接后代。在这种情况下，正在徘徊的td的直接tr后代。

Answer 2

如果你想让chrome看起来像firefox你必须使用webkit-前缀

background-clip: webkit-content-box;

http://jsfiddle.net/degLm3vv/5/

使css悬停在firefox和chrome中表现相同

2 个答案: