IE6 浏览器常见兼容问题 大汇总(23个)
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下 高度超出 出现多余空白”
本文转至:http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201371611543769/
IE6 浏览器常见兼容问题 大汇总(23个)的更多相关文章
- IE6 浏览器常见兼容问题 大汇总(23个)[转载]
IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼 ...
- IE6 浏览器常见兼容问题 共23个
1.<!DOCTYPE HTML>文档类型的声明. 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象: 解决办法:书写文档声明. 2.不同浏览器当 ...
- IE6浏览器常见的bug及其修复方法
IE6不支持min-height,解决办法使用css hack: .target { min-height: 100px; height: auto !important; height: 100px ...
- 常见.NET功能代码汇总 (2)
常见.NET功能代码汇总 23,获取和设置分级缓存 获取缓存:首先从本地缓存获取,如果没有,再去读取分布式缓存写缓存:同时写本地缓存和分布式缓存 private static T GetGradeCa ...
- CSS-各种cs样式之浏览器兼容处理方式汇总大全(更新中...)
页面模板 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 ...
- IE6浏览器兼容问题及部分解决方案(网上整理)
作为一个初涉前端技术的IT菜鸟,IE浏览器的兼容问题是一个不得不跨越的坎.为了能够在不同浏览器达到同样的显示效果,就不得不花心思想出办法实现兼容.由于各大主流浏览器内核不同,各自的实现标准有所差异,因 ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- ☆☆☆☆☆Placeholder兼容各大浏览器的例子☆☆☆☆☆
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- js监听用户的键盘敲击事件,兼容各大主流浏览器
js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...
随机推荐
- SQL从入门到基础 - 06 限制结果集范围
一.限制结果集行数 1. Select top 5* from T_Employee order by FSalary DESC 2. (*)检索按照工资从高到低排序检索从第六名开始一共四个人的信息: ...
- DOM 添加 / 更新 / 删除 XML (CURD)
获得Document /** * 获取文档 * 1.获得实例工厂 * 2.获得解析器 * 3.获得document */ 添加结点 /** * 1.获得 ...
- MySQL学习笔记(3) - 查询服务器版本,当前时间,当前用户
SELECT VERSION(); --显示当前服务器版本 SELECT NOW(); --显示当前日期时间 SELECT USER(); --显示当前用户 MySQL中语句规范: 1.关键字和函数名 ...
- 复习css3的部分属性
利用css3实现一个半月形的西瓜,利用queue实现吃西瓜的动画.练习例子 css3: 1.圆角 border-radius:100%; border-top-left-radius:5px; 2.变 ...
- HTML5比较实用的代码
增强IE兼容性 <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js&q ...
- EFI主板和GPT分区表安装系统以及转换GPT分区表的方法
现在硬盘越来越大,而原来的MBR分区方式,超过2T的硬盘就会识别不全,只有使用GPT的方式才可以,但是GPT如果用原来的BIOS是无法引导装系统了,不过如果你的主板支持EFI,那么可以用GPT+EFI ...
- Hunt the Wumpus第二个版本---多怪兽,多洞穴,洞穴间双向互通
其中,将洞穴连起来的算法要好好体会. 学习构建临时变量列表,确认循环用FOR,非确定循环用 WHILE,并定好退出条件. from random import choice cave_numbers ...
- 2014.7.8模拟赛【笨笨当粉刷匠】|bzoj1296 [SCOI]粉刷匠
笨笨太好玩了,农田荒芜了,彩奖用光了,笨笨只好到处找工作,笨笨找到了一份粉刷匠的工作.笨笨有n条木板需要被粉刷.每条木板被分成m个格子,每个格子要被刷成红色或蓝色.笨笨每次粉刷,只能选择一条木板上一段 ...
- ORTP库API使用入门
一.简介 ORTP是一个支持RTP以及RFC3550协议的库,有如下的特性: (1)使用C语言编写,可以工作于windows, Linux, 以及 Unix平台 (2)实现了RFC3550协议,提供简 ...
- poj1881:素因子分解+素数测试
很好的入门题 先测试是否为素数,若不是则进行素因子分解,算法详见总结贴 miller robin 和pollard rho算法 AC代码 #include <iostream> #incl ...