左手's Blog
我是左手，行走在路上!
ie9中border-collapse至box-shadow无法显示的bug
前几天维护公司项目，给一个弹出层添加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> |