ie6常见的兼容性问题
1.<!DOCTYPE HTML>文档类型的声明。
产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象;
解决办法:书写文档声明。
2.不同浏览器当中,很多的标签的默认样式不同,如默认的外部丁内补丁。
产生条件:不同浏览器;
解决办法:利用CSS reset文件进行样式的清除,然后再根据需要进行设置。
3.横向双倍外边距
产生条件:在IE6中块元素浮动后,会出现横向双倍margin现象。
解决办法: 在float标签的样式控制中加入display:inline
4.默认行高
产生条件:IE6、IE7、遨游浏览器;设置的文字高度超出盒模型内容区域设置的高度时会影响布局。
解决办法:给超出高度的标签设置overflow:hidden;或者将文字的行高line-height设置为小于块的高度。
5.img外部的border
产生条件:img外部有a标签,即img标签有链接时
解决办法:设置img边框border:0;
6.图片默认有间距。
产生条件:img标签(每个img之后敲了回车)
解决办法:为img设置float的浮动布局方式。
7.经典3像素bug
产生条件:IE6浏览器,浮动块元素与未浮动块元素处于同一行,有默认的3px间距。
解决办法:设置非浮动元素浮动。
8.默认行高
产生条件:清除浮动的时候,有些人会采取一种清浮动的方法,使用一个空的div,然后为这个div设置{clear:both}。在大部分
浏览器当中,这样做是没有任何问题的,但是在IE6浏览器当中,div即使是空的,也会存在默认行高。
解决办法:设置其高度为0,并设置overflow:hidden。{height:0;overflow:hidden;clear:both;}
9.a标签hover不适用于所有标签
产生条件:IE6浏览器中hover只支持a标签的使用,不支持一切其它标签使用;
解决办法:合理用a标签嵌套其他行内标签或者用javascript模拟a的hover效果;详情请查看日志:兼容IE6 a标签hover效果
10.table标签当中border-color属性设置无效
产生条件:IE6中table设置属性border-color无效;
解决办法:运用CSS样式进行控制,而不是使用属性进行样式的处理。
11.png格式图片
产生条件:IE6浏览器,不支持透明;
解决办法:使用javascript进行处理;或者使用gif、jpg图像替代掉png图片的使用。
12.透明rgba与opacity
产生条件:IE6不支持此两种透明的设置方法;
解决办法:使用IE6当中的滤镜filter替代掉,如:opacity:0.6;filter:alpha(opacity=60)。
13.子选择器在IE6中不能使用
产生条件:IE6浏览器,使用E>F子选择器;
解决办法:采用其他选择器或者采用后代选择器进行控制,如:div p{margin:10px;} div p p{margin:0;}替代掉 div>p{margin:10px;}。
14.不支持最大最小宽高
产生条件:IE6浏览器,标签的最低高度/宽度设置(min/max-height)
解决办法:为IE6单独设置hack,即_height:最小高度值;_width:最小宽度值(对于IE6,当实际宽高超出定义的宽高时,元素会自动调整宽高)。对于最大高度和最大宽度,没有必要设置兼容,当前对于开发者来说,只需要保证IE6下正常显示即可,无需在它身上花费太多功夫。
15.纵向居中,IE6不支持display:table-cell
产生条件:IE6浏览器,设置一个元素在另一个元素中垂直方向上居中对齐,不能够支持以单元格的方式来显示元素;
解决办法:如果是单行文本,采用line-height和height的配合使得文本垂直居中,如果中间是其他元素或者多行文本,采用其他方法进行居中处理,处理方法有多种,详见日志:CSS元素水平垂直居中。
16.input 聚焦框颜色与样式不同
产生条件:各个浏览器表现不同;
处理方法:使用outline:none,清除默认样式之后再统一设置。
17.鼠标移上小手效果
产生条件:IE6,cursor:hand :IE完全支持。但是在firefox是不支持的,没有效果。cursor:pointer :是CSS2.0的标准。所以firefox是支持的,但是IE5.0既之前版本不支持。IE6开始支持。;
解决办法:设置两种cursor:pointer ; cursor:hand。
18.子标签无法撑开父标签的高度
产生条件:父标签内部含一个或多个子标签,父标签没有设置浮动,而子标签发生浮动;
处理方法:方法1:在子标签最后添加清除浮动的设置<div style='height:0;clear:both'></div>; 方法2:为父标签添加{overflow:hidden;}的样式; 方法3:为父标签设置固定高度。
19.li的间距问题
产生条件:IE6浏览器 li标签设置宽高,且li里面的元素发生了浮动;
处理方法:方法1:li不设置宽高; 方法2:li内部的标签不进行浮动。
20.行内元素布局混乱
产生条件:行内元素为包含框时,如果包含框包含的绝对定位元素以百分比为单位进行定位;
处理方法:在行内元素当中加入{zoom:1},触发IE的hasLayout。关于hasLayout的更多介绍请参见日志:hasLayout IE浏览器bug的来源。
21.多显示一个字
产生条件:多个浮动元素中间夹杂HTML注释语句,浮动元素宽度设置为100%;则在下一行多显示一个上一行的最后一个字符;
处理方法:果断删掉注释!
22.CSS优先级 !important
产生条件:IE6当中,在同一组CSS属性中,!important不起作用;
处理方法:单独设置。
23.img图片下部高度多余5px
产生条件:IE6浏览器;
处理方法:将图片转化为块级对象,即display:block。还有四种其他方法,详细解释参见日志:“IE6 BUG 图片元素img下 高度超出 出现多余空白”
ie6常见的兼容性问题的更多相关文章
- ie6常见的兼容性
1.IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定mar ...
- IE6 7下常见CSS兼容性处理
以下是一些比较常见的IE6 7下的兼容性问题. 在当下这个时代,其实我们几乎可以不用再去针对IE6做兼容性的处理,除非你的公司还是诡异的要求你兼容到IE6.但是了解一些常见的兼容性问题还是可以帮助我们 ...
- ie6对hover兼容性问题的解决:
ie6对hover兼容性问题的解决: 1,在body里添加以下样式: behavior:url(../scripts/csshover.htc); csshover.htc可直接在网上下载 2,js解 ...
- IE6常见bug整理
By Diaoyude | 发布时间: 09-08 09:47 | Hits:1,253 | Post in: WEB前端 , Div-Css 针对IE6常见的一些ie6bug,ie6png,E6 ...
- IE6常见CSS解析Bug及hack
IE6常见CSS兼容问题总结 1)图片间隙 A)div中的图片间隙(该bug出现在IE6及更低版本中) 描述:在div中插入图片时,图片会将div下方撑大三像素. hack1:将</div> ...
- HTML-IE6兼容性问题及IE6常见BUG详细汇总
点评:IE6的兼容性问题一直都是前端工程师的恶梦,为了早早脱离这种困境,本文整理了一些相关兼容性的知识,感兴趣的朋友可以参考下哈,希望可以帮助到你- 1.终极方法:条件注释 <!--[if lt ...
- IE6兼容性问题及IE6常见bug详细汇总
转载地址:http://www.jb51.net/css/76894.html 1.IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明&l ...
- IE6兼容性问题及IE6常见bug详细汇总---转载
1.IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定mar ...
- CSS在IE6中常见的兼容性问题
1.在IE6中png24格式的图片不透明 解决办法:写一个条件注释语句,引入一个js插件,然后调用一下js中的方法,把需要处理的元素的类名写在括号中,如下 (插件下载地址:http://www.dil ...
随机推荐
- pm2日志管理pm2-logrotate介绍
先来看两个问题 问:pm2-logrotate是什么? 答:pm2-logrotate可以理解为是一个pm2的插件,它扩充了pm2本身没有功能:日志管理,所以它的运行需要依靠pm2,想用它必须先安装p ...
- [原创]k8exe2bat任意文件转Bat工具(WebShell无法上传EXE解决方案)
http://qqhack8.blog.163.com/blog/static/114147985201126105626755/ 这是我2011年的东西了,当时用此方法可免杀很多马,至今依然有很大的 ...
- [Charles]SSLHandshake: Received fatal alert: certificate_unknown
---------------------- 转载请注明出处 http://www.cnblogs.com/dzblog/p/8119712.html --------------------- 今天 ...
- Android主线程的消息系统(Handler\Looper)
前言: 之前的文章写的都是关于Bitmap和内存的优化技术,这一篇文章给大家谈谈Handler. Handler是Android系统中比较重要的一个知识,在Android多线程面试经常会被问到,在实际 ...
- less用法小结
1,采用koala进行编译,可以实时地在vscode这样的工具中看到less到css的转换: 2,均支持/**/以及//两种形式的注释,由于后期维护是维护less,因此推荐使用后者,因为后者不会被编译 ...
- Java 容器 & 泛型:一、认识容器
Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket 容器是Java语言学习中重要的一部分.泥瓦匠我的感觉是刚开始挺难学的,但等你熟悉它,接触多了,也就“顺 ...
- shell脚本示例:计算毫秒级、微秒级时间差
bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 有时候需要计算命令的执行时间长度,可以使用time命令,虽然t ...
- ZooKeeper系列(5):ZooKeeper的日志和快照
ZooKeeper系列文章:https://www.cnblogs.com/f-ck-need-u/p/7576137.html#zk ZooKeeper有两种日志.一种快照.日志分为事务日志和Zoo ...
- 【golang-GUI开发】Qt5的安装
golang一直被认为没有好的GUI库,事实并非如此. 目前有基于gtk+3.0的gotk3:https://github.com/gotk3/gotk3 以及接下来我们要说的qt:https://g ...
- PHP开发中bcscale timezone charset的设定
关于php的开发,有几个细节设定,需要知悉下:在项目的init.php 或 index.php 或 api.php 1. bcscale(18); 表示bc函数,默认小数点位数. 没有设定的话,默认为 ...