IE浏览器兼容
|
问题
|
浏览器
|
DEMO
|
解决办法
|
1
|
input[button | submit]未居中
|
IE8
|
添加width
|
|
2
|
body{overflow:hidden;}没有去掉滚动条
|
IE6/7
|
改成html{overflow:hidden;}
|
|
3
|
拥有hasLayout的标签有高度
|
IE6/7
|
添加_overflow:hidden;*height:0
|
|
4
|
form>[hasLayout]元素有margin-left时,子元素中的[input | textarea] 出现2×margin-left
|
IE6/7
|
form > [hasLayout 元素]{margin-left:宽度;}
form div{*margin-left:宽度÷2;}
|
|
5
|
当子元素有position:relative的时候,父元素设置overflow:[hidden|auto]相当于给子元素设置了position:visible;
|
IE6/7
|
给父元素设置position:relative;
|
|
6
|
列表中混乱的浮动:在list中浮动图片时,图片出现溢出正常位置;或没有list-style
|
IE8
|
用背景图片替换list-style
|
|
7
|
th 不会自动继承上级元素的 text-align
|
IE8
|
给th添加text-align:inherit;
|
|
8
|
样式(包括link/style/@import(link)) 最多允许个为是:32
|
IE6-8
|
─ 常识
|
99.99%的情况下,不会遇到
|
9
|
PNG图片中的颜色和背景颜色的值相同,但显示不同
|
IE6-7
|
利用pngcrush去除图片中的 Gamma profiles
|
|
10
|
margin:0 auto; 不能让block元素水平居中
|
IE6-8
|
给block元素添加一个width
|
|
11
|
使用伪类 :first-line | :first-letter, 属性的值中出现!important 会使属性失效
|
IE8
|
!important is evil, don’t use it anymore
|
|
12
|
:first-letter 失效
|
IE6
|
把 :first-letter 移到离{}最近的地方,如 h1, p:first-letter{},而非 p:first-letter h1{}
|
|
13
|
Position:absolute元素中,a display:block, 在非:hover时只有文本可点击
|
IE6/7
|
给a添加background, 如果背景透明,使用background:url(‘任何页面中已经缓存的文件链接’),不推荐background:url(#)[官方的解决方法],因为会增加一下HTTP请求
|
|
14
|
dt, dd, li 背景失效
|
IE6
|
dt, dd, li{position:relative;}
|
|
15
|
<noscript />元素的样式在启用javascript的情况下显示了样式
|
IE6-8
|
利用js给<noscript />添加display:none;
|
|
16
|
li内元素偏离 baseline 向下拉
|
IE8/9
|
给li设置display:inline 或 float:[方向]
|
|
17
|
列表中li的list-style不显示
|
IE6/7
|
给li添加margin-left,留空间来显示(不要加在ul上)
|
|
18
|
图片不能垂直居中
|
IE6/7
|
添加一个空标签,并赋给”Layout”, 比如display:inline-block;
|
|
19
|
不能自定义指针样式
|
IE6-8
|
给指针文件设置绝对路径
|
|
20
|
高度超过height定义的高
|
IE6
|
添加_overflow:hidden;(推荐)或者_font-size:0;
|
|
21
|
宽度超过width定义的宽
|
IE6
|
添加_overflow:hidden;
|
|
22
|
双倍边距
|
IE6
|
─ 常识
|
添加display:inline到float元素中
|
23
|
margin负值隐藏:hasLayout的父元素内的非hasLayout元素,使用负边距时,超出父元素部分不可见
|
IE6/7
|
去掉父元素的hasLayout;或者赋hasLayout给子元素,并添加position:relative;
|
|
24
|
给两个浮动元素的某中一个的文字设定为斜体,另一个元素下拉在有斜体文字元素的下面
|
IE6
|
给有斜体文字的元素添加overflow:hidden;
|
|
25
|
3px 间隔:在float元素后的元素,会有3px间隔
|
IE6
|
因为是确切的3px,所以,用“暴力破解”吧,比如_margin-left:-3px;或者也设置float
|
|
26
|
text-align 影响块级元素
|
IE6/7
|
整理你的float;或者分开设置text-align
|
- 由服务器返回,并根据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个为对应变量或内容。
IE浏览器兼容的更多相关文章
- CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- CSS-各种cs样式之浏览器兼容处理方式汇总大全(更新中...)
页面模板 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 ...
- 浅谈CSS hack(浏览器兼容)
今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu. ...
- jQuery-1.9.1源码分析系列(七) 钩子(hooks)机制及浏览器兼容
处理浏览器兼容问题实际上不是jQuery的精髓,毕竟让技术员想方设法取弥补浏览器的过错从而使得代码乱七八糟不是个好事.一些特殊情况的处理,完全实在浪费浏览器的性能:突兀的兼容解决使得的代码看起来既不美 ...
- 【跟着子迟品 underscore】for ... in 存在的浏览器兼容问题你造吗
Why underscore 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. 阅读一些著名框架类库的源码,就好像和一个个大师对 ...
- 浏览器兼容innerText nextElementSibling firstElementChild
//下面是封装的方法,可以直接使用 //获dom对象的innerText的取值 function getInnerText(element){ //判断浏览器是否支持innerText if(type ...
- web前端~~浏览器兼容问题(百度)
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...
- 关于浏览器兼容问题及hack写法
浏览器的兼容问题 1.浏览器内核: Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( ...
- 转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks
[总结]浏览器CSS Hacks汇总 浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...
- js 浏览器兼容的一些方法
使用js是一件令人很抓狂的事情,很多的浏览器兼容,一大推的代码,谁的脑袋能记住那么多的东西,只有平时多积累,所谓熟能生巧嘛..这里列出一些常用的兼容代码,一点点积累哈~~~ 一.以跨浏览器的方 ...
随机推荐
- OpenCV探索之路(十五):角点检测
角点检测是计算机视觉系统中用来获取图像特征的一种方法.我们都常说,这幅图像很有特点,但是一问他到底有哪些特点,或者这幅图有哪些特征可以让你一下子就识别出该物体,你可能就说不出来了.其实说图像的特征,你 ...
- Github 开源:升讯威 Winform 开源控件库( Sheng.Winform.Controls)
Github 地址:https://github.com/iccb1013/Sheng.Winform.Controls 本控件库中的代码大约写于10年前(2007年左右),难免有不成熟与欠考虑之处, ...
- springcloud(七):配置中心svn示例和refresh
上一篇springcloud(六):配置中心git示例留了一个小问题,当重新修改配置文件提交后,客户端获取的仍然是修改前的信息,这个问题我们先放下,待会再讲.国内很多公司都使用的svn来做代码的版本控 ...
- mysql 数据库优化要点
1尽可能使用更小的类型 2尽可能的定义字段为not null,除非这个字段需要设置成null 3如果没有可变长度的字段varchar,尽可使用char 4所有字段应该有默认值 5所有的数据应该在保存之 ...
- Python教程(2.4)——字符串
2.2节讲过,Python中有字符串类型.在Python中,字符串用'或"括起,例如'abc'."qwerty"等都是字符串.注意'和"并不是字符串的内容. A ...
- 微信小程序开发《二》:http请求的session管理
作为一个开发JavaWeb应用的程序猿,都喜欢将用户登录后的用户信息(比如说用户id,用户名称)放入session中保存,之后在业务逻辑的开发中需要用到用户信息的时候就可以轻松又方便的从session ...
- sleep()
sleep() 方法可以使当前线程(即调用该方法的线程)暂停执行一段时间, 让其他线程有机会继续执行, 但它并不释放对象锁: 所以当sleep()方法结束时: 当前线程还是拥有对象锁: 当线程拥有对象 ...
- ssh代理上网
背景: 公司开发机没有外网,但可以通过ssh连接到另一台可以上公网的机器,所以想通过ssh代理的方式上网,简单又方便,而且需要的时候上,不需要的时候也可以不上 配置: 超级简单 在开发机上建立ssh隧 ...
- CentOS 安装数据库笔记
1.配置YUM源 # 下载mysql源安装包 shell.noarch.rpm # 安装mysql源 shell.noarch.rpm 检查mysql源是否安装成功 shell> yum rep ...
- 标准IO和重定向
1.标准输入/输出/错误 当shell启动,它继承三个文件:stdin.stdout.stderr,标准输入通常来自键盘,标准输出和标准错误通常是屏幕.标准输入/输出/错误的文件描述符为0.1.2 2 ...