CSS line-height property not supported by WebKit browsers?

Bonesnap

I've noticed a peculiar behaviour with the CSS line-height property; it doesn't seem to be recognized by WebKit browsers (I've tested with Chrome and Safari).

I've created a forum and when the posts are listed in a thread, I felt the gap between the posts was too much with a standard <br /> tag. Removing the tag left no gap at all, so I Googled a bit and discovered the line-height property. I set it to 40% height and voila, it displays correctly in every browser except WebKit browsers (even in IE 6 it displays properly).

According to W3Schools, the line-height property is supported in all major browsers. I even tried setting the height to a finite number in pixels, but again no change. For whatever reason, WebKit browsers ignore the property and just render the standard height for a <br /> tag.

Has anyone come across this before, or have any insight? Thanks! 🙂

Res

Safari has supported it since version 1.0 and webkit since 85. You might have some other condition that is causing it to fail, or a style being applied that breaks it in webkit? CSS can be a little you know what when getting it to work with all browsers. Not the best solution but it may be more compatible to use a margin or padding to get the spacing if possible.

Bonesnap

I've double-checked my code a couple of times; it's a simple <br /> tag between <div> elements. shrug

I've fiddled around with the padding and whatnot before resorting to the line-height property. It's not a huge deal anyway. I just find it strange that W3Schools says it's fully supported in WebKit browsers but they ignore it.

johanafm

Showing actual code is always a good idea to get a proper answer. The best I can do is GUESS that you are setting line-height for the br element, and I believe webkit has it right by simply disregarding it, since there aren't multiple lines INSIDE the br element. However

<body style="line-height:40px; font-size: 12px;">
Trying the<br/>
element inside body with 40px line-height
<div stlye="line-height: 16px; border: 1px solid black;">
Trying the<br/>
element inside a div with 16px line-height.
</div>
</body>

And you should probably rather set margin than use a br element anyway.