border-collapse在chrome和firefox中的工作方式不同 [英] border-collapse works differently in chrome and firefox

问题描述

查看chrome和firefox中的 小提琴

see this fiddle in chrome and firefox

我需要 .lightBgOnHover 类在整个表行上工作，这很好firefox而不是chrome。我的猜测是 border-collapse：collapse; 与它有关。

i need .lightBgOnHover class to work on the whole table row, which works well firefox but not chrome. my guess is border-collapse: collapse; has something to do with it.

    <table>
        <tr class="lightBgOnHover">
            <td>
                <label>
                    Cell_11
                </label>
            </td>

            <td>
                <label>
                    Cell_12
                </label>
            </td>

            <td>
                <label>
                    Cell_13
                </label>
            </td>
        </tr>

        <tr class="lightBgOnHover">
            <td>
                <label>
                    Cell_21
                </label>
            </td>

            <td colspan="2">
                <label>
                    Cell_223
                </label>
            </td>

        </tr>

        <tr class="lightBgOnHover">
            <td>
                <label>
                    Cell_31
                </label>
            </td>

            <td rowspan="2">
                <label>
                    Cell_322
                </label>
            </td>

        </tr>

        <tr class="lightBgOnHover">

            <td colspan="3">
                <label>
                    Cell_4123
                </label>
            </td>

        </tr>

    </table>



.lightBgOnHover {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
table {
    border-collapse: collapse;
}
    .lightBgOnHover:hover {
        -webkit-box-shadow: 0 1px 1px 0 rgb(109, 109, 109);
        -ms-box-shadow: 0 1px 1px 0 rgb(109, 109, 109);
        box-shadow: 0 1px 1px 0 rgb(109, 109, 109);
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iNjIlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MyUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
        background: -moz-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 62%, rgba(0,0,0,0.2) 63%, rgba(0,0,0,0.1) 100%);
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(62%,rgba(0,0,0,0.1)), color-stop(63%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.1)));
        background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 62%,rgba(0,0,0,0.2) 63%,rgba(0,0,0,0.1) 100%);
        background: -o-linear-gradient(-45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 62%,rgba(0,0,0,0.2) 63%,rgba(0,0,0,0.1) 100%);
        background: -ms-linear-gradient(-45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 62%,rgba(0,0,0,0.2) 63%,rgba(0,0,0,0.1) 100%);
        background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 62%,rgba(0,0,0,0.2) 63%,rgba(0,0,0,0.1) 100%);
        -webkit-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#1a000000',GradientType=1 );
        -moz-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#1a000000',GradientType=1 );
        -o-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#1a000000',GradientType=1 );
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#1a000000',GradientType=1 );
    }

推荐答案

使用 display：block; in .lightBgOnHover css：

like：

.lightBgOnHover {
   -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;

    display: block;
}

检查 Fiddle 。

这篇关于border-collapse在chrome和firefox中的工作方式不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！