《
IE6绝对定位的bug及其解决办法》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302335D2013.htm
--> [
网站建设之]IE6相对定位的bug及其解决措施
IE6绝对定位的bug及其解决方法。position:absolute定位在IE6下存在left跟bottom的定位错误问题:
<!–IE6下的left定位过错–>
<div style=”position:relative;border:1px solid orange;text-align:center;”>
<a href=”
<div style=”position:absolute;top:0;left:0;background:#CCC;”>jzxue.com</div>
</div>
<!–IE6下的left定位毛病–>
<hr />
<div style=”position:relative;border:1px solid orange;text-align:right;”>,
IE6灵异事件之歌剧院魅影;
<a href=”
<div style=”position:absolute;top:0;left:0;background:#CCC;”>jzxue.com</div>
</div>
上面这段代码在IE6中定位错误。
解决办法有两种:
1、给父层设置zoom:1触发layout。
2、给父层设置宽度(width)。
div css xhtml xml Example Source Code Example Source Code [www,
IE6到底支持不支持!important.jzxue.com]
<!–解决办法1 zoom:1–>
<hr />
<div style=”position:relative;border:1px solid orange;zoom:1;text-align:center,
IE6中PNG图像不透明是什么问题;”>
<a href=”
<div style=”position:absolute;top:0;left:0;background:#CCC;”>jzxue.com</div>
</div>
<!–解决方法2 设置width–>
<hr />
<div style=&rdquo,
IE6与W3C标准的盒模型差异;position:relative;width:99%;border:1px solid orange;text-align:center;”>
<a href=”
<div style=”position:absolute;top:0;left:0;background:#CCC;”>jzxue.com</div>
</div>
下面的这段代码在IE6下,bottom定位错误:
div css xhtml xml Example Source Code Example Source Code [www.jzxue.com]
<!–IE6下的bottom定位错误–>
<hr />
<div style=”position:relative;border:1px solid orange;text-align:center;”>
<a href=”
<div style=”position:absolute;bottom:0;left:0;background:#CCC;”>jzxue.com<,
IE6-IE7-IE8-FireFox css的浏览器兼容技巧;/div>
</div>
解决办法和left定位相似:
方法1是给父层设置zoom触发layout。
方法2是给父层设置高度(height)。
<!–解决方法1 zoom:1–>
<hr />
<div style=”position:relative;border:1px solid orange;zoom:1;text-align:center;”>
<a href=” />
<a href=”
<div style=”position:absolute;bottom:0;left:0;background:#CCC;”>jzxue.com</div>
</div>,
IE6,7下实现white-space pre-wrap;;
<!–解决方式2 设置height–>
<hr />
<div style=”position:relative;height:60px,
IE6 IE7 IE8 Firefox专属CSS hack;border:1px solid orange;text-align:center;”>
<a href=”
<div style=”position:absolute;bottom:0;left:0;background:#CCC;&rdquo,
IE6 7 8下cssText值与IE9 Firefox Safari Chrome Opera不同;>jzxue.com</div>
</div>
IE6中良多Bug都能够通过触发layout得到解决,以上的解决方法无论是设置zoom:1仍是设置width和height实在都是为了触发layout。下列的CSS属性或取值会让一个元素取得layout:
position:absolute 绝对定位元素的包括区块(containing block)就会常常在这一方面出问题
float:left|right 因为layout元素的特征,浮动模型会有许多怪异的表示
display:inline-block 当一个内联级别的元素须要layout的时候就往往符用到它,这也可能也是这个CSS属性的独一后果—-让某个元素有layout
width: 除auto外的任何值
height: 除auto外的任何值
zoom: 除auto外的任何值 Tag: 定位 绝对 及其 办法 解决 定位 绝对 及其 办法  ,
IE10对CSS3新特性的支持和HTML5新特性的支持; 解决  ,
IE&FF css hack集;
(责任编辑:网站建设)
IE6绝对定位的bug及其解决办法相关文章