Currently, I am faced with a dilemma regarding some CSS hover effects and table formatting. Despite successfully implementing most aspects of the design, there is an issue with how different browsers interpret padding within elements during color changes on hover. While Chrome seems to adjust only the content background color, Firefox applies the color change to everything including padding. I have attempted to troubleshoot this discrepancy by utilizing a CSS reset, but without success.
This problem has been observed in both Firefox version 35 and Chrome version 40.
Edit: In hindsight, my intention was for Firefox to render the hover effect in a manner similar to Chrome's display.
Here is a fiddle containing the relevant code.
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;
}