IE6/IE7下肯定精准定位position:absolute和margin的矛盾

2021-01-20 11:52 jianzhan

最先大家看来1个编码:

拷贝编码
编码以下:

<div id=”layer1″ style=”margin:20px; border:1px solid #F88; width:400px; “> <div id=”layer2″ style=”position:absolute; background-color:#ccc;”>Absolute (layer2)</div> <div id=”layer3″ style=”margin:30px auto; width:200px; height:80px; background-color:#36F;”>Normal Text Content (layer3)</div> </div>

这个编码的实际效果以下:

在FF和IE8下都沒有任何难题的,可是在IE6和IE7下有人以下两个bug:

a, 肯定界定(position:absolute)的邻近元素margin-top无效,但假如邻近元素(layer3)去掉width特性,margin-top又会起效。 b, layer1没法靠左,间距左侧的间距为layer1的第1个非肯定界定元素(layer3)的margin-left值。 处理方式:

1,加上编码:<!–[if lte IE 7]><div></div><![endif]–>,这也是在网上寻找的可以彻底处理难题的方式。即编码变成:

拷贝编码
编码以下:

<div style=”margin:20px; border:1px solid #F88; width:400px; “> <div style=”position:absolute; background-color:#ccc;”>Absolute (layer2)</div> <!–[if lte IE 7]><div></div><![endif]–> <div style=”margin:30px auto; width:200px; height:80px; background-color:#36F;”>Normal Text Content (layer3)</div> </div>

2,外围元素加position:relative界定,肯定界定元素加left和top界定。此方式能够处理第2个bug,没法处理第1个bug。也是有说法用padding-top取代margin-top的,可是有时能够这样,有时终究不好的。编码为:

拷贝编码
编码以下:

<div style=”margin:20px; border:1px solid #F88; width:400px; position:relative”> <div style=”position:absolute; background-color:#ccc; left:0; top:0;”>Absolute (layer2)</div> <div style=”margin:30px auto; width:200px; height:80px; background-color:#36F;”>Normal Text Content (layer3)</div> </div>

3,这是本文所要论述的方式,相对性来讲较为完善1些。给肯定界定元素加上“background-color:#CCC; float:left; display:inline;”界定,情况色干万不能以去掉,假如沒有情况色就加1个全透明(background-color:transparent;)。即编码变成:

拷贝编码
编码以下:

<div style=”margin:20px; border:1px solid #F88; width:400px;”> <div style=”position:absolute; background-color:#ccc; float:left; display:inline;”>Absolute (layer2)</div> <div style=”margin:30px auto; width:200px; height:80px; background-color:#36F;”>Normal Text Content (layer3)</div> </div>

纠结了两天,時刻都在思索这个难题的处理思路,终于处理了。谢谢桃子。