IE6浏览器兼容问题总结及CSS排版注意地方.doc

IE6浏览器兼容问题总结 IE6浏览器兼容问题总结及CSS排版注意地方下面列举IE6中10个不得不注意的问题：1. 使用 DOCTYPE你需要在HTML页面的最顶部加上DOCTYPE类型，当然， strict版是值得推荐的，例如：或者, XHTML页面的!DOCTYPE：你最不想看到的是，IE6进入怪癖模式 其实已经够多怪癖了。2. 设置position: relative设置position:relative解决了不止一个问题，特别当需要设置对齐的时候。很明显，你需要明白的一点是，绝对定位是相对来说的。说不定，因为你没有设置，而不知道东西都飞到那去了。比如，你设计了每篇文章前都有一张图片，最后，你发现，只有一张图片在页面上，或许，是他们重叠了。3. 给浮动元素设置 display:inline 值这源于著名的IE6双倍外边距BUG，例如，你给一个DIV设计了浮动，并且，设置了margin-left:5px;，在IE6中很可能就是margin-left:10px了，这里，给浮动元素设置 display:inline；，即可解决问题。4. 为元素设置 hasLayout很多IE6（或IE7）的问题可以用设置hasLayout值的方法来解决。（如果你不知道hasLayout是什么，请看这里）最简单的给元素设置hasLayout值的方法是给加上CSS 的height或width(当然，zoom也可以用，但这不是CSS的一部分)。设置一个具体的值是推荐的，但有时候并不一定知道高度多少，这里，你可能会用到height:1%。如果父元素没有设置高度，那么元素的物理高度并不会改变，但是，已经具备hasLayout属性。5. 解决字符重复出现的问题复杂的布局可能导致一些浮动元素里面的文字，出现在清理浮动位置的下面。这是一个奇怪的问题，下面这此可以帮你解决：确保浮动元素设置了 display:inline;在浮动元素中使用 margin-right:-3px;在浮动元素的最后一个元素后加上一个IE注释，例如： 把你的注释放这里 在最后的元素中加上一个DIV(这以设置width 为90% 或者其他相似的高度)UPDATE: 最简单的方法是删除掉所有注释。（感谢恬玮儿的提示，我自己并没有遇到过，不过，google了一下，发现这个方法也可以解决，并且，这是值得推荐的一个方法。）你可以到中查看更多关于这个的解释。6.只在标签中使用hover，IE6只支持标签显示hover样式当然，你还是可以通过JS来解决这个方法。但是， 这关于到可访问性的问题。建议不要把重要的内容设置在利用JS来实现的hover中。7. 使用!important 或高级选择器来区分IE浏览器比如min-height可以避免使用CSS来实现对IE的兼容。#element min-height: 20em; height: auto !important; height: 20em; /* 让IE6显示这个高度 */ IE6 并不能正确地识别min-height，可以设置固定的高度，让IE6解析为20em。即使如此，它还是会因为内容的尺寸扩大而改变高度。而另一个方法是使用高级选择器：#element min-height: 20em; height: 20em; /* 忽略 IE6 */ #elementid height: auto; 8. 避免按比例确定的尺寸比例会让IE6变得错乱，除非你给父元素添加一个确切的高度。不然，给其他的加上!important，例如：body margin: 2% 0 !important; margin: 20px 0; /* IE6 可读 */ 9. 尽早测试，经常测试别忘记尽早测试，经常测试， 除非你的程度已经完成。不然，你可能花更多的时间来解决IE6的问题。一般情况下，如果你的网站能在IE6和firefox下良好表现，估计其他浏览器就不会有什么大问题了。10. 重构你的代码很多情况下，解决一个问题，可能比重构你的代码要花更多的时间。从页面开始布局设计初就考虑到各个浏览器的问题，留出充足的余量和给各个浏览器留出充足的发挥空间，这样的页面兼容性才是最好的。下面就来几个问题：1、div border不能显示问题描述：用一个div A层中间放了几个div B来存放内容，因为内容是不固定的，于是就使用了对B层使用了float，让A层自适应高度，后面对A层加上边框，在ie中能显示，但是在firefox中就始终没法显示。问题分析：B层使用了float，位置浮起，A层边框不能显示解决方案：对A开始使用一个浮动清除2、cms ie6的内容页面不能全部显示问题描述：cms内容页中ie6能显示部分的内容，在其他浏览器中显示能正常全部显示问题分析：查看代码，其中有.contentheight:auto !importan;height:500px;min-height:500px;，应该是布局是为了好看，留下了500px的高度，其实内容页自适应就可以了，在ie6中的min-height是不兼容的于是就是固定高度500px，超出后也不能显示了。解决法案：.contentheight:auto;高度自适应3、关于margin和padding撑破外层div的问题问题描述：使用div margin padding 布局，整体框架设定号，开始添加内容时使用了margin padding对内容定位，最终在ie6中将整个div撑破，排版打乱问题分析：ie6中间margin+padding+border+height（width）=盒子的实际尺寸，于是开始设计的尺寸加上定位的margin和padding就导致了撑破div解决方案：定位改为position定位，使用position=relative相对于本身原位置定位，自身位置保留，相邻div依靠原位置，定位可以把原来margin和padding多撑出位置重叠在一起，多出重叠部分无内容对用户体验上无影响。4、使用jquery slidetoggle 出现闪烁问题问题描述：使用jquery slidetoggle ie6和ie7出现闪烁问题问题分析：查找资料 对slidetoggle 的子元素使用了position:relative position:absolute 等出现闪烁，自查原因使用了float:left出现闪烁解决方案：解决方案：添加上则可以解决问题，但是本句话前不能有其他注释，开始未能解决时因为在页面的开始有了一个空注释（如问题5中），当问题5解决了，后面反思，得出了这个方案。其实前面在网上也查了相关资料，解决法案正是如此，但是由于前面有一个空注释，所以没有出现效果，后面把空注释解决了，才恍然醒悟。5、静态页布局兼容大部分浏览器，加上动态数据后在ie6 和 ie7中居中的内容就偏左了问题描述：做静态页布局时，很是仔细，因为知道不用css hack的布局做出来的兼容性才是最好的，于是很是仔细的做完，测试了各个浏览器，兼容性也很好，但加上数据后就出现偏移了。问题分析：经过再三的坚持，发现，在输出数据时，页面的头部多了一个空注释，于是就偏移了。解决方案：去除页面开始的6、使用jquery slidetoggle是子元素出现快于父元素出现和消失，但下拉还未完成，子元素出现一闪出现，给人以突兀的感觉问题描