摘要：
先说问题：这是大致的HTML结构PhonenumberDateNameLabel034244310August2013KateLovescats03424429August2013MaryBoring03424418August2013AnnaLovesextremestuff我想要在tr上添加一个效果，当鼠标滑过的时候应用box-shadow样式，让元素有被选中的表现方式。起初我认为是ie对hover的支持程度导致，所以去查阅相关问题和资料并尝试：使用js绑定mouseover事件，如果是ie浏览器的话就添加上box-shadow这个样式。于是将问题定位于tr标签是否能应用box-shadow样式。所以我就找到了这篇文章总结：box-shadow属性生效于标签类型为display：block或者display：inline-block;这就是为啥li和div生效。
先说问题：
这是大致的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-100px;
如下样式：
td, th {min-width:100px; }tr {display:block; }tr:hover {box-shadow:0 0 15px 1px rgba(0, 0, 0, 0.15); }
很好，暂时解决了在ie浏览器下面的样式问题。