html - 在 Chrome 中使用框阴影插入的悬停状态关闭 1px

Question

我在悬停状态下使用框阴影在表格上创建入站边框 - 我知道在 Chrome 中，您实际上必须以与在 Firefox 中不同的方式进行操作。然而，在悬停状态下底部有 1px 被截断。代码如下。它正在使用数据表。下面的屏幕截图和代码(仅用于该行 - 因为我们使用的是 SASS)。有人有主意吗？非常感激。 .我相信这与 chrome 中的 box-shadow inset 错误有关。

<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 填充。

这里是您修复的 fiddle 的链接:https://jsfiddle.net/okyfLf8x/2/