相关疑难解决方法(0)

表行上的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> …

这可能吗？

我的代码适用于Firefox.我还可以让webkit在悬停时更改其他属性(例如背景颜色等),但是框阴影不会生效:

tr:hover {
    -webkit-box-shadow: 0px 2px 4px #e06547;
    -moz-box-shadow: 0px 2px 4px #e06547;
    box-shadow: 0px 2px 4px #e06547;
    background-color: #d4d5d6;
}

我在把桌子放在桌子box-shadow上时遇到了问题tr.问题是,box-shadow除非表中display的所有trs都设置为block(我在此处找到'修复':TR标记内的Box Shadow),否则根本不显示.然而,当display的trs被设定block,它使表格单元格不再排队,拥挤所有左侧.

这是一个演示问题的小提琴:http://jsfiddle.net/jFdEY/

您可以尝试更改它以应用于所有trs,但这会导致另一个问题(在下面的第二张图片中).

这是一些图片:

没有display: block所有trs的表(表格显示正常但box-shadow不起作用)

在一个与 display: block所有的trS(box-shadow显示出来,但表格的布局被打破)

那么,有没有办法解决这个问题呢？