It seems that the em calculations in Google chrome are slightly off track. Following is a small piece of HTML using DOJO toolkit’s default CSS. Its font size and line height calculations are based on http://24ways.org/2006/compose-to-a-vertical-rhythm
1: <!DOCTYPE html>2: <html>3: <head>4: <style>5: @import url("http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css");6: </style>7: </head>8: <body>9: <blockquote>10: Testing dojo blockquote.11: </blockquote>12: </body>13: </html>
The relevant CSS is presented below:
1: body {2: font: 12px Myriad,Helvetica,Tahoma,Arial,clean,sans-serif;3: *font-size: 75%;4: }5:6:7: blockquote {8: font-size: 0.916em;9: margin-top: 3.272em;10: margin-bottom: 3.272em;11: line-height: 1.636em;12: padding: 1.636em;13: border-top: 1px solid #ccc;14: border-bottom: 1px solid #ccc;15: }16:17:
Now if we look at this block-quote’s layout in Firefox (4), it looks like as follows:
While the layout in Google Chrome (11.0) looks like:
You can notice that Firefox reports the padding to be 18 pixels, while Chrome reports it to be 17 pixels. Similarly, Firefox says the margin to be 36 pixels while Chrome considers it to be 35 pixels.
I think at least one of them is wrong.
Looking at the stylesheet, the computation goes like this:
font-size = 12 * 0.916 = 10.992 pixels
padding = line-height = font-size * 1.636 = 17.983 pixels
margin-top = margin-bottom = font-size * 3.272 = 35.965 pixels
Looking at computed styles, we can notice that for both Firefox and Chrome, the font-size is coming out to be 11pixels. It looks like Chrome is truncating margins and padding while it is rounding the font size.
No comments:
Post a Comment