来看看：CSS实例教程:IE6相对定位错位成绩的办理计划
更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。破洛洛文章简介：IE6中良多Bug都能够经由过程触发layout失掉办理，以上的办理办法不管是设置zoom:1仍是设置width和height实在都是为了触发layout。实在不论left仍是bottom错位，只需触发layout，就可以一般定位了。
在IE6中设置相对定位，在left与bottom城市呈现错位成绩。
共同以下代码，能够帮你了解这个成绩，对照下古代扫瞄器与IE6的差别就晓得成绩在哪了。
别的，关于定位还没把握好的同砚，看看这个是很有匡助的，记得用firebug调试，实验着修正几个款式。
<!doctypehtml>
<html>
<head>
<metacharset="utf-8"/>
<title>测试模子</title>
<linkhref="css/test.css"type="text/css"rel="stylesheet"/>
<style>
</style>
<scriptsrc="js/jquery-1.7.2.min.js"type="text/javascript"></script>
</head>
<bodystyle="width:900px;margin:0auto800pxauto;">
<p>IE6下的left定位毛病</p>
<divstyle="position:relative;border:1pxsolidorange;text-align:center;">
<span>父级div，文本居中</span>
<divstyle="position:absolute;top:0;left:0;background:#CCC;">文本居中的子元素div，相对定位top:0;left:0;</div>
</div>
<hr/>
<divstyle="position:relative;border:1pxsolidorange;text-align:right;">
<span>父级div，文本居右</span>
<divstyle="position:absolute;top:0;left:0;background:#CCC;">文本居右的子元素div，相对定位top:0;left:0;</div>
</div>
<hr/>
<p>IE6下的left定位毛病的办理办法1：父级元素增加zoom:1;</p>
<divstyle="position:relative;border:1pxsolidorange;text-align:center;zoom:1;">
<span>父级div，文本居中，加了zoom:1;</span>
<divstyle="position:absolute;top:0;left:0;background:#CCC;">文本居中的子元素div，相对定位top:0;left:0;</div>
</div>
<hr/>
<p>IE6下的left定位毛病的办理办法2：父级元素增加width;</p>
<divstyle="position:relative;border:1pxsolidorange;text-align:right;width:99%;">
<span>父级div，文本居右，加了width:99%;</span>
<divstyle="position:absolute;bottom:0;left:0;background:#CCC;">文本居右的子元素div，相对定位top:0;left:0;</div>
</div>
<hr/>
<p>IE6下的bottom定位毛病</p>
<divstyle="position:relative;border:1pxsolidorange;text-align:center;">
<span>父级div，文本居中</span>
<divstyle="position:absolute;bottom:0;left:0;background:#CCC;">bottom定位错位了。文本居中的子元素div，相对定位bottom:0;left:0;</div>
</div>
<hr/>
<divstyle="position:relative;border:1pxsolidorange;text-align:right;">
<span>父级div，文本居右</span>
<divstyle="position:absolute;bottom:0;left:0;background:#CCC;">bottom定位错位了。文本居右的子元素div，相对定位bottom:0;left:0;</div>
</div>
<hr/>
<p>IE6下的bottom定位毛病的办理办法1：父级元素增加zoom:1;</p>
<divstyle="position:relative;border:1pxsolidorange;text-align:center;zoom:1;">
<span>父级div，文本居中，加了zoom:1;</span>
<divstyle="position:absolute;bottom:0;left:0;background:#CCC;">文本居中的子元素div，相对定位bottom:0;left:0;</div>
</div>
<hr/>
<p>IE6下的left定位毛病的办理办法2：父级元素增加height;</p>
<divstyle="position:relative;border:1pxsolidorange;text-align:right;height:60px;">
<span>父级div，文本居右，加了height:60px;</span>
<divstyle="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相对定位元素的包括区块(containingblock)就会常常在这一方面出成绩
float:left|right因为layout元素的特征，浮动模子会有良多奇异的体现
display:inline-block当一个内联级其余元素必要layout的时分就常常符用到它，这也大概也是这个CSS属性的独一效果—-让某个元素有layout
width:除auto外的任何值
height:除auto外的任何值
zoom:除auto外的任何值
</p>
一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
页:
[1]