Re: Question about inline layout and margins, again

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