用户:Sky6t/Sandbox/two

one
two
three

"one" and "three" have the same "style" attribute. but the box-shadow cannot be displayed in "one" in Internet Explorer 9 and Internet Explorer 10, in both IE 9 Standards and IE 10 Standards document mode. That is because "one" and "two" are contained in a table which has a "border-collapse:collapse;" style attribute.

Update
It is said that Internet Explorer 10 Release Preview has fixed this bug. Is that true? Yes, it is!!!!

Code below:

  1. <div style="font-family:'segoe ui',sans-serif;text-align:center;line-height:30px">
  2. <table style="border-collapse:collapse;">
  3. <tr style="height:60px">
  4. <td style="width:120px">
  5. <div style="width:100px;height:30px;box-shadow:5px 5px 10px #ace;border:1px solid #27a">one</div>
  6. </td>
  7. <td style="width:120px">
  8. <div style="width:100px;height:30px;box-shadow:inset 5px 5px 10px #ace;border:1px solid #27a">two</div>
  9. </td>
  10. </tr>
  11. </table>
  12. <div style="width:100px;height:30px;box-shadow:5px 5px 10px #ace;border:1px solid #27a">three</div>
  13. </div>