CSS渲染和Firefox

Question

我的风格像这样的表：http://jsfiddle.net/naveen/SGQBF/

在徘徊tr S，我想在首个TD或TR表现出子弹。
这在Firefox中按预期工作。但是在Chrome中，每个td都会显示子弹。

我的问题是

1. 请告诉我错了我的CSS？
2. 我该如何纠正？

Answer 1

我认为这是一个错误。

这是一个解决方法。

.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 2

改变了你的规则是：

.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 3

的CSS看起来好像没什么问题。为什么铬行为不正确我不知道，但一个快速解决办法是将子弹从tr移动到tr第一个td。 Fiddle

Answer 4

这将是编辑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; }