html div+css 常见的浏览器兼容问题和解决方法.doc

aspx文件 在ie6中的css部分不起作用，放到页面却可以。解决方法分析。 你的css文件里是不是用了中文注释，如果用了请修改成英文注释，否则在IE6下会读取失败。 做了一个网站，静态页面兼容ie6 7 8、火狐浏览器但是程序员改成.net后，在ie6中却出现页面全部混乱的问题。 最后百度搜索了一下，有个朋友回答说，把css直接复制到页面里面起作用，但是放到css里面却出错。我试了下，把我的css也复制过去，果真起到了作用。但是一直想不通为什么。苦思冥想了一会，发现了我的css文件*{padding:0;margin:0;word-break:break-all;word-wrap:break-word;} 这个注释是用汉字注释的，我改成：后解决了问题。 最后看了网上找到的那位同仁的代码，看看他的问题在哪里，他没有注释，不过里面有个样式font-family:黑体在局部样式里面用了文字，在.net里面是没法识别的，也就是会出现整个这句样式都不被识别，只有ie6出现这个问题。 类似问题： div+css教程之常见的浏览器兼容问题及解决方法图片下方出现几像素的空白间隙问题说明：这个问题在ie6和ff（火狐）下经常见到,例如 divimg src=//div这个图片下面会有一条空白间隙，解决方法：给图上一个垂直方向的属性如:vertical-align: top(任意一个就行middle);这个问题从而延伸到，object(视频)和在火狐下也会出现类似的问题，解决方法一样。细心的朋友会发现在第二节ahuing的重置代码里就有这样一个全局定义object,textarea,img{vertical-align: top;} wrap 属性设置文本输入区内的换行模式 wrap=virtual 将实现文本区内的自动换行，以改善对用户的显示，但在传输给服务器时，文本只在用户按下 Enter 键的地方进行换行，其他地方没有换行的效果。 wrap=physical 将实现文本区内的自动换行，并以这种形式传送给服务器，就像用户真的那样键入的。因为文本要以用户在文本区内看到的效果传输给服务器，因为使用自动换行是非常有用的方法。 2.IE6双倍margin的BUG(双边距)问题说明：这是ie6一个著名的bug，当一个元素向一边浮动时，其它同一个方向如果有margin的话，ie6就会产生双倍的margin。例如：div style=float: left;margin-left: 10px;/div在ie6下显示会有margin-left:20px的距离解决方法：加个_display:inline:属性，例如div style=float: left;margin-left: 10px;_display: inline;/div3.ie6下的浮动元素和非浮动元素间出现3像素BUG问题说明：这也是ie6一个著名的bug,当一个元素浮动时，同级别的文字没有浮动，在ie6下它们之间就会产生3个像素的bug。例如：divimg style=float: left; src=/摘要摘要摘要摘要/div,图片和文字就会出现3像素解决方法：方法一，两个元素都浮动，如：divimg style=float: left; src=/span style=float: left;摘要摘要摘要摘要/span/div;方法二，这种设计时一般图片和文字要有间隙的，做个ie6的hack就行,如：divimg style=float: left; src=/span style=margin-right: 5px; _margin-right: 2px;摘要摘要摘要摘要/span/div4.li在IE中底部空行问题说明：当li里面有两个以上的浮动元素时，li的下面就会产生一条空白间隙，例如 ul class=tlist??? lispan style=float: left;栏目/spana style=float: left; href=# target=_blank标题标题标题/a/li/ul解决方法：这个问题和第一个问题很相似，解决方法也是一样，在li上加个垂直方向的属性，例如：ul class=tlist??? li style=vertical-align: top;span style=float: left;栏目/spana style=float: left; href=# target=_blank标题标题标题/a/li/ul5.IE6样式中文注释后引发失效问题说明：这是ie6 出现的奇怪现象。这是由于css 和html 的编码不同所引致,满足下面条件就会引起注释下面的样式不起作用：1). css有中文注释2