论坛交流
首页| 办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库 |  Asp.net  | Flash AS
当前位置 > 文字教程 > div+css教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准，xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

Div+CSS教程:如何解决IE6绝对定位错位问题

文章类别：div+css | 发表日期:2012-5-18 10:48:18

Div+CSS教程:如何解决IE6绝对定位错位问题


    我们经常会碰到在IE6中设置绝对定位，在left与bottom都会出现错位问题；
    那么今天大家配合以下代码，可以帮理解这个问题，比较下现代浏览器与IE6的差异就知道问题在哪了；
    另外，对于定位还没掌握好的同学，看看这个是很有帮助的，记得用firebug调试，尝试着修改几个样式。

<!doctype html>
 
<html>
 
        <head>
 
                <meta charset="utf-8" />
 
                <title>测试模型</title>
 
                <link href="css/test.css" type="text/css" rel="stylesheet" />
 
                <style>
 

                </style>
 
                <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
 
        </head>
 
<body style="width:900px;margin:0 auto 800px auto;">
 
<p>IE6下的left定位错误</p>
 
<div style="position:relative; border:1px solid orange; text-align:center;">
 
        <span>父级div，文本居中</span>
 
        <div style="position:absolute;top:0;left:0;background:#CCC;">文本居中的子元素div，绝对定位top:0;left:0;</div>
 
</div>
 

<hr />
 

<div style="position:relative; border:1px solid orange; text-align:right;">
 
        <span>父级div，文本居右</span>
 
        <div style="position:absolute;top:0;left:0;background:#CCC;">文本居右的子元素div，绝对定位top:0;left:0;</div>
 
</div>
 

<hr/>
 

<p>IE6下的left定位错误的解决方法1：父级元素添加zoom:1;</p>
 

<div style="position:relative; border:1px solid orange; text-align:center;zoom:1;">
 
        <span>父级div，文本居中，加了zoom:1;</span>
 
        <div style="position:absolute;top:0;left:0;background:#CCC;">文本居中的子元素div，绝对定位top:0;left:0;</div>
 
</div>
 

<hr/>
 

<p>IE6下的left定位错误的解决方法2：父级元素添加width;</p>
 

<div style="position:relative;border:1px solid orange;text-align:right;width:99%;">
 
        <span>父级div，文本居右，加了width:99%;</span>
 
        <div style="position:absolute;bottom:0;left:0;background:#CCC;">文本居右的子元素div，绝对定位top:0;left:0;</div>
 
</div>
 

<hr/>
 

<p>IE6下的bottom定位错误</p>
 

<div style="position:relative;border:1px solid orange;text-align:center;">
 
        <span>父级div，文本居中</span>
 
        <div style="position:absolute;bottom:0;left:0;background:#CCC;">bottom定位错位了。文本居中的子元素div，绝对定位bottom:0;left:0;</div>
 
</div>
 

<hr/>
 

<div style="position:relative;border:1px solid orange;text-align:right;">
 
        <span>父级div，文本居右</span>
 
        <div style="position:absolute;bottom:0;left:0;background:#CCC;">bottom定位错位了。文本居右的子元素div，绝对定位bottom:0;left:0;</div>
 
</div>
 

<hr/>
 

<p>IE6下的bottom定位错误的解决方法1：父级元素添加zoom:1;</p>
 

<div style="position:relative;border:1px solid orange;text-align:center;zoom:1;">
 
        <span>父级div，文本居中，加了zoom:1;</span>
 
        <div style="position:absolute;bottom:0;left:0;background:#CCC;">文本居中的子元素div，绝对定位bottom:0;left:0;</div>
 
</div>
 

<hr/>
 

<p>IE6下的left定位错误的解决方法2：父级元素添加height;</p>
 

<div style="position:relative;border:1px solid orange;text-align:right;height:60px;">
 
        <span>父级div，文本居右，加了height:60px;</span>
 
        <div style="position:absolute;bottom:0;left:0;background:#CCC;">文本居右的子元素div，绝对定位bottom:0;left:0;</div>
 
</div>
 
<br/>
 

        </body>
 
</html>

    IE6中很多Bug都可以通过触发layout得到解决，以上的解决方法无论是设置zoom:1还是设置width和height其实都是为了触发layout。其实不管left还是bottom错位，只要触发layout，就能正常定位了；

下列的CSS属性或取值会让一个元素获得layout：
    position:absolute 绝对定位元素的包含区块(containing block)就会经常在这一方面出问题：
1、float:left|right 由于layout元素的特性，浮动模型会有很多怪异的表现；
2、display:inline-block 当一个内联级别的元素需要layout的时候就往往符用它，这也可能也是这个CSS属性的唯一效果—-让某个元素有layout
3、width: 除auto外的任何值
4、height: 除auto外的任何值
5、zoom: 除auto外的任何值

视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058