Question

我有一个对行有悬停影响的表。它在Internet Explorer中工作正常，但在Chrome中进行测试时，行颜色的右上角会混乱。它没有完全徘徊。有什么建议？以下是代码的链接：http://codepen.io/ChaseHardin/pen/DyuEf或以下代码。

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;
}

Answer 1

这是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生效。

CSS Hover无法在Google Chrome中使用

1 个答案: