:pseudo CSS rule not working in IE

Question

I have a CSS rule which is working in all browsers but IE. When I check it in the IE inspector I can see that the rule is not being applied.

.wrapper:after {
  content: '';
  display: table;
  clear: both;
}

Any idea why this rule is not being applied in IE?

I'm testing on IE 11, 10 & 9. I'm working on a Magento app.

Answer 1

I was able to solve this issue by re-writing the css rule to:

.wrapper:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

I don't understand why the previous rule did not work on IE, while it worked in all other browsers. The previous rule was being inherited from the Magento RWD theme.

Also, it seems that the IE inspector crosses out all :after rules, which is misleading as some of them are actually working on the page.