(UPDATE: The good people at chromium have pointed out that Safari 5 fails on this too, and so this is a WebKit error not unique to Chrome).

Stumbled upon this one today in Chrome (submitted to the Chrome bug list on 7/3/12) – given the right set of circumstances vertical text alignment of italicized text will drop below the baseline. The complete list of circumstances that must be present to see this are:

  • At the time of this writing you must be using Chrome build 19.0.1084.46 m on Windows. I’m using Vista64.
  • Text must exist in a table cell
  • The text must not be wrapped by any other element
  • A portion of text must be italicized via the EM element
  • A portion of text must be superscripted via the SUP element
  • The wrapping TD element must have its VALIGN attribute set to “top”

Obviously this is pretty obscure. The key to producing this is the td/valign and the EM and SUP elements. The EM’d and SUP’d text must be on the same line and not be wrapped by anything at all within the TD. By either removing the SUP element or the TD VALIGN the issue goes away. Here are the test cases:

...
  // view this code in chrome and the emphasized "Motor Trend" will appear below the baseline
  
  </tr></table>
  
  // Next, lets remove the TD valign - and everything appears normal in Chrome
  
2012 Motor Trend Car of the Year®
2012 Motor Trend Car of the Year®
// Next, lets remove the SUP element and return the TD valign - and everything appears normal in Chrome
2012 Motor Trend Car of the Year®
// this is the "control" - outside of a table everything is on the baseline.

2012 Motor Trend Car of the Year®

...

And a screen shot of the above (or view it here):

This behavior only happens in Chrome. IE 7, 8, 9 and FireFox don’t exhibit this behavior. My fix to this problem was to set the vertical alignment of the EM element like so:

...

  (function fixChrome(){
     if (navigator.userAgent.toLowerCase().indexOf('chrome') != -1){
       document.write('');
     }
  })();

  
2012 Motor Trend Car of the Year®
...

And with that, the above scenario displays as desired within Chrome.