桌面上的框阴影没有出现在某些浏览器上

Question

表行上的CSS box-shadow tr似乎不能跨浏览器一致地工作.在某些浏览器上显示阴影; 在别人身上,没有影子.

我正在使用以下CSS:

tr {
  background-color: rgb(165, 182, 229);
  box-shadow: 0px 2px 2px black;
  -moz-box-shadow: 0px 2px 2px black;
  -webkit-box-shadow: 0px 2px 2px black;
}
td, th {
  padding: 5px;
  text-align: left;
}

这是以下代码段的jsFiddle:

tr {
  background-color: rgb(165, 182, 229);
  box-shadow: 0px 2px 2px black;
  -moz-box-shadow: 0px 2px 2px black, ;
  -webkit-box-shadow: 0px 2px 2px black;
}
td, th {
  padding: 5px;
  text-align: left;
}

<table>
  <tr>
    <td>&nbsp;</td>
    <th>One</th>
    <th>Two</th>
  </tr>
  <tr>
    <th>Title</th>
    <td>Three</td>
    <td>Four</td>
  </tr>
  <tr>
    <th>Title2</th>
    <td>Five</td>
    <td>Six</td>
  </tr>
  <tr>
    <th>Title3</th>
    <td>Seven</td>
    <td>Eight</td>
  </tr>
  <tr>
    <th>Title4</th>
    <td>Nine</td>
    <td>Ten</td>
  </tr>
</table>

注:代时,观察到相同的行为<tr>与<div>和添加display: table-row.

Answer 1

如前所述,box-shadow属性仅适用于具有display: block或display:inline-block属性的元素.

如果您将display: block表格单元格添加为一般样式规则,它将崩溃,因为单元格所具有的自动宽度/高度比例display:table将不再应用.要模拟该行为,只需min-width为每个th和分配属性td.

然后应用于box-shadow该行(悬停或不悬停).

总之,您的代码应如下所示:

table { box-sizing: border-box; }
td, th { padding-left: 16px; min-width: 170px; text-align: left; }
tr { display: block; }
tr:hover { box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.5); cursor: pointer; }

为简单起见,我省略了供应商前缀.

这是完整的例子:

table {
  box-sizing: border-box;
  border-bottom: 1px solid #e8e8e8;
}
td,
th {
  padding-left: 16px;
  min-width: 170px;
  border: 1px solid #e8e8e8;
  border-bottom: none;
  font: 14px/40px;
  text-align: left;
}
td {
  color: #666;
}
tr {
  display: block;
}
th {
  color: #333;
}
tr:hover {
  background-color: #fbfbfb;
  box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

<table cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>Phone number</th>
      <th>Date</th>
      <th>Name</th>
      <th>Label</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0342443</td>
      <td>10 August 2013</td>
      <td>Kate</td>
      <td>Loves cats</td>
      </td>
      <tr>
        <td>0342442</td>
        <td>9 August 2013</td>
        <td>Mary</td>
        <td>Boring</td>
      </tr>
      <tr>
        <td>0342441</td>
        <td>8 August 2013</td>
        <td>Anna</td>
        <td>Loves extreme stuff</td>
      </tr>
  </tbody>
</table>

你也可以在这里查看小提琴.

Answer 2

使用变换比例(1,1)属性与box-shadow它将解决问题.

tr:hover {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

小提琴:https://jsfiddle.net/ampicx/5p91xr48/

谢谢!!

Answer 3

如果你想看到它被修复,请明星这个bug:

https://code.google.com/p/chromium/issues/detail?id=94871

如果希望表格单元格宽度继续自动调整,则可以将阴影应用于单个单元格:

td:first-child {
  box-shadow:
    inset 0px 11px 8px -10px blue,
    inset 0px -11px 8px -10px blue,
    inset 11px 0px 8px -10px blue; 
}
td {
  box-shadow:
    inset 0px 11px 8px -10px blue,
    inset 0px -11px 8px -10px blue;
}
td:last-child {
  box-shadow:
    inset 0px 11px 8px -10px blue,
    inset 0px -11px 8px -10px blue,
    inset -11px 0px 8px -10px blue; 
}

完整的例子在这里.(的jsfiddle)

(灵感来自/sf/answers/710562891/)

在每个框阴影值中:

• 调整第3个数字(模糊半径)以更改模糊半径.
• 第4个数字(展开半径)必须始终为负数,其绝对值必须大于第3个数字(模糊半径).
• 使第一个数字(偏移x)非零以获得左侧或右侧的阴影.使其绝对值1大于第4个数字的绝对值(再次参见上面的例子,更容易看出我的意思).
• 使第二个数字(偏移y)非零以获得顶部或底部的阴影.使其绝对值1大于第4个数字的绝对值.

Answer 4

我得到的效果与box-shadow使用filterand非常相似drop-shadow。这有点棘手，但您需要找到最适合您的场景的阴影配置。

我原来的班级：

.project-row { 
   box-shadow: 0 0 15px 0 black;
}

我的新班级：

.project-row { 
   filter: drop-shadow(0 0 9px black);
}

https://codepen.io/nico_nj/pen/XWbaZPJ

Answer 5

我遇到过同样的问题。当鼠标悬停在整行上时，我试图突出显示整行。下面是它的css代码：

tr:hover {
    outline: none;
    -webkit-box-shadow: inset 0 0 10px #337AB7;
    box-shadow: inset 0 0 10px #337AB7;
}

它在 Windows 7 上的 Mozilla Firefox (38.0.1) 和 Internet Explorer (11.0.9600.17801) 上运行良好。但是，在 Chrome (43.0.2357.81) 上不起作用。

因此，我不得不解决问题，我混合了 Sviatoslav Zalishchuk 和 David Winiecki 的答案。结果我得到：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    tr:hover td:first-child {
       box-shadow: inset 0px 11px 8px -10px #337AB7, 
                   inset 0px -11px 8px -10px #337AB7, 
                   inset 11px 0px 8px -10px #337AB7;
    }

    tr:hover td {
       box-shadow: inset 0px 11px 8px -10px #337AB7, 
                   inset 0px -11px 8px -10px #337AB7;
    }

    tr:hover td:last-child {
       box-shadow: inset 0px 11px 8px -10px #337AB7, 
                   inset 0px -11px 8px -10px #337AB7, 
                   inset -11px 0px 8px -10px #337AB7;
    }
}

tbody > tr:hover {
    outline: none;
    -webkit-box-shadow: inset 0 0 10px #337AB7;
    box-shadow: inset 0 0 10px #337AB7;
}

这工作正常，它不会破坏表格的列宽，并且仍在 Mozilla 和 Explorer 上工作。

下面是一个完整的例子：

tr:hover {
    outline: none;
    -webkit-box-shadow: inset 0 0 10px #337AB7;
    box-shadow: inset 0 0 10px #337AB7;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    tr:hover td:first-child {
       box-shadow: inset 0px 11px 8px -10px #337AB7, 
                   inset 0px -11px 8px -10px #337AB7, 
                   inset 11px 0px 8px -10px #337AB7;
    }

    tr:hover td {
       box-shadow: inset 0px 11px 8px -10px #337AB7, 
                   inset 0px -11px 8px -10px #337AB7;
    }

    tr:hover td:last-child {
       box-shadow: inset 0px 11px 8px -10px #337AB7, 
                   inset 0px -11px 8px -10px #337AB7, 
                   inset -11px 0px 8px -10px #337AB7;
    }
}

tbody > tr:hover {
    outline: none;
    -webkit-box-shadow: inset 0 0 10px #337AB7;
    box-shadow: inset 0 0 10px #337AB7;
}