bug 471 - font-weight:600 stretches text in IE

Issue: #471
Affects: IE6, IE7, IE8 Beta 1, IE8 Beta 2, Chrome 5,6,7
Fixed In: IE8 PR 1

Update: This apparently affects Google Chrome now (v5,6,7)


When styling text on your site there are several options for bolding. You can use the classic <b> tag, the <strong> tag, or any tag with styling set for the font-weight.

Example:

<style type="text/css">
  .example1{
    font-weight:bold;
  }
  .example2{
    font-weight:700;
  }
  .example3{
    font-weight:??;
    /*normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900|inherit*/
  }
</style>

Every option works as intended with the exception of 600 in IE. IE will render any text with a font-weight:600 about 10% wider than normal text (regardless if ClearType is turned on or off).

The Quick Brown Fox Jumps Over The Lazy Dog. Please Don't Hurt The Web - Use Web Standards. (@500)

The Quick Brown Fox Jumps Over The Lazy Dog. Please Don't Hurt The Web - Use Web Standards. (@600)

The Quick Brown Fox Jumps Over The Lazy Dog. Please Don't Hurt The Web - Use Web Standards. (@700)

Note: Updated the style to a fixed-width font to better illustrate.

Known Workarounds: None.

Related Issues: None.


Bug/Site Feedback |
Submit a bug