当前位置: 网站建设 > 网页设计 > 建站经验 >

IE6绝对定位的bug及其解决办法

时间:2013-03-02 03:48来源:未知 作者:admin 点击:

标签:IE6绝对定位的bug及其解决办法 及其(3)解决(48)网站建设(1202)IE(2)Bug(15)办法(18)定位(32)绝对(9)IE6(28)
--> [网站建设之]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
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及其解决办法相关文章
上一篇:IE6灵异事件之歌剧院魅影 下一篇:IE8中text-align center偏左的解决办法
回到顶部