html - CSS :hover formats table rows unpredictably in Firefox

Question

我正在帮助处理仪表板中的交互式表格。单击表中的行会更改显示在仪表板其余部分的数据。表行可以有一个 'selected' 类，其中选定的行有一个 4px 的粗体边框。这些行还有一个 :hover 选择器，给它们一个 2px 的边框。

我的问题是，当使用 Mozilla Firefox V 56.0.1 时，这会导致鼠标悬停的行与所选行之间的行在左侧和右侧被赋予 4px 的边框排。详情请见下文。

Unintended behavior

Intended behavior

代码如下:

CodePen 中的 HTML 和 CSS https://codepen.io/anon/pen/MOzJNZ

table {
      border-collapse: collapse;
    }
    tr.notselected:hover {
       border: 2px solid black;
       padding: 2px;
    }
    tr.selected {
       border: 4px solid black; }

    <table>
      <tr>
        <td></td>
        <td colspan="2">Header 1</td>
        <td colspan="2">Header 2</td>
      </tr>
      <tr>
        <td></td>
        <td>Subheader 1.1</td>
        <td>Subheader 1.2</td>
        <td>Subheader 2.1</td>
        <td>Subheader 2.2</td>
      </tr>
      <tr class="selected">
        <td>Row 1</td>
        <td >10.1</td>
        <td >10.6</td>
        <td >9.1</td>
        <td >9.4</td>
      </tr>
      <tr class="notselected">
        <td>Row 2</td>
        <td>12.9</td>
        <td>11.3</td>
        <td>10.1</td>
        <td>10.5</td>
      </tr>
      <tr class="notselected">
        <td>Row 3</td>
        <td></td>
        <td></td>
        <td>8.7</td>
        <td>8.8</td>
      </tr>
      <tr class="notselected">
        <td>Row 3</td>
        <td>7.9</td>
        <td>7.9</td>
        <td></td>
        <td></td>
      </tr><tr class="notselected">
        <td>Row 4</td>
        <td></td>
        <td></td>
        <td>9.2</td>
        <td>8.4</td>
     </tr>
     <tr class="notselected">
       <td>Row 5</td>
       <td>12.2</td>
       <td>11.9</td>
       <td>7.3</td>
       <td>9.0</td>
     </tr>
         
    </table>

Answer 1

添加了以下类以修复 firefox 问题:

tr.notselected {
      border: 0px solid black; 
   }

table {
      border-collapse: collapse;
    }
    tr.notselected:hover {
       border: 2px solid black;
       padding: 2px;
    }
    tr.selected {
       border: 4px solid black; 
   }
   tr.notselected:hover td {
   padding-bottom: 6px; }
   tr.notselected {
      border: 0px solid black; 
   }

    <table>
      <tr>
        <td></td>
        <td colspan="2">Header 1</td>
        <td colspan="2">Header 2</td>
      </tr>
      <tr>
        <td></td>
        <td>Subheader 1.1</td>
        <td>Subheader 1.2</td>
        <td>Subheader 2.1</td>
        <td>Subheader 2.2</td>
      </tr>
      <tr class="selected">
        <td>Row 1</td>
        <td >10.1</td>
        <td >10.6</td>
        <td >9.1</td>
        <td >9.4</td>
      </tr>
      <tr class="notselected">
        <td>Row 2</td>
        <td>12.9</td>
        <td>11.3</td>
        <td>10.1</td>
        <td>10.5</td>
      </tr>
      <tr class="notselected">
        <td>Row 3</td>
        <td></td>
        <td></td>
        <td>8.7</td>
        <td>8.8</td>
      </tr>
      <tr class="notselected">
        <td>Row 3</td>
        <td>7.9</td>
        <td>7.9</td>
        <td></td>
        <td></td>
      </tr><tr class="notselected">
        <td>Row 4</td>
        <td></td>
        <td></td>
        <td>9.2</td>
        <td>8.4</td>
     </tr>
     <tr class="notselected">
       <td>Row 5</td>
       <td>12.2</td>
       <td>11.9</td>
       <td>7.3</td>
       <td>9.0</td>
     </tr>
         
    </table>