IE浏览器兼容 - yangh_martin

IE浏览器兼容

IE6下面元素的宽高小于16PX时会默认以16PX显示（最小宽高）

解决办法：设置元素overflow:hidden;

当文字全是字母或数字时会超容器对溢出隐藏的样式失效，

解决办法：设置下父级强制折行，字母断行就OK

1、终极方法：条件注释

缺点是在IE浏览器下可能会增加额外的HTTP请求数。

2、CSS选择器区分

IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。复制代码代码如下:

/* IE6 专用 */ content {color:red;}

/* 其他浏览器 */ div>p .content {color:blue;}

3、PNG半透明图片的问题

虽然可以通过JS等方式解决，但依然存在载入速度等问题，所以，这个在设计上能避免还是尽量避免为好。

4、IE6下的圆角

IE6不支持CSS3的圆角属性，性价比最高的解决方法就是用图片圆角来替代，或者放弃IE6的圆角。

5、IE6背景闪烁

如果你给链接、按钮用CSS sprites作为背景，你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存，每次触发hover的时候都会重新加载，可以用JavaScript设置IE6缓存这些图片：

复制代码代码如下: document.execCommand("BackgroundImageCache",false,true);

6、最小高度

IE6 不支持min-height属性，但它却认为height就是最小高度。

解决方法：使用ie6不支持但其余浏览器支持的属性!important。

复制代码代码如下: #container {min-height:200px; height:auto !important; height:200px;}

7、最大高度

复制代码代码如下:

//直接使用ID来改变元素的最大高度

var container = document.getElementById('container');

container.style.height = (container.scrollHeight > 199) ? "200px" : "auto";

//写成函数来运行

function setMaxHeight(elementId, height){

var container = document.getElementById(elementId);

container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto";

}

//函数示例

setMaxHeight('container1', 200);

setMaxHeight('container2', 500);

8、100% 高度

在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%;。

9、最小宽度

同max-height和max-width一样，IE6也不支持min-width。

复制代码代码如下:

//直接使用ID来改变元素的最小宽度

var container = document.getElementById('container');

container.style.width = (container.clientWidth < width) ? "500px" : "auto";

//写成函数来运行

function setMinWidth(elementId, width){

var container = document.getElementById(elementId);

container.style.width = (container.clientWidth < width) ? width + "px" : "auto";

}

//函数示例

setMinWidth('container1', 200);

setMinWidth('container2', 500);

10、最大宽度

复制代码代码如下:

//直接使用ID来改变元素的最大宽度

var container = document.getElementById(elementId);

container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";

//写成函数来运行

function setMaxWidth(elementId, width){

var container = document.getElementById(elementId);

container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";

}

//函数示例

setMaxWidth('container1', 200);

setMaxWidth('container2', 500);

11、双边距Bug

当元素浮动时，IE6会错误的把浮动方向的margin值双倍计算。个人觉得较好解决方法是避免float和margin同时使用。12、清除浮动

如果你想用div(或其他容器)包裹一个浮动的元素，你会发现必须给div(容器)定义明确的height、width、overflow之中一个属性（除了auto值）才能将浮动元素严实地包裹。复制代码代码如下:

#container {border:1px solid #333; overflow:auto; height:100%;}

#floated1 {float:left; height:300px; width:200px; background:#00F;}

#floated2 {float:right; height:400px; width:200px; background:#F0F;}

13、浮动层错位

当内容超出外包容器定义的宽度时，在IE6中容器会忽视定义的width值，宽度会错误地随内容宽度增长而增长。

浮动层错位问题在IE6下没有真正让人满意的解决方法，虽然可以使用overflow:hidden;或overflow:scroll;来修正，但hidden容易导致其他一些问题，scroll会破坏设计；JavaScript也没法很好地解决这个问题。所以建议是一定要在布局上避免这个问题发生，使用一个固定的布局或者控制好内容的宽度（给内层加width）。

14、躲猫猫bug

在IE6和IE7下，躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一些定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。

解决方法很简单：

1.在（那个未浮动的）内容之后添加一个<span style="clear: both;"> </span>

2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;

15、绝对定位元素的1像素间距bug

IE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会产生错误。唯一的解决办法就是给父元素定义明确的高宽值，但对于液态布局没有完美的解决方法。

16、3像素间距bug

在IE6中，当文本(或无浮动元素)跟在一个浮动的元素之后，文本和这个浮动元素之间会多出3像素的间隔。

给浮动层添加 display:inline 和 -3px 负值margin

给中间的内容层定义 margin-right 以纠正-3px

17、IE下z-index的bug

在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index，有些情况下还需要定义position:relative。

18、Overflow Bug

在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。

19、横向列表宽度bug

如果你使用float:left;把<li>横向摆列，并且<li>内包含的<a>（或其他）触发了 hasLayout，在IE6下就会有错误的表现。

解决方法很简单，只需要给<a>定义同样的float:left;即可。

20、列表阶梯bug

列表阶梯bug通常会在给<li>的子元素<a>使用float:left;时触发我们本意是要做一个横向的列表(通常是导航栏)，但IE却可能呈现出垂直的或者阶梯状。

解决办法就是给<li>定义float:left;而非子元素<a>，或者给<li>定义display:inline;也可以解决。

21、垂直列表间隙bug

当我们使用<li> 包含一个块级子元素时，IE6(IE7也有可能)会错误地给每条列表元素（<li>）之间添加空隙。

解决方法：把<a>flaot并且清除float来解决这个问题；

另外一个办法就是触发<a>的hasLayout（如定义高宽、使用zoom:1;）；

也可以给<li> 定义display:inline;来解决此问题；

另外还有一个极有趣的方法，给包含的文本末尾添加一个空格。

22、IE6中的:hover

在IE6中，除了(需要有href属性)才能触发:hover行为，这妨碍了我们实现许多鼠标触碰效果，但还是有一些法子是可以解决它的。

最好是不要用:hover来实现重要的功能，仅仅只用它来强化效果。

23、IE6调整窗口大小的 Bug

当把body居中放置，改变IE浏览器大小的时候，任何在body里面的相对定位元素都会固定不动了。

解决办法：给body定义position:relative;就行了。

24、文本重复Bug

在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引发文本重复bug。

解决办法：给浮动元素添加display:inline;。

25、IE6 7a标签中的img标签如果有父母元素那么在IE7下面图片链接会失效

由于，在IE6,7中，由于触发了img标签的父元素的hasLayout属性，从而使得父元素（这里是div元素）自己的布局掩盖了a标签的链接

具有hasLayout属性的标签（默认haslayout值为true）

能够触发hasLayout的css属性(样式有)：

display:inline-block;

float:left|right;

width(height):除了auto之外的值。

position:absolute;

zoom:1 显式开启hasLayout。

Ie7下触发hasLayout的样式属性还有：

min-height:（任意值）

min-width:（任意值）

max-height:（除none之外任意值）

max-width:（除none之外任意值）

overflow:（除visible之外任意值，仅用于块级元素）

overflow-x:（除visible之外任意值，仅用于块级元素）

overflow-y:（除visible之外任意值，仅用于块级元素）

position:fixed

解决方案

使用position:relative而不是position:absolute；

添加背景色；

添加透明的背景图片，gif或png，但会增加无意义的http请求；

使用background:url(about:blank)，最佳方案。

25、IE7下面父级的子级元素有定位属性，里面滚动失效，不占空间

解决办法：给父级加上相对定位

26. word-break:normal(默认）| break-all | keep-all

Firefox、Opera不能识别

	问题	浏览器	DEMO	解决办法
1	input[button \| submit]未居中	IE8	bug \| fixed	添加width
2	body{overflow:hidden;}没有去掉滚动条	IE6/7	bug \| fixed	改成html{overflow:hidden;}
3	拥有hasLayout的标签有高度	IE6/7	bug \| fixed	添加_overflow:hidden;*height:0
4	form>[hasLayout]元素有margin-left时，子元素中的[input \| textarea] 出现2×margin-left	IE6/7	bug \| fixed	form > [hasLayout 元素]{margin-left:宽度;} form div{*margin-left:宽度÷2;}
5	当子元素有position:relative的时候，父元素设置overflow:[hidden\|auto]相当于给子元素设置了position:visible;	IE6/7	bug \| fixed	给父元素设置position:relative;
6	列表中混乱的浮动：在list中浮动图片时，图片出现溢出正常位置；或没有list-style	IE8	bug \| fixed	用背景图片替换list-style
7	th 不会自动继承上级元素的 text-align	IE8	bug \| fixed	给th添加text-align:inherit;
8	样式(包括link/style/@import(link)) 最多允许个为是：32	IE6-8	─ 常识	99.99%的情况下，不会遇到
9	PNG图片中的颜色和背景颜色的值相同，但显示不同	IE6-7	bug \| fixed	利用pngcrush去除图片中的 Gamma profiles
10	margin:0 auto; 不能让block元素水平居中	IE6-8	bug \| fixed	给block元素添加一个width
11	使用伪类 :first-line \| :first-letter, 属性的值中出现!important 会使属性失效	IE8	bug \| fixed	!important is evil, don’t use it anymore
12	:first-letter 失效	IE6	bug \| fixed	把 :first-letter 移到离{}最近的地方，如 h1, p:first-letter{}，而非 p:first-letter h1{}
13	Position:absolute元素中，a display:block, 在非:hover时只有文本可点击	IE6/7	bug \| fixed	给a添加background, 如果背景透明，使用background:url(‘任何页面中已经缓存的文件链接’)，不推荐background：url(#)[官方的解决方法]，因为会增加一下HTTP请求
14	dt, dd, li 背景失效	IE6	bug \| fixed	dt, dd, li{position:relative;}
15	<noscript />元素的样式在启用javascript的情况下显示了样式	IE6-8	bug \| fixed	利用js给<noscript />添加display:none;
16	li内元素偏离 baseline 向下拉	IE8/9	bug \| fixed	给li设置display:inline 或 float:[方向]
17	列表中li的list-style不显示	IE6/7	bug \| fixed	给li添加margin-left，留空间来显示（不要加在ul上）
18	图片不能垂直居中	IE6/7	bug/fixed	添加一个空标签，并赋给”Layout”, 比如display:inline-block;
19	不能自定义指针样式	IE6-8	bug \| fixed	给指针文件设置绝对路径
20	高度超过height定义的高	IE6	bug/fixed	添加_overflow:hidden;(推荐)或者_font-size:0;
21	宽度超过width定义的宽	IE6	bug/fixed	添加_overflow:hidden;
22	双倍边距	IE6	─ 常识	添加display:inline到float元素中
23	margin负值隐藏：hasLayout的父元素内的非hasLayout元素，使用负边距时，超出父元素部分不可见	IE6/7	bug/fixed	去掉父元素的hasLayout；或者赋hasLayout给子元素,并添加position:relative;
24	给两个浮动元素的某中一个的文字设定为斜体，另一个元素下拉在有斜体文字元素的下面	IE6	bug/fixed	给有斜体文字的元素添加overflow:hidden;
25	3px 间隔：在float元素后的元素，会有3px间隔	IE6	bug/fixed	因为是确切的3px，所以，用“暴力破解”吧，比如_margin-left:-3px;或者也设置float
26	text-align 影响块级元素	IE6/7	bug/fixed	整理你的float；或者分开设置text-align

jQuery中$.ajax()方法的参数对象中的属性或方法，并简述其用途

url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。

type: 要求为String类型的参数，请求方式（post或get）默认为get。

注意其他http请求方法，例如put和 delete也可以使用，但仅部分浏览器支持。

timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。

如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。设置为false将不会从浏览器缓存中加载请求信息。

data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递

可用的类型如下：

xml：返回XML文档，可用JQuery处理。

html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。

script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。

json：返回JSON数据。

jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个?”为正确的函数名，以执行回调函数。

text：返回纯文本字符串。

beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。

function(XMLHttpRequest){

this; //调用本次ajax请求时传递的options参数

}

complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。

参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。

function(XMLHttpRequest, textStatus){

this; //调用本次ajax请求时传递的options参数

}

success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。

由服务器返回，并根据dataType参数进行处理后的数据
描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this;//调用本次ajax请求时传递的options参数
error：要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。
ajax事件函数如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this;//调用本次ajax请求时传递的options参数
}
contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}
global：要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。
ifModified：要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。
jsonp：要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
username：要求为String类型的参数，用于响应HTTP访问认证请求的用户名。
password：要求为String类型的参数，用于响应HTTP访问认证请求的密码。
processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。
scriptCharset：要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

1.url:         要求为String类型的参数，（默认为当前页地址）发送请求的地址。
2.type:       要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
3.timeout:    要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
4.async:      要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
5.cache:     要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。
6.data:       要求为 Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo: ["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
7.dataType:   要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。
8.beforeSend：
要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){
  this; //调用本次ajax请求时传递的options参数
}
9.complete：
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
    this;    //调用本次ajax请求时传递的options参数
}
10.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
}
11.error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
function(XMLHttpRequest, textStatus, errorThrown){
  //通常情况下textStatus和errorThrown只有其中一个包含信息
this;   //调用本次ajax请求时传递的options参数
}
12.contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
13.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
      return data; //返回处理后的数据
}
14.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
    return data;  //返回处理后的数据
}
15.global：
要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。
16.ifModified：
要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。
17.jsonp：
要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
18.username：
要求为String类型的参数，用于响应HTTP访问认证请求的用户名。
19.password：
要求为String类型的参数，用于响应HTTP访问认证请求的密码。
20.processData：
要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。
21.scriptCharset：
要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
案例代码
$(function(){
    $('#send').click(function(){
$.ajax({
   type: "GET",
   url: "test.json",
   data: {username:$("#username").val(), content:$("#content").val()},
   dataType: "json",
   success: function(data){
        $('#resText').empty();   //清空resText里面的所有内容
         var html = '';
         $.each(data, function(commentIndex, comment){
        html += '<div class="comment"><h6>' + comment['username']
        + ':</h6><p class="para"' + comment['content']
        + '</p></div>';
        });
        $('#resText').html(html);
       }
       });
    });
});
22.顺便说一下$.each()函数:
$.each()函数不同于JQuery对象的each()方法，它是一个全局函数，不操作JQuery对象，而是以一个数组或者对象作为第1个参数，以一个回调函数作为第2个参数。回调函数拥有两个参数：第1个为对象的成员或数组的索引，第2个为对应变量或内容。

posted on 2017-07-11 23:06 yangh_martin 阅读(503) 评论(0) 编辑收藏举报

刷新页面返回顶部