使用Chrome中的框阴影插图的悬停状态为1px关闭

Question

我在悬停状态下使用框形阴影在桌面上创建入站边框 - 我知道在Chrome中你必须以与Firefox不同的方式实现它。然而，悬停状态下底部有1px被切断。代码如下。它正在使用数据表。屏幕截图和下面的代码（仅用于行 - 因为我们正在使用SASS）。有人有主意吗？非常感激。 。我相信它与chrome中的box-shadow嵌入错误有关。

<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/