tr标签使用hover的box-shadow效果不生效

先说问题：

　　这是大致的HTML结构

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

我想要在tr上添加一个效果，当鼠标滑过的时候应用box-shadow样式，让元素有被选中的表现方式。

所以我在css里面这样写

tr:hover {
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.15);
}

在chrome，firefox，360这些浏览器里面效果正常。但是在ie10上面没有作用。

起初我认为是ie对hover的支持程度导致，所以去查阅相关问题和资料

并尝试：

　　　　使用js绑定mouseover事件，如果是ie浏览器的话就添加上box-shadow这个样式。结果当时是没用。于是我用li和div使用css的hover，在ie浏览器里面生效，

所以我就排除了hover的问题。

于是将问题定位于tr标签是否能应用box-shadow样式。所以我就找到了  这篇文章

总结：

　　box-shadow属性生效于标签类型为display：block或者display：inline-block; 这就是为啥li和div生效。大家都知道tr的默认类型为 display： table-row

所以解决办法就是将tr的类型设置为block，但是这样问题又来了。改变类型之后，原本table tr带来的自适应宽高这些属性都失效了，所以还需要给td th一个最小宽度的

属性：min-width:100px;

如下样式：

td, th {min-width: 100px; }
tr { display: block; }
tr:hover { box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.15); }

很好，暂时解决了在ie浏览器下面的样式问题。

转载于:https://www.cnblogs.com/jjucap/p/8288998.html