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懸停在谷歌瀏覽器不工作

回答

相關問題