IE6下常见兼容性问题

  • IE6下,块元素,同时有浮动和横向margin时,横向margin会变成两倍。
    加设一个display:inline;

  • IE6下li里的子元素如果都浮动,每个li之间会产生4px的缝隙。
    加设一个vertical:top;

  • IE6下量浮动元素间注释或存在内联元素时显示异常。
    删除内联元素/注释,或者与父级元素宽度相差3px以上;

  • IE6下父级元素的overflow:hidden包不住子级元素的relative。
    给父级元素也增加一个relative。

  • IE6下绝对定位元素的父级元素宽高是奇数的,显示异常。
    不要使用奇数。

  • IE6下浮动元素和绝对定位元素同级且并列时,绝对定位元素消失。
    使两者不要同级存在。

  • IE6下input有间隙。
    给input增加一个float

  • IE6下输入类型表单控件背景图片,在输入框被写满时会把图片推走。
    增加background:fixed

  • <!DOCTYPE HTML>文档类型的声明。IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象;
    书写文档声明。

  • 不同浏览器当中,很多的标签的默认样式不同,如默认的外部丁内补丁。
    利用[CSS reset]进行样式的清除,然后再根据需要进行设置。

  • 横向双倍外边距,在IE6中块元素浮动后,会出现[横向双倍margin]现象。
    在float标签的样式控制中加入display:inline

  • 默认行高,IE6、IE7、遨游浏览器;设置的文字高度超出盒模型内容区域设置的高度时会影响布局。
    给超出高度的标签设置overflow:hidden;或者将文字的行高line-height设置为小于块的高度。

  • img标签有链接时外部的border
    设置img边框border:0;

  • 图片默认有间距。img标签(每个img之后敲了回车)
    为img设置float的浮动布局方式。

  • 经典3像素bug。IE6浏览器,浮动块元素与未浮动块元素处于同一行,有默认的3px间距。
    设置非浮动元素浮动。

  • 默认行高,清除浮动的时候,有些人会采取一种[清浮动的方法]。使用一个空的div,然后为这个div设置{clear:both}。在大部分浏览器当中,这样做是没有任何问题的,但是在IE6浏览器当中,div即使是空的,也会存在默认行高。
    设置其高度为0,并设置overflow:hidden。{height:0;overflow:hidden;clear:both;}

  • a标签hover不适用于所有标签。IE6浏览器中hover只支持a标签的使用,不支持一切其它标签使用;
    合理用a标签嵌套其他行内标签或者用javascript模拟a的hover效果;

  • IE6中table设置属性border-color无效;
    运用CSS样式进行控制,而不是使用属性进行样式的处理。

  • IE6浏览器,不支持透明;
    使用javascript进行处理;或者使用gif、jpg图像替代掉png图片的使用。

  • IE6不支持透明rgba与opacity此两种透明的设置方法;
    使用IE6当中的滤镜filter替代掉,如:opacity:0.6;filter:alpha(opacity=60)。

  • 子选择器在IE6中不能使用
    采用其他选择器或者采用后代选择器进行控制,如:div
    p{margin:10px;} div p p{margin:0;}替代掉 div>p{margin:10px;}。

  • IE6浏览器,标签的最低高度/宽度设置(min/max-height)
    为IE6单独设置hack,即_height:最小高度值;_width:最小宽度值(对于IE6,当实际宽高超出定义的宽高时,元素会自动调整宽高)。对于最大高度和最大宽度,没有必要设置兼容,当前对于开发者来说,只需要保证IE6下正常显示即可,无需在它身上花费太多功夫。

  • 纵向居中,IE6不支持display:table-cell。IE6浏览器,设置一个元素在另一个元素中垂直方向上居中对齐,不能够支持以单元格的方式来显示元素;
    如果是单行文本,采用line-height和height的配合使得文本垂直居中,
    如果中间是其他元素或者多行文本,采用其他方法进行居中处理,处理
    方法有多种。

  • input 聚焦框颜色与样式不同
    使用outline:none,清除默认样式之后再统一设置。

  • 鼠标移上小手效果产生条件:IE6,
    cursor:hand :IE完全支持。但是在firefox是不支持的,没有效果。
    cursor:pointer :是CSS2.0的标准。所以firefox是支持的,但是IE5.0既之前版本不支持。IE6开始支持。
    cursor:pointer ; cursor:hand。

  • 子标签无法撑开父标签的高度。产生条件:父标签内部含一个或多个子标签,父标签没有设置浮动,而子标签发生浮动;
    方法1:在子标签最后添加清除浮动的设置<div
    style='height:0;clear:both'></div>; 方法2:为父标签添加
    {overflow:hidden;}的样式; 方法3:为父标签设置固定高度。

  • li的间距问题。IE6浏览器 li标签设置宽高,且li里面的元素发生了浮动;
    方法1:li不设置宽高; 方法2:li内部的标签不进行浮动。

  • 多个浮动元素中间夹杂HTML注释语句,浮动元素宽度设置为100%;则在下一行多显示一个上一行的最后一个字符;
    果断删掉注释!

  • CSS优先级 !important。IE6当中,在同一组CSS属性中,!important不起作用;
    单独设置。

整理来源:
1、http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201371611543769
2、http://www.w3cfuns.com/blog-5479241-5410340.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容

  • 浏览器兼容问题: 一、从浏览器内核的角度 来看,浏览器兼容性问题可分为以下三类:1. 渲染相关:和样式相关的问题,...
    小凤年阅读 488评论 0 0
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,141评论 0 1
  • 1.Web标准及W3C Web标准是由万维网联盟(W3C)制定的,Web标准的产生,网页内容能被更多的用户所访问到...
    Dumbass_阅读 382评论 0 0
  • Ø JavaScript 3 1. HTML对象获取问题 32. const问题 33. event.x与even...
    横冲直撞666阅读 3,186评论 0 7
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,220评论 0 8