1、ie6双倍边距bug

块状元素设置float(左浮动或有浮动),并且设置margin值之后,第一个浮动的元素其左侧margin值为正常的2倍,如图,可以看到第一个元素的左侧边距于其他元素两两之间的边距一致,也就是其左边距为正常边距的两倍

解决方法:给元素设置display:inline即让元素不为块状元素,如图第一个元素左侧的边距显示正常

2、ie6浏览器3像素bug

设置蓝色块状元素左浮动,红色元素不浮动,两个块元素之间会出现3像素的间隙,如图

解决方法:第二个元素也设置左浮动,如图,间隙消失

也可以使用ie6特有的hack规则,为其(左侧元素)写相应的css

_zoom:1; //zoom是ie触发Layout条件之一
margin-right:value;//value为希望的margin值
_margin-right: value-3px;

3、ie6高度问题

若ie6下字体大小为22px,设置div的高度低于22px时无效,ie认为div高度不能低于字体高度,如图设置div高度为10px,但其实际高度为22px;

解决方法

(1)设置overflow:hidden

(2)设置font-size:0px;

(3)在元素中插入html注释<!– >

(4)在元素中插入html空格 &nbsp;

4、ie中奇数宽高bug

<style>
.parent{ position:relative; width:601px;
height:200px; background:red; color:#000; }
.children{ position:absolute; top:0; right:0; width:200px;
height:200px; background:yellow; color:#969696;}
</style>
</style>

<div class="parent">
  <div class="children">
  </div>
</div>

解决方案将parent的宽度改为偶数(600px),效果如图

5、ie6中图片链接下方有间隙

图片垂直挨着时,图片之间会有间隙,如图

解决方法:

display:block;

float:left;

6、重复文字bug

<div style="width:400px">
  <div style="float:left"></div>
  <!--这里是注释-->
  <!--这里是注释-->
  <!--这里是注释-->
  <div style="float:right;width:400px">ie6浏览器兼容性</div>
</div>

原因是注释造成的文字溢出,且溢出的文字数=注释的条数*2-1,该bug与注释文字的位置、元素的浮动以及文字的固定宽度有关

解决方法:

(1)去掉注释

(2)不放置于浮动块之后

(3)去除文字区的固定宽度

(4)后边添加br(有几条注释就添加几个br)

7、ie6 z-index失效

父元素设置了z-index之后,子元素会继承,对自己设置的z-index置之不理

解决方法:

position的relative改为absolute

浮动元素添加position

去除浮动

ie6浏览器兼容性的更多相关文章

  1. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  2. CSS 多浏览器兼容性问题及解决方案

    兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ...

  3. 解决客户 IE 浏览器"兼容性视图"设置带来的问题

    最近在给客户开发一个 ASP.NET web 报表时,发现客户的 IE8 浏览器上,看网页总是怪怪的. 调查后发现,客户的 IE8 浏览器,统一被设置成"对本地网络使用兼容性视图" ...

  4. css不同浏览器兼容性调试 --- 转自: [http://wo.115.com/?ct=detail&id=31733&bid=1018841]

    css不同浏览器兼容性调试 IE6.0,IE7.0与Firefox的CSS兼容性问题1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right ...

  5. 【转】CSS浏览器兼容性与解析问题终极归纳

    1.怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式.为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯. 2.IE6双边距问题:在 ...

  6. web前端开发浏览器兼容性 - 持续更新

    浏览器兼容性问题又被称为网页或网站兼容性问题:不同浏览器内核及所支持的html等网页语言标准不同,不同客户端环境(如分辨率不同)造成实际显示效果未能达到预期理想效果 首先我们来看一下目前市面上常见的一 ...

  7. tab.js分享及浏览器兼容性问题汇总

    在 样式布局分享-基于frozen.js的移动OA 文章中,用了到第三方组件 tab.js(带菜单的横屏滑动插件),其兼容性很差,进行优化后,已兼容全平台(且支持IE6+). tab.js GitHu ...

  8. div+css中常见的浏览器兼容性处理-兼容不同浏览器

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...

  9. 1.各个浏览器内核?经常遇到的浏览器兼容性有哪些?解决办法?常用的hack技巧?

    IE: trident内核 Firefox(火狐):gecko内核 Safari(苹果):webkit内核 Opera(欧鹏):以前是presto内核,现在是Blink内核 Chrome:Blink ...

随机推荐

  1. webpack实践总结

    一.Loader写法及执行顺序 从webpack2起,loader的格式如下: module: { rules: [ {test: /\.css$/, use: ['style-loader','cs ...

  2. 分享 go语言爬虫---开源项目Pholcus

    写在开头的话:记录一下最近学习Pholcus(https://github.com/henrylee2cn/pholcus)的过程,首先去学习的go基本语法,在没接触的时候发现很多不理解的地方,但是当 ...

  3. php处理三级分类数据

    <?php // 链接数据库 $link = mysqli_connect('localhost','root','root'); if($link == null){ exit; } mysq ...

  4. NO2——最短路径

    [Dijkstra算法] 复杂度O(n2) 权值必须非负 /* 求出点beg到所有点的最短路径 */ // 邻接矩阵形式 // n:图的顶点数 // cost[][]:邻接矩阵 // pre[i]记录 ...

  5. 详细讲解Java中方法的重载和重写

    首先讲讲方法的重载: Java的重载就是在类中可以创建多个方法,它们具有相同的名字,但是却有不同的参数. 判断是否重载只有两个条件: 1)相同的方法名 2)不同的参数 具体为: A.方法参数类型不同 ...

  6. 【iOS开发】多线程下NSOperation、NSBlockOperation、NSInvocationOperation、NSOperationQueue的使用

    http://blog.csdn.net/crycheng/article/details/21799611 本篇文章主要介绍下多线程下NSOperation.NSBlockOperation.NSI ...

  7. 用vs调试项目页面无样式

    ASP.NET Development Server 上的文件授权 在文件系统网站中,静态文件(例如图像和样式表)遵守 ASP.NET 授权.例如,如果禁用了对静态文件的匿名访问,匿名用户则不能使用文 ...

  8. 编程练习:寻找发帖"水王"

    题目: 寻找发帖"水王" 来源: 编程之美 分析 衍生:就是给定一个数组,其中某个元素出现次数超过了数组长度的一半,找出这个元素 方法s 方法1 对这个串进行遍历,同时对出现的元素 ...

  9. MAC下Python3.5安装问题

    mac中自动集成了python2.7,但是作为程序员总是希望用最新的版本, 刚才安装python3.5后,python -V,依然提示是,2.7: 然后在 .bash_profile后面找到pytho ...

  10. JS让网页上文字出现键盘打字的打字效果

    一个挺简单的网页特效:JS让网页上文字出现键盘打字的打字效果实现 演示地址:http://codepen.io/guihailiuli/pen/jPOYMZ 以代码形式实现过程分析: <html ...