在Chrome中使用长方体阴影嵌入的悬停状态为1px关闭

Question

我正在使用悬停状态下的框阴影在表格上创建入站边框--我知道在Chrome中，你必须实际使用不同于Firefox的方式。然而，在悬停状态下，底部有1px被切断。代码如下。它使用的是数据表。屏幕截图和下面的代码(仅用于行-因为我们使用的是SASS)。有谁有什么想法吗？非常感谢。。我相信这与chrome中的一个框阴影嵌入错误有关。

​

<table>
  <tr class="odd" role="row">
   <td data-title="Order Number">
    <td data-title="Business">Tommy Biz</td>
     <td data-title="Products">Logo Design, Standard Business Card</td>
       <td data-title="Reference Number">11-000198</td>
        <td data-title="Created By">Josh</td>
         <td data-title="Created On">08/15/2016 3:19 PM</td>
           <td data-title="Last Activity On">08/15/2016 3:19 PM</td>
           <td data-title="Status">Saved For Later</td>
         </tr>
    <table>

CSS (包括常规代码和显示实际“有问题”代码的SASS )

table td::before {
display: none;
}
table td::before {
 background-color: transparent;
 border: 0 none;
 content: attr(data-title);
 height: 100%;
 left: 0;
 padding: 0 0 0 8px;
 position: absolute;
 text-align: left;
 white-space: nowrap;
 width: 45%;
}
table tbody tr.group td, table th, table td::before, table.results th {
  background-color: #ebebeb;
  border: 1px solid #d7dedb;
  color: #757575;
  font-size: 11px;
  font-weight: normal;
  padding: 5px 12px;
  text-align: left;
  text-transform: uppercase;
  vertical-align: middle;
 }

 table td {
   border: 1px solid #d7dedb;
   color: #757575;
   display: table-cell;
   font-size: 11px;
   padding: 5px 12px;
   position: static;
   vertical-align: middle;
   width: auto;

%zebra-row {
  transition: background-color .1s ease-out;
  background-clip:padding-box;


 &:nth-child(odd) {
background-color: $alabaster;
}

 &:hover {
 background-color: $gallery;
 box-shadow: 2px 0 0 $aqua-forest inset;
}
/*For Chrome*/
 &:hover td:first-child {
box-shadow: 2px 0 0 $aqua-forest inset;
}
}  

Answer 1

这是一个表格问题，而不是css问题。添加以下内容以修复它。

在HTML中

<table cellspacing="0" cellpadding="0">

在CSS中

table {border: none;}

这将从表中移除1px，并使其正常工作。不要在表格上使用cellpadding属性来填充，而是在css中给td的填充。

这是你的小提琴修复链接：https://jsfiddle.net/okyfLf8x/2/