邊界崩潰的工作方式不同在Chrome和Firefox

Question

在Chrome看到這個fiddle和Firefox

我需要.lightBgOnHover類在整個錶行，效果很好的Firefox而不是Chrome瀏覽器。我的猜測是border-collapse：collapse;與它有關。

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

Answer 1

使用display: block;在.lightBgOnHover CSS：

，如：

.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這裏。