- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Tue, 23 Feb 2010 12:43:59 -0600
- To: Boris Zbarsky <bzbarsky@mit.edu>
- Cc: www-style list <www-style@w3.org>
On Tue, Feb 23, 2010 at 12:30 PM, Boris Zbarsky <bzbarsky@mit.edu> wrote: > 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? Further confusion: <!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> makes Gecko put "Text" flush with the green border. ~TJ
Received on Tuesday, 23 February 2010 18:44:51 UTC