CSS рендеринг <tr>фона отличается в WebKit и Firefox

Question

У меня есть таблица в стиле: http://jsfiddle.net/naveen/SGQBF/

При наведении tr s я хотел бы показать пулю в первый тд или tr .
Это работает, как и ожидалось в Firefox. Но в Chrome пуля показывается на каждом td.

Мои вопросы

1. Что не так с моим CSS?
2. Как я могу это исправить?

Answer 1

Изменены ваши правила на это:

.datatable tr.row:hover , .datatable tr.altrow:hover{
    color: #000;
    background-color: #FFFACD;
/* remove background image */
}

.datatable tr.row:hover > td:first-child, .datatable tr.altrow:hover >  td:first-child {
    background-image: url(http://quenshsolutions.ie/Images/bullet.gif);
    background-repeat: no-repeat;
}

Answer 2

Это будет отредактированный HTML:

<table class="datatable">
    <tr>
        <th class="sortasc-header"><a href="#">Name</a></th>
        <th>Profession</th>
        <th class="sortdesc-header"><a href="#">Age</a></th>
    </tr>
    <tr class="row">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
    <tr class="altrow">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
    <tr class="row">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
    <tr class="altrow">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
    <tr class="row">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
    <tr class="altrow">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
    <tr class="row">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
    <tr class="altrow">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
    <tr class="row">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
    <tr class="altrow">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
    <tr class="row">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
</table>

И это будет отредактированный CSS (жирный шрифт это то, что было отредактировано):

.datatable
{
    border: solid 1px #7f7f7f;
    color:#000000;
    width: 100%;
}        
.datatable th
{
    background: url(http://quenshsolutions.ie/Images/sprite.png) repeat-x 0px 0px;
    border-color: #989898 #cbcbcb #989898 #989898;
    border-style: solid solid solid none;
    border-width: 1px 1px 1px medium;
    color: #000;
    padding: 4px 5px 4px 10px;
    text-align: center;
    vertical-align: bottom;
    font-size: 14px;
}
.datatable th a
{ 
    color:#00002B;
    padding-right:18px;
    text-decoration: none;
}
.datatable th.sortasc-header, .datatable th.sortdesc-header {
    background: url(http://quenshsolutions.ie/Images/sprite.png) repeat-x 0px -100px;
}

.datatable th.sortasc-header a {
    background:url(http://quenshsolutions.ie/Images/asc.gif) right center no-repeat; 
}
.datatable th.sortdesc-header a {
    background:url(http://quenshsolutions.ie/Images/desc.gif) right center no-repeat; 
}
.datatable tr {
    font-size: 12px;
    color:#777;
}
.datatable .row td, .datatable .altrow td 
{
    text-align:left;
    padding: 4px 10px 4px 10px;
    border-right: solid 1px #cbcbcb;
}
.datatable .row 
{
    background-color: #FFFFFF;
}
.datatable .altrow 
{
    background-color: #EDF5FF;
}  
.datatable .row td.sortasc-row, .datatable .row td.sortdesc-row
{
    background-color: #EDF5FF;
}
.datatable .altrow td.sortasc-row, .datatable .altrow td.sortdesc-row
{
    background-color: #DBEAFF;
}      
**.datatable tr.row td.first:hover, .datatable tr.altrow td.first:hover{
    color: #000;
    background-color: #FFFACD;
    background-image:url(http://quenshsolutions.ie/Images/bullet.gif);
    background-repeat: no-repeat;
}
.datatable tr.row:hover, .datatable tr.altrow:hover{
    color: #000;
    background-color: #FFFACD;
    background-repeat: no-repeat;    
}**

.datatable .row td.first { padding-left:10px; }
.datatable th.first { padding-left:10px; }

Answer 3

Я думаю, что это ошибка.

Вот обходной путь.

.datatable tr.row:hover, .datatable tr.altrow:hover {
    background-color: #FF0000;
    color: #000;
}

.datatable tr.row:hover td:first-child, .datatable tr.altrow:hover td:first-child {
    color: #000;
    background-color: #FF0000;
    background-image: url(http://quenshsolutions.ie/Images/bullet.gif);
    background-repeat: no-repeat;
    background-position: top left
} 

Answer 4

CSS выглядит хорошо для меня.Почему хром ведет себя некорректно, я не знаю, но быстрое решение проблемы - переместить пулю с tr на tr в первую очередь. Fiddle