Many designers have decided that using the Q tag is not worth it because Internet Explorer does not support it. When you use a Q tag in Internet Explorer, it displays the tag contents, but does not include the quote marks around it as specified in the HTML specification.
But not using the Q tag deprives you of a valuable markup tag for defining your page contents. You lose the style hooks it provides as well as the ability to see, at a glance, the quotations on your pages.
Two Steps to Get IE to Render Q Tags the Same as in Other Browsers
It’s really easy to get IE to render the same as other browsers. Just make those browsers render Q tags the same as IE. Place the following CSS into your style sheet:
q:before, q:after {
content: "";
}
This tells the browsers to remove any quotation marks from the beginning and end of your Q tags. Internet Explorer currently ignores the CSS generated content style pseudo-elements :before and :after, so this won’t affect that browser at all.
Then, just add in your quotation marks before and after your Q tag. For example:
<p>Do you know the poem that starts, “<q>Twas brillig and the slivey toves</q>”?</p>
As long as you place the quotation marks outside of the Q tag, your HTML will still be valid. And all browsers will render those quotations correctly.
And, as you saw, I used curly quotes to keep my web typography looking good. I recommend you use these entities for good typography:
- Left double quotation mark “ (“)
- Right double quotation mark ” (”)
- Left single quotation mark ‘ (‘)
- Right single quotation mark ’ (’)
This Technique Should be “Forward-Compatible”
In other words, if Internet Explorer 9 or beyond does begin to support the Q tag correctly, you won’t have to make any changes to your HTML or CSS.
