浏览器兼容性问题解决方案汇总Word格式文档下载.docx
- 文档编号:448088
- 上传时间:2023-04-28
- 格式:DOCX
- 页数:11
- 大小:235.31KB
浏览器兼容性问题解决方案汇总Word格式文档下载.docx
《浏览器兼容性问题解决方案汇总Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《浏览器兼容性问题解决方案汇总Word格式文档下载.docx(11页珍藏版)》请在冰点文库上搜索。
/script>
[endif]-->
respond.js
解决ie9以下浏览器不支持CSS3MediaQuery的问题。
scriptsrc="
picturefill.js
解决IE91011等浏览器不支持<
picture>
标签的问题
IE条件注释
IE的条件注释仅仅针对IE浏览器,对其他浏览器无效
IE属性过滤器(较为常用的hack方法)
针对不同的IE浏览器,可以使用不同的字符来对特定的版本的IE浏览器进行样式控制
image
浏览器CSS兼容前缀
∙-o-transform:
rotate(7deg);
//Opera
∙-ms-transform:
//IE
∙-moz-transform:
//Firefox
∙-webkit-transform:
//Chrome
∙transform:
//统一标识语句
a标签的几种CSS状态的顺序
很多新人在写a标签的样式,会疑惑为什么写的样式没有效果,或者点击超链接后,hover、active样式没有效果,其实只是写的样式被覆盖了。
正确的a标签顺序应该是:
==lovehate==
∙link:
平常的状态
∙visited:
被访问过之后
∙hover:
鼠标放到链接上的时候
∙active:
链接被按下的时候
完美解决Placeholder
inputtype="
text"
value="
Name*"
onFocus="
this.value='
'
;
"
onBlur="
if(this.value=='
)
{this.value='
Name*'
}"
清除浮动最佳实践
∙.fl{float:
left;
∙.fr{float:
right;
∙.clearfix:
after{display:
block;
clear:
both;
content:
"
visibility:
hidden;
height:
∙.clearfix{zoom:
1;
BFC解决边距重叠问题
当相邻元素都设置了margin边距时,margin将取最大值,舍弃小值。
为了不让边距重叠,可以给子元素加一个父元素,并设置该父元素为BFC:
overflow:
divclass="
box"
id="
p>
Loremipsumdolorsit.<
/p>
div"
/div>
<
IE6双倍边距的问题
设置ie6中设置浮动,同时又设置margin,会出现双倍边距的问题
∙display:
inline;
解决IE9以下浏览器不能使用opacity
∙opacity:
0.5;
∙filter:
alpha(opacity=50);
progid:
DXImageTransform.Microsoft.Alpha(opacity=50);
解决IE6不支持fixed绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题
∙/*IE6hack*/
∙*html,*htmlbody{
∙background-image:
url(about:
blank);
∙background-attachment:
fixed;
∙}
∙*html#menu{
∙position:
absolute;
∙top:
expression(((e=document.documentElement.scrollTop)?
e:
document.body.scrollTop)+100+'
px'
);
∙
}
IE6背景闪烁的问题
问题:
链接、按钮用CSSsprites作为背景,在ie6下会有背景图闪烁的现象。
原因是IE6没有将背景图缓存,每次触发hover的时候都会重新加载
解决:
可以用JavaScript设置ie6缓存这些图片:
∙document.execCommand("
BackgroundImageCache"
false,true);
解决在IE6下,列表与日期错位的问题
日期<
span>
标签放在标题<
a>
标签之前即可
解决IE6不支持min-height属性的问题
∙min-height:
350px;
_height:
让IE7IE8支持CSS3background-size属性
由于background-size是CSS3新增的属性,所以IE低版本自然就不支持了,但是老外写了一个htc文件,名叫background-sizepolyfill,使用该文件能够让IE7、IE8支持background-size属性。
其原理是创建一个img元素插入到容器中,并重新计算宽度、高度、left、top等值,模拟background-size的效果。
∙html{
∙height:
100%;
∙body{
∙margin:
∙padding:
url('
img/37.png'
∙background-repeat:
no-repeat;
∙background-size:
cover;
∙-ms-behavior:
css/backgroundsize.min.htc'
∙behavior:
∙}
IE6-7line-height失效的问题
在ie中img与文字放一起时,line-height不起作用
都设置成float
width:
100%
100%这个东西在ie里用很方便,会向上逐层搜索width值,忽视浮动层的影响.
Firefox下搜索至浮动层结束,如此,只能给中间的所有浮动层加width:
100%才行,累啊。
opera这点倒学乖了,跟了ie
cursor:
hand
显示手型cursor:
hand,ie6/7/8、opera都支持,但是safari、ff不支持
pointer;
td自动换行的问题
table宽度固定,td自动换行
设置Table为table-layout:
fixed,td为word-wrap:
break-word
让层显示在FLASH之上
想让层的内容显示在flash上,把FLASH设置透明即可
∙1、<
paramname="
wmode"
transparent"
/>
2、<
wmode"
opaque"
/>
键盘事件keyCode兼容性写法
∙varinp=document.getElementById('
inp'
∙varresult=document.getElementById('
result'
)
∙functiongetKeyCode(e){
∙e=e?
(window.event?
window.event:
∙returne.keyCode?
e.keyCode:
e.which
inp.onkeypress=function(e){
∙result.innerHTML=getKeyCode(e)
求窗口大小的兼容写法
∙//浏览器窗口可视区域大小(不包括工具栏和滚动条等边线)
∙//1600*525
∙varclient_w=document.documentElement.clientWidth||document.body.clientWidth;
∙varclient_h=document.documentElement.clientHeight||document.body.clientHeight;
∙//网页内容实际宽高(包括工具栏和滚动条等边线)
∙//1600*8
∙varscroll_w=document.documentElement.scrollWidth||document.body.scrollWidth;
∙varscroll_h=document.documentElement.scrollHeight||document.body.scrollHeight;
∙//网页内容实际宽高(不包括工具栏和滚动条等边线)
∙varoffset_w=document.documentElement.offsetWidth||document.body.offsetWidth;
∙varoffset_h=document.documentElement.offsetHeight||document.body.offsetHeight;
∙//滚动的高度
∙varscroll_Top=document.documentElement.scrollTop||document.body.scrollTop;
DOM事件处理程序的兼容写法(能力检测)
∙vareventshiv={
//event兼容
∙getEvent:
function(event)
∙{returnevent?
event:
window.event;
∙},
//type兼容
∙getType:
function(event){
∙returnevent.type;
∙},
//target兼容
∙getTarget:
∙returnevent.target?
event.target:
event.srcelem;
//添加事件句柄
∙addHandler:
function(elem,type,listener){
∙if(elem.addEventListener){
∙elem.addEventListener(type,listener,false);
∙elseif(elem.attachEvent)
{
elem.attachEvent('
on'
+type,listener);
∙else{
∙//在这里由于.与'
字符串不能链接,只能用[]
∙elem['
+type]=listener;
},
//移除事件句柄
∙removeHandler:
∙if(elem.removeEventListener){
∙elem.removeEventListener(type,listener,false);
∙elseif(elem.detachEvent){
elem.detachEvent('
+type]=null;
}
//添加事件代理
∙addAgent:
function(elem,type,agent,listener){
∙elem.addEventListener(type,function(e){
∙if(e.target.matches(agent)){
listener.call(e.target,e);
//this指向e.target
∙});
},
//取消默认行为
∙preventDefault:
∙if(event.preventDefault){
∙event.preventDefault();
}
∙event.returnValue=false;
//阻止事件冒泡
∙stopPropagation:
∙if(event.stopPropagation){
∙event.stopPropagation();
else{
∙event.cancelBubble=true;
∙};
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 浏览器 兼容性问题 解决方案 汇总
![提示](https://static.bingdoc.com/images/bang_tan.gif)