Permalink
Browse files

Tweak the order in which styles are applied to the VML container elem…

…ent, to avoid triggering the hasLayout margin-top collapsing bug. Big thanks to DD_roundies which showed that the bug could be avoided.
  • Loading branch information...
1 parent 468e203 commit 3c694ae692a8d210cc14ee56460f9ac86d79302f @lojjic committed Feb 1, 2013
Showing with 58 additions and 18 deletions.
  1. +22 −4 sources/RootRenderer.js
  2. +36 −14 tests/margin-collapsing-tests.html
View
@@ -53,21 +53,27 @@ PIE.RootRenderer = PIE.RendererBase.newRenderer( {
boxPos = 'absolute';
}
+ // IMPORTANT: in order to avoid triggering the hasLayout collapsing-top-margin bug in IE6/7,
+ // we *must* include background:none in the styles, and we *cannot* include a z-index during
+ // the initial render. The z-index can be set after insertion instead safely. For some reason
+ // that makes no logical sense whatsoever, this exact combination avoids the bug. Go figure.
+ // Special thanks to Drew Diller, who did this in DD_roundies (though who knows if it was
+ // done intentionally for this reason since it's not commented as such or if it was just a
+ // very lucky coincidence...)
return 'direction:ltr;' +
- 'position:absolute;' +
'behavior:none !important;' +
'position:' + boxPos + ';' +
+ 'background:none;' +
'left:' + x + 'px;' +
'top:' + y + 'px;' +
- 'z-index:' + ( tgtPos === 'static' ? -1 : tgtCS.zIndex ) + ';' +
- 'display:' + ( vis.visible && vis.displayed ? 'block' : 'none' );
+ ( vis.visible && vis.displayed ? '' : 'display:none;' );
},
updateBoxStyles: function() {
var me = this,
boxEl = me.getBoxEl();
if( boxEl && ( me.boundsInfo.positionChanged() || me.styleInfos.visibilityInfo.changed() ) ) {
- boxEl.style.cssText = me.getBoxCssText();
+ boxEl.style.cssText = me.getBoxCssText() + 'z-index:' + me.getBoxZIndex();
}
},
@@ -89,6 +95,14 @@ PIE.RootRenderer = PIE.RendererBase.newRenderer( {
},
/**
+ * Determine the target z-index for the box el
+ */
+ getBoxZIndex: function() {
+ var cs = this.targetElement.currentStyle;
+ return cs.position === 'static' ? '-1' : cs.zIndex;
+ },
+
+ /**
* Render any child rendrerer shapes which have not already been rendered into the DOM.
*/
updateRendering: function() {
@@ -135,6 +149,10 @@ PIE.RootRenderer = PIE.RendererBase.newRenderer( {
me.getPositioningElement().insertAdjacentHTML( 'beforeBegin', markup.join( '' ) );
+ // Can't include z-index in the initial styles to prevent top-margin collapsing
+ // bug (see comment above in #getBoxCssText), so we set it here after insertion.
+ me.getBoxEl().style.zIndex = me.getBoxZIndex();
+
me._renderedShapes = queue;
me._shapeRenderQueue = 0;
}
@@ -6,47 +6,57 @@
<title>CSS3 PIE Margin Test</title>
<meta name="robots" content="noindex, nofollow" />
-
+
+<!--
+ <script src="DD_roundies_0.0.2a.js"></script>
+ <script>
+ DD_roundies.addRule('#test, #test .inside, #test2 .inside, #control, #between .topmargin', 5);
+ </script>
+-->
+
<style type="text/css" media="screen">
.box {
- -moz-border-radius: 5px; /* FF1+ */
- -webkit-border-radius: 5px; /* Saf3+, Chrome */
- -khtml-border-radius: 5px; /* Konqueror */
- border-radius: 5px; /* Standard. IE9 */
-
+ border-radius: 5px;
margin: 20px 0;
overflow: hidden;
}
.inside {
+ position: relative;
background: #fff;
- -moz-border-radius: 5px; /* FF1+ */
- -webkit-border-radius: 5px; /* Saf3+, Chrome */
- -khtml-border-radius: 5px; /* Konqueror */
- border-radius: 5px; /* Standard. IE9 */
+ border-radius: 5px;
margin: 20px;
}
#test {
behavior: url(../build/PIE.htc);
background: red;
}
-
+
#test .inside {
behavior: url(../build/PIE.htc);
}
-
+
#test2 {
background: red;
position: relative;
}
#test2 .inside {
behavior: url(../build/PIE.htc);
}
-
+
#control {
behavior: url(../build/PIE.htc);
- background: green;
+ background: red;
}
+
+ #between {
+ background: red;
+ }
+ #between .topmargin {
+ behavior: url(../build/PIE.htc);
+ margin-top: 20px;
+ }
+
</style>
</head>
@@ -73,5 +83,17 @@
This box has PIE on the outside, but not on the inside.
</div><!--/test2-->
</div><!--/test-->
+
+ <div id="between" class="box">
+ <div class="inside">
+ These boxes should maintain their margin between.
+ </div>
+ <div class="inside topmargin">
+ These boxes should maintain their margin between.
+ </div>
+ <div class="inside topmargin">
+ These boxes should maintain their margin between.
+ </div>
+ </div>
</body>
</html>

1 comment on commit 3c694ae

xem commented on 3c694ae Feb 14, 2013

whoa.

Please sign in to comment.