- From: Boris Zbarsky <bzbarsky@MIT.EDU>
- Date: Tue, 23 Feb 2010 13:30:04 -0500
- To: www-style list <www-style@w3.org>
Consider the following testcase:
<!DOCTYPE html>
<div style="width: 100px; border: 1px solid green">
<span style="margin-right: 200px"></span>
<span style="margin: 0 -10px">
<span style="display: inline-block; width: 20px">Text</span>
</span>
</div>
What is the correct layout? Right now Opera and Webkit disagree, and
Webkit has different behavior between standards and quirks mode (looks
like in quirks it makes the first line 0-height if the line-break comes
right after the first span). Gecko's behavior matches Webkit's quirks
mode due to the right margin on that first span being ignored, but if I
change that it starts to match Opera in the sense that the second span
is also placed on the first line.
For extra confusion, if I change the testcase like so:
<!DOCTYPE html>
<div style="width: 100px; border: 1px solid green">
<span style="margin-right: 200px">X</span>
<span style="margin: 0 -10px">
<span style="display: inline-block; width: 20px">Text</span>
</span>
</div>
(added an X in the first span) then Gecko and Webkit agree and Opera
puts "Text" flush with the left border of the div (instead of 10px to
the left of that) for some reason.
What's the correct layout here and why?
-Boris
Received on Tuesday, 23 February 2010 18:30:39 UTC