Works great in Opera, Firefox, Safari, and Chrome - looks awful in IE

Realizing that an HTML tag was really just a placeholder for some css code was a 'Eureka' moment for me years ago. So while doing some maintenance on my web site today I wanted to style all the elements semantically with css code backing them, not with "<p class='quote'> ... </p>", but with "<quote> ... </quote>". This would be like a Domain Specific Language written in css,

quote {
  display: block;
  margin: 2em 0.5em 0 0.5em; 
  padding: 0.5em;
  text-align: left;
  background: #bbbbff; 
  border:1px solid black;
}
author {
  display: block;
  margin: 0 0.5em; 
  padding: 0.1em 1em 0.1em 0;
  text-align: right;
  border:1px solid black;
}

so, in the HTML it looks like this,

<quote>
Everyone thinks of changing the world, 
but no one thinks of changing himself.
</quote>
<author>
 Leo Tolstoy
</author>

Sadly, this works in all my major browsers, and the iPhone, but alas, not in IE.