IE6常见CSS兼容问题总结




1)图片间隙

A)div中的图片间隙(该bug出现在IE6及更低版本中)
描述:在div中插入图片时,图片会将div下方撑大三像素。
hack1:将</div>与<img>写在一行上;
hack2:将<img>转为块状元素,给<img>添加声明:display:block;
B)dt,li中图片间隙(IE6)
hack:将<img>转为块状元素,给<img>添加声明:display:block;
img设置对齐方式属性vertical-align:top;
 

2) 双倍浮向(双倍边距)

描述:当Ie6及更低版本浏览器在解析浮动元素时,会错误地把浮向边边界加倍显示。
hack:给浮动元素添加声明:_display:inline; 

3)默认高度(IE6)

描述:在IE6及以下版本中,部分块元素拥有默认高度(低于16px高度)
hack1:给元素添加声明:font-size:0;
hack2:给元素添加声明:overflow:hidden;
 
 
 

4)表单元素行高不一致(IE,MOZ,C,O,S)

描述:表单元素行高对齐方式不一致
hack:给表单元素添加声明:float:left;或vertical-align:top;
去掉表单控件的边框时用border:0; border:none;不能兼容ie7以下浏览器。
 

 

5)百分比bug

描述:在IE6及以下版本中在解析百分比时,会按四舍五入方式计算从而导致50%加50%大于100%的情况。
hack:给右面的浮动元素添加声明:clear:right;     意思:清除右浮动。     
clear:left:清除左浮动
clear:both:清除两边的浮动
 

6)列表阶梯BUG(IE6及更低版本的浏览器中)

bug1:在给的子元素中使用了Float:left;父元素中没有设置浮动属性,li阶梯状效果。
hack:给父元素设置浮动便能解决此问题
 
bug2:当给LI里的A转成块元素,并设置了固定高度时,且给父元素写了浮动后在IE6及更低的版本浏览器里会出现垂直显示。
hack:给a也设置左浮动便可解决。
 

7)在IE6及更低版本的浏览器里,如果想去掉input的默认边框,需将其border属性值设置成0方可兼容多个浏览器。


8)鼠标指针bug

描述:cursor属性的hand属性值只有IE浏览器识别,其它浏览器不识别该声明,cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
hack:如统一某元素鼠标指针形状为手型,应添加声明:cursor:pointer;

9)浏览器解析按钮边框时,会把边框解析在按钮内部,不会影响按钮的原有大小


10)透明写法

1.opacity:0~1;IE8以上的浏览器
2.filter:alpha(opacity=1~100);     IE9及IE9以下的浏览器

IE6常见CSS解析Bug及hack的更多相关文章

  1. IE6常见CSS解析Bug和hack

    第一:图片间隙 a:div中的图片间隙: 描述:在div中插入图片时,图片会将div下方撑大3像素 hack1:将<div>和<img>写在一行 hack2:将<img& ...

  2. IE6对CSS支持Bug收集

    1.IE6双外边距 在IE6下,如果对元素设置了浮动,同时又设置了margin-left或者margin-right,margin值会加倍. 例如,设置margin-left:10px在IE6下会显示 ...

  3. jquery博客收集的IE6中CSS常见BUG全集及解决方案

    今天的样式调的纠结,一会这边一会那么把jquery博客折腾的头大,浏览器兼容性.晚上闲着收集一些常见IE6中的BUG 3像素问题及解决办法 当使用float浮动容器后,在IE6下会产生3px的空隙,有 ...

  4. IE6中CSS常见BUG全集及解决方案——摘自网友

    IE6中CSS常见BUG全集及解决方案 IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, ...

  5. 前端之旅HTML与CSS篇之IE6常见BUG

    1.IE6怪异解析之padding与border算入宽高原因:未加文档声明造成非盒模型解析解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定marin ...

  6. IE6常见bug整理

    By Diaoyude  | 发布时间: 09-08 09:47  | Hits:1,253 | Post in: WEB前端 , Div-Css 针对IE6常见的一些ie6bug,ie6png,E6 ...

  7. HTML-IE6兼容性问题及IE6常见BUG详细汇总

    点评:IE6的兼容性问题一直都是前端工程师的恶梦,为了早早脱离这种困境,本文整理了一些相关兼容性的知识,感兴趣的朋友可以参考下哈,希望可以帮助到你- 1.终极方法:条件注释 <!--[if lt ...

  8. IE6兼容性问题及IE6常见bug详细汇总

    转载地址:http://www.jb51.net/css/76894.html 1.IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明&l ...

  9. IE6兼容性问题及IE6常见bug详细汇总---转载

    1.IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定mar ...

随机推荐

  1. sql server 2000的安装

    一.安装sql 二.启动sql 三.查看sql版本 RTM版本,需要打补丁 四.安装SP4

  2. Python系列之内置函数

    内置函数 一.数学运算类: abs(a):求绝对值如果参数是个复数则返回复数的模. a = abs(-1) print(a) >>>1 compilex([real[, imag]] ...

  3. Mysql 学习之EXPLAIN作用

    一.MYSQL的索引 索引(Index):帮助Mysql高效获取数据的一种数据结构.用于提高查找效率,可以比作字典.可以简单理解为排好序的快速查找的数据结构.索引的作用:便于查询和排序(所以添加索引会 ...

  4. sbt 配置文件

    配置文件名:application.conf, VM options: -Dconfig.file=application.conf 配置文件内容规范: openStrategy{ alive { a ...

  5. Ubuntu安装Java8和Java9

    前言 系统:Ubuntu 16.04 软件: Java8, Java9 Tips: Java 9 的代码由于提供了新特性,所以有些代码并不支持向后兼容.也就是说,用 Java 9 写的代码,有可能在 ...

  6. bind、apply与call

    bind.apply与call 先说观点:不论是bind.apply还是call,最大的好处就是代码复用. bind 在开发中,我们只有复用代码时,才会出现this指向需要改动的情况. 纵观bind的 ...

  7. win10 uwp 九幽图床

    本文主要是图片加水印自动上传,代码已经上传github. 图片加水印,我的方法,简单,一个好的方法是毒逆天大神的图片加水印方法或http://daily.zhihu.com/story/8812028 ...

  8. linux 生成随机密码和wordlist常用方法

    注:文章内容来自网络收集 关于下面这10个方法,估计很多人也知道了,这里也是为了自己以后用收集一下,不过顺便吐槽下,google第一页,只要是“linux 随机密码”这几个类似的关键字,蹦出来的全特么 ...

  9. Redis 学习笔记-入门

    Redis特点: 1.速度快 2.支持丰富的数据类型:字符串.哈希列表.集合 3.操作具有原子性,所有Redis操作都是原子操作 4.多实用工具,可应用如缓存,消息队列,应用程序中任何短期数据,如we ...

  10. 大话JPA

    JPA 是什么 Java Persistence API:用于对象持久化的 API Java EE 5.0 平台标准的 ORM 规范,使得应用程序以统一的方式访问持久层: 首先看一下传统方式访问数据库 ...