- From: Greg Whitworth <gwhit@microsoft.com>
- Date: Tue, 16 Sep 2014 16:25:25 +0000
- To: Morten Stenshorne <mstensho@opera.com>, Tab Atkins Jr. <jackalmage@gmail.com>
- CC: "www-style@w3.org" <www-style@w3.org>
> Greg Whitworth <gwhit@microsoft.com> writes: > > > Hello all, I have the great pleasure of bringing another 2.1 interop > > issue to the list for discussion very close to the last one regarding > > placement of absolute positioned boxes [1]. This one is interesting as > > Chrome and FF place the box all the way to the left of the viewport > > while IE places it at the center. Based on the 2.1 spec [3], I believe > > that IE is doing the correct thing in this case. Here is a fiddle of > > the interop issue: http://jsfiddle.net/9wsegz9s/ and here is the > > markup with style inline for discussion: > > > > <body style="text-align: center;"> > > <div style="display: inline; position: relative;"> > > <div id="parent" style="display: block; position: static;"> > > <div id="child" style=" display: block; > > padding: 5em; background-color: green; position: absolute; > > ></div> > > Note: Missing '"' after 'absolute'. > > > </div> > > </div> > > </body> > > > > Since the wrapper box should be positioned at the center of the > > viewport due to text-align[2] the next inline box should be starting > > its positioning there as well. Thoughts? > > text-align only affects inline content, not blocks. BODY will take up the entire > viewport width minus margins, just like it does normally. The display:inline > DIV will be empty, since it only contains block children (but yeah, its contents, > had there been any, would be centered). The containing block of the > "parent" DIV is BODY, so it will fit perfectly inside BODY, taking up all > horizontal space. The absolutely positioned "child" DIV has no position > specified, so we will try to position it as if it were not absolutely positioned > [1]. If it were not absolutely positioned, it would be positioned at the top/left > edge of "parent", i.e. flush with the left content edge of BODY. text-align is > completely irrelevant here (but if you put text inside "child", it should of > course be centered within "child"). If "left" or "right" properties had been > specified on "child", on the other hand, they would be resolved relatively to > the actual containing block, which is the inline DIV (since it's the nearest non- > statically positioned ancestor), which is centered. left:0 would place the left > edge of "child" in the center. > > So if IE centers "child", it's wrong (although here on my computer IE gets it > right too (that's IE10); i.e. it left-aligns "child"). The other browsers are right. > > Also, please beware of quirks mode! It seems that you're running the test in > quirks mode, and as far as I know, in IE, that will result in the document being > rendered using an older engine that's pretty much compatible with IE5 or so. > Better add <!DOCTYPE html>. Gotcha, indeed it does seem to be a regression on our end. I'll get this submitted and fixed, thanks for the feedback! Greg
Received on Tuesday, 16 September 2014 16:25:55 UTC