CSS悬停在谷歌浏览器不工作

我有一个表上有悬停影响的行。它在Internet Explorer中运行良好，但在Chrome中进行测试时，行颜色的右上角会变得混乱。它没有完全盘旋。有什么建议么？这里是代码链接：http://codepen.io/ChaseHardin/pen/DyuEf或下面的代码。CSS悬停在谷歌浏览器不工作

HTML：

<table class="tableStyle hoverTable"> 
       <thead> 
        <tr> 
         <th class="theadCustom"></th> 
         <th class="theadCustom"></th> 
         <th class="theadCustom"></th> 
        </tr> 
       </thead> 
       <tbody> 

        <tr class="even myHover"> 
         <td class="tdCustom">85% $CEZ</td> 
         <td class="tdCustom">Top 1% $F</td> 
         <td class="tdCustom">10% $BMI</td> 
        </tr><!-- Table Row --> 

        <tr class="odd myHover"> 
         <td class="tdCustom">BW: 91 lbs</td> 
         <td class="tdCustom">WW: 781 lbs</td> 
         <td class="tdCustom">YW: 1,420 lbs</td> 
        </tr><!-- Darker Table Row --> 
       </tbody> 
      </table>

CSS：

.tableStyle { 
    border: #ccc 2px solid; 
    padding: 15px; 
    text-align: center; 
    font-family: "Gabriola"; 
    font-size: 25px; 

    margin: 0; 
    margin-left: auto; 
    margin-right: auto; 
} 

.even { 
    background: #f6f6f6; 
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6)); 
    background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6); 
} 

.odd { 
    background: #fafafa; 
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa)); 
    background: -moz-linear-gradient(top, #fbfbfb, #fafafa); 
} 

.tdCustom { 
    border: #ccc 2px solid; 
    padding: 15px; 
} 

.theadCustom { 
    padding:21px 25px 22px 25px; 

    background: #ededed; 
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb)); 
    background: -moz-linear-gradient(top, #ededed, #ebebeb); 
} 

.myHover:hover { 
    background: #f2f2f2; 
    background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0)); 
    background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0); 
} 

* { 
    margin: 0; 
} 

.hoverTable { 
    width: 80%; 
    border-collapse:collapse; 

    margin: 0; 
    margin-left: auto; 
    margin-right: auto; 
}

来源

2014-09-04 ChaseHardin

这是你经常听不到的东西。*“它在Internet Explorer中工作正常”* ..但不是在Chrome中。 – 2014-09-04 01:53:40

大声笑，我知道！ :) – ChaseHardin 2014-09-04 01:54:00

铬，填充，表格和框大小似乎导致funkiness。需要15px填充吗？（可能相关：http://stackoverflow.com/questions/4134107/html5-table-cell-padding-different-in-browsers） – Jack 2014-09-04 01:57:45

这是paddining: 15px的.tableStyle元素的结果。删除可以解决问题而不影响显示。

Updated Example

.tableStyle { 
    border: #ccc 2px solid; 
    text-align: center; 
    font-family: "Gabriola"; 
    font-size: 25px; 
    margin: 0 auto; 
}

如果你想填充添加到table元素，你应该使用border-spacing: 15px代替。值得注意的是，border-collapse属性值需要为separate而不是collapse，以便border-spacing有效。

来源

2014-09-04 01:57:39

这很好，谢谢@Josh Crozier！ – ChaseHardin 2014-09-04 02:05:49

CSS悬停在谷歌浏览器不工作

回答

相关问题