styling whitespace in html
here is a sample HTML file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<p>--------------------------------------</p>
<p><span style="font-size:100px"><span style="font-size:10px">line 1</span>X</span></p>
<p>--------------------------------------</p>
<p><span style="font-size:100px"><span style="font-size:10px">line 2</span></span></p>
<p>--------------------------------------</p>
</body>
</html&开发者_如何学Gogt;
The text "line 1" is next to a 100 point X character which obviously changes the height of the whole line. thus there is a bigger gap between the first and second row of dashes than between the second and third. no surprises so far :-
Now replace the X with a space. on IE8 or Firefox, the spacing of the lines is the same as it was when the X was there; however, on chrome or safari, line 1 becomes the same height as line 2 as if the style of the outer span does not apply to the space.
Is there a right/wrong answer to this behaviour or is it too fine detail to be covered by the HTML standard?
Believe it or not this is actually causing big hassle for me; the whitespace is being generated by something out of my control. Any thoughts of how to replicate the chrome/safar behaviour in the other browsers would be very welcome
Set min-height on each line and it won't decrease if text is missing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
p.line
{
min-height: 120px;
}
</style>
</head>
<body>
<p>--------------------------------------</p>
<p class="line"><span style="font-size:100px"><span style="font-size:10px">line 1</span>X</span></p>
<p>--------------------------------------</p>
<p class="line"><span style="font-size:100px"><span style="font-size:10px">line 2</span></span></p>
<p>--------------------------------------</p>
</body>
</html>
加载中,请稍侯......
精彩评论