CSS框- Safari中不处理表行的阴影

Question

.highlight {
     box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
     -webkit-box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5); 
}

我发现这种样式不适用于Safari中的表行(iOS 16.1.1)，但它可以在Chrome107和Edge107中工作。

我在Safari中尝试过用表格单元格(和display: table -cell)，它工作得很好。

我也试过添加

-webkit-appearance: none;

但这没什么用。

有人会给出解决办法吗？

Answer 1

当涉及到餐桌时，Safari有点奇怪。您必须将tr设置为显示块，并使用CSS重新创建表行为。这不太好，但在大多数情况下都有效。

​

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

<table>
  <tr>
    <td>jo</td>
    <td>yippie</td>
  </tr>
</table>

​