前几天维护公司项目，给一个弹出层添加box-shadow效果，在ie9中效果无法显示，搜索出的结果多为更改doctype声明。页面本身使用html5声明，不存在冲突，调试了半天找出原因，弹出层外框为table默认添加了border-collapse: collapse的样式，因为这个样式导致box-shadow无法生效，修改为border-collapse: separate后解决。

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <table style="border-collapse: collapse">
      <tr>
        <td>
          <div style="box-shadow:0 0 50px rgba(0, 0, 0, 0.5); width: 200px; height: 200px; border: 1px solid #CCC;"> </div>
        </td>
      </tr>
    </table>
    <table>
      <tr>
        <td>
          <div style="box-shadow:0 0 50px rgba(0, 0, 0, 0.5); width: 200px; height: 200px; border: 1px solid #CCC;"> </div>
        </td>
      </tr>
    </table>
  </body>
</html>