- From: Alan Gresley <alan@css-class.com>
- Date: Sun, 28 Aug 2011 02:13:02 +1000
- To: Boris Zbarsky <bzbarsky@MIT.EDU>
- CC: www-style list <www-style@w3.org>
On 27/08/2011 3:13 PM, Boris Zbarsky wrote: > I never really got a useful response to > http://lists.w3.org/Archives/Public/www-style/2010Feb/0200.html > > In particular, it's not clear to me whether CSS2.1 even defines the > behavior. If it does, what's the right behavior? If it does not, what > CSS3 module is planned to define it? > > -Boris I need to check into this test further. One question that comes to mind is can a line box overflow it's container? My understanding of CSS2.1 is that this line box must be split over two lines since there are two inline boxes. I have not checked quirks mode but I can tell you that Opera 11.50 shows almost identical to IE9. The difference is only seen by adding some background colors. I have added to the test (code below) by adding a Y after the first span and adding a Z before the second span. No UAs show the same. <!DOCTYPE html> <div style="width: 100px; border: 1px solid green"> <span style="margin-right: 200px; background: rgba(0,0,255,0.5)"></span> <span style="margin: 0 -10px; background: rgba(255,0,0,0.5);"> <span style="display: inline-block; width: 20px; background: rgba(0,255,0,0.5);">Text</span> </span> </div> <div style="width: 100px; border: 1px solid green"> <span style="margin-right: 200px; background: rgba(0,0,255,0.5)">X</span> <span style="margin: 0 -10px; background: rgba(255,0,0,0.5);"> <span style="display: inline-block; width: 20px; background: rgba(0,255,0,0.5);">Text</span> </span> </div> <div style="width: 100px; border: 1px solid green"> <span style="margin-right: 200px; background: rgba(0,0,255,0.5)"></span>Y <span style="margin: 0 -10px; background: rgba(255,0,0,0.5);"> <span style="display: inline-block; width: 20px; background: rgba(0,255,0,0.5);">Text</span> </span> </div> <div style="width: 100px; border: 1px solid green"> <span style="margin-right: 200px; background: rgba(0,0,255,0.5)">X</span>Y <span style="margin: 0 -10px; background: rgba(255,0,0,0.5);"> <span style="display: inline-block; width: 20px; background: rgba(0,255,0,0.5);">Text</span> </span> </div> <div style="width: 100px; border: 1px solid green"> <span style="margin-right: 200px; background: rgba(0,0,255,0.5)"></span> Z<span style="margin: 0 -10px; background: rgba(255,0,0,0.5);"> <span style="display: inline-block; width: 20px; background: rgba(0,255,0,0.5);">Text</span> </span> </div> <div style="width: 100px; border: 1px solid green"> <span style="margin-right: 200px; background: rgba(0,0,255,0.5)">X</span> Z<span style="margin: 0 -10px; background: rgba(255,0,0,0.5);"> <span style="display: inline-block; width: 20px; background: rgba(0,255,0,0.5);">Text</span> </span> </div> -- Alan Gresley http://css-3d.org/ http://css-class.com/
Received on Saturday, 27 August 2011 16:13:10 UTC