Internet Explorer 8, Chrome & Safari bug: Text in strong tags not bold

This’ll be a quick post. There is a very annoying bug in Internet Explorer 8 (not IE6 or IE7), Chrome and Safari whereby text inside a <strong> tag is not displayed in bold!I haven’t yet figured out exactly under which conditions this bug manifests itself so if you know, please send me a message via comments – I am wondering if it’s incorrect inheritance of styling from the parent element.

Luckily, the solution is simple, you can add a global style to your stylesheet like this:

strong 
{
    font-weight:900 !important;
}

This will force all strong tags to display text in bold (unless you override the class with a more specific class with selectors), the “!important” helps to ensure the class above is not overridden.

The strangest thing about this is the combination of browsers which exhibit exactly the same bug…Microsoft have always said that IE8 uses an updated version of their “Trident” rendering engine which they used in previous rendering engines. Does Internet Explorer 8 use some or all of the Webkit rendering engine? If Microsoft did in fact use some or all of Webkit, this would certainly explain the above bug!

Firefox and other Gecko-based browsers do not exhibit this bug.