IE doesn't support Q tag but you can style it.

Question

I am puzzled with the statement that IE does not support <q> tag but it renders just fine on IE as an inline element so if it doesn't support it, so what? We can just style it with CSS to italicize and it works as expected. I tested from IE5 and up.

http://www.w3schools.com/tags/tag%5Fq.asp

Explain why it says it doesn't support it when I don't see anything that stops you from using the q element and be able to style it with CSS?

Answer 1

It's because other browsers automatically add speech marks around the content. IE isn't aware of it as separate tag, and doesn't do this.

Of course, you can use :before and :after to add the quotes, but that doesn't work in old versions of IE either.

Answer 2

IE does understand the <q> element, in the sense that it's a valid tag and you can style it. (Other elements such as the HTML5 <header>/<footer> IE doesn't understand at all by default.)

Anyhoo, the statement "doesn't support" really means "doesn't follow the standard". It displays the <q> element fine but doesn't add quotation marks which the spec requires. This is fixed in IE8.

As Rich says, you can use pseudo-elements to add quotation marks - which you ought to do anyway - but neither IE6 nor IE7 support that. What I like to do though, is change the colour of the <q> element and/or make it italic in an IE-only stylesheet. So IE visitors will at least see a differentiation.

Here's a code snippet that may be useful. It adds double curly quotes to all <q> tags, and single curly quotes to nested <q> tags:

q:before {
 content: "\201c";
}
q:after {
 content: "\201d";
}
q q:before {
 content: "\2018";
}
q q:after {
 content: "\2019";
}