IE兼容问题及处理

1.在IE6下,子元素能撑开父级设置好的宽高
2.IE6下的最小高度,高度小于19px的元素在IE6下会被当做19px来处理

解决办法:overflow:hidden;

3.IE6下 不支持1px的点线

4.在IE6下父级有边框,可能会导致子元素的margin值失效
解决办法:触发父级的haslayout

5.
在IE下不写文档声明就会进入盒模型的怪异解析;
盒模型的怪异解析:

怪异盒模型
width=可视宽
content=width-padding-border

6.在IE6下标签兼容:解决办法 <script src="html5shiv.js"></script>  创建新标签 上传过文件;

7.IE7及IE7之前的IE,只支持给a标签设置伪类,并且只支持l-v-h-a这四个伪类
解决办法:javascript

8.IE6,7下,inline-block对块标签没有效果了

9.在IE6,7下元素浮动之后,如果宽度是固定的,一定记得设置宽度,如果宽度需要内容撑开,就给他里边的块元素都加浮动

10.需要并在同一行的元素最好都加浮动

11.IE6,7下li本身没浮动,但是内容有浮动,li下边就会多出来几像素的空隙
解决办法:
1.给li浮动

2.给li加垂直对齐方式

12.当li下的空隙问题和IE6下最小高度问题并存的时候,给li加浮动

13.IE6下的双边距BUG

在IE6下,块元素,有浮动,并且有横向的margin,横向的margin值会放大成两倍

解决办法: display:inline

14.在IE6下,父级的宽度和每行元素的宽度之和相差超过3px,最后一行下margin失效

15.两个浮动元素中间有注释或者内嵌元素并且和父级宽度相差不超过3px,文字就被复制

16.haslayout
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout)

根据自身的内容大小或者父级的大小,来计算自己的大小

display: inline-block
height: (任何值除了auto)
float: (left 或 right)
position: absolute
width: (任何值除了auto)
zoom: (除 normal 外任意值)

IE7以上的
* min-height: (任意值)
* max-height: (除 none 外任意值)
* min-width: (任意值)
* max-width: (除 none 外任意值)
* overflow: (除 visible 外任意值)
* overflow-x: (除 visible 外任意值)
* overflow-y: (除 visible 外任意值)
* position: fixed

17.IE6实现三角形
border:1px dashed #000;

18. .clear{zoom:1;} 变焦,缩放
19.?在IE6,7下子元素有相对定位,父级的overflow对它不起效果
解决办法:给父级也加相对定位
?在IE6下,浮动元素和绝对定位元素是并且关系的话,定位元素会消失掉

解决办法:给它父级包一个div
?在IE6下,绝对定位父级的宽度(高度)是奇数的话,元素的right(bottom)就会有1px的偏差

?在IE6下,使用margin负值,使元素移出父级部分,移出部分会被父级截掉;
解决办法:给元素加相对定位
20.表单
?label标签 加for属性
?焦点问题 outline:none
?input上下2px的空隙
解决办法:给input浮动

?input在IE6下加:border:none 无效果
解决办法:
①border:0;
②重置input的背景

?在IE6,7下输入类型的表单控件,输入文字的时候,背景图会随着一起移动
解决办法:背景加给父级

21.IE6,不支持PNG的透明度;

解决办法:JS处理;上传过JS文件;
滤镜:
_background:none;_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/png.png", sizingMethod="crop"

22.条件注释语句
<!--[if IE]>
这是IE
<![endif]-->
<!--[if IE 9]>
9
<![endif]-->
23.ie hack
IE8之后的IE识别 \0
IE10及IE10之后的IE识别 \9
IE7及IE7之前的IE识别 * +
IE6及IE6之前的IE识别 _
24. !important
可以更改默认的CSS样式优先级规则,使该条样式属性声明具有最高优先级

时间: 2024-10-20 00:26:44

IE兼容问题及处理的相关文章

IE6 浏览器常见兼容问题 共23个

1.<!DOCTYPE HTML>文档类型的声明. 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象: 解决办法:书写文档声明. 2.不同浏览器当中,很多的标签的默认样式不同,如默认的外部丁内补丁. 产生条件:不同浏览器: 解决办法:利用CSS reset文件进行样式的清除,然后再根据需要进行设置. 3.横向双倍外边距 产生条件:在IE6中块元素浮动后,会出现横向双倍margin现象. 解决办法: 在float标签的样式控制中加入display:inl

前端浏览器JavaScript及CSS兼容总结

一. getElementById [标准参考] getElementById 是 Document 接口提供的方法,用于获取一个元素,该方法传入的参数应该是目标元素的 id 属性的值,目标元素的 id 是一个大小写敏感的字符串,并且该 id 在文档内应该是唯一的. [问题描述] 但是在 IE6 IE7 IE8(Q) 中,支持以 document.getElementById(elementName) 的方式获取 name 属性值为 elementName 的 A APPLET BUTTON F

SQL-GROUP BY语句在MySQL中的一个错误使用被兼容的情况

首先创建数据库hncu,建立stud表格. 添加数据: create table stud( sno varchar(30) not null primary key, sname varchar(30) not null, age int, saddress varchar(30) ); INSERT INTO stud VALUES('1001','Tom',22,'湖南益阳'); INSERT INTO stud VALUES('1002','Jack',23,'益阳'); INSERT

【好用的小技巧】win8兼容、网页不让复制

1.今天下了个matlab7,我用的是win8系统,不兼容. 解决:鼠标右键matlab7的快捷键,点击属性,选择兼容性,选择window vista即可运行 2.在一个 网页上看到一个对自己很有帮助的代码,想下.结果发现代码可以预览,可以选择代码中的文字,但是一复制就弹出窗口说积分不够. 解决:存储网页到本地,用word打开网页.然后文字就都可以复制了.

IE常见兼容问题

浏览器兼容问题1:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写1个标签,不加样式控制的情况下,胳肢的margin 和padding差异较大. 解决?案:CSS *{margin:0;padding:0;} 浏览器兼容问题2:块属性标签float后,有横?的margin情况下,在IE6显示margin比设置的大 问题症状:常见症状是IE6中后面的一块被顶到下一行 在float的标签样式控制中加 display:inline;将其转化为行内属性 浏览器兼容问题三:设置较小高度标签(一般

HTML+CSS+JS实现TABLE固定列(常见浏览器兼容)的最佳实践

BS架构的企业级应用中,当一个表格列数较多时,用户一个常见的需求就是把前面几个重要的列固定住,这样拖动滚动条时固定的列会方便用户查看数据,用户体验很好.一些重量级的JS组件库也都有这个功能,那么有没有更简单的方法实现这个功能呢? 这个需求常见的解决方案是使用表格拼接的方法,这个方案如果要制作静态的网页,或者功能简单的动态页面,逻辑比较简单,技术上也不复杂,很容易实现,但是如果要做成组件,动态功能较多的话,就需要写大量的冗余代码,难以维护,甚至于一个简单的功能,都需要些很多的代码,比如事件处理等,

添加和移除事件处理兼容各浏览器的封装(带详细注释)

//事件处理兼容各种浏览器,采用能力检测方法,所谓能力检测,就是有能力就做,没有能力就不做 //定义一个处理事件的对象,兼容各种浏览器,dom2级事件处理和ie事件,如果这两个事件都不兼容,就采用dom0级处理 var eventUtil ={ addEvent:function(element,type,handler){ if (element.addEventListener) { //非IE浏览器采用dom2级事件处理,type为事件类型如:click,handler为事件处理函数,fa

IE和FireFox中JS兼容之event

event对象 IE 中可以直接使用 event 对象,而 FF 中则不可以,解决方法之一如下:var theEvent = window.event || arguments.callee.caller.arguments[0]; 第二种是将 event 作为参数来传递:function xxx(e){var theEvent = window.event || e;} srcElement 和 target 在 IE 中 srcElement 表示产生事件的源,比如是哪个按钮触发的 oncl

告别ActionBarSherlock——Android.support包也能打造兼容2.x的ActionBar(1)

http://www.bdqn.cn/news/201308/10625.shtml 摘要: 告别ActionBarSherlock——android.support包也能打造兼容2.x的ActionBar(1) ActionBar是Android 3.0的产物 一直延伸到现在最新的4.3 就个人而言 ActionBar相比传统的弹出式菜单 更加简洁 但是ActionBar只有API 10以上(包括API 10)才能尝到 于是有些大神便打造出了ActionBarSherlock,为2.x带来了一

(转)兼容主流浏览器的CSS透明代码

透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } filter:alpha(opacity=50):这个是为IE6设的,可取值在0-100,其它三个0到1.-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器.-khtml-opacity: 0.5