前端兼容性问题总结(PC端)

网页制作 2024/12/28 佚名

3 2 1

1.如果图片加a标签在IE9-中会有边框

解决方案:

img{border:none;}

2.rgba不支持IE8

解决方案:可以用 opacity

eg:

opacity:0.7;/*FF chrome safari opera*/ 
filter:alpha(opacity:70);/*用了ie滤镜,可以兼容ie*/

但是,需要注意的是,opacity会影响里面元素的透明度

3. display:inline-block ie6/7不支持

解决方案:

display:inline-block;
*display:inline;

4.默认的body没有body去掉margin情况下ie5、6、7边缘会很宽margin-top加倍如果处于无声明状态那么所有的ie浏览器margin-top加倍

解决方案:用css给body添加magin属性为0px

body{margin:0;}

5.IE 6.0 Firefox Opera等是真实宽度=width+padding+border

IE5.X 真实宽度=width

解决方案:

方法1.

div.content { 
　　width:400px;  //这个是错误的width(对于ie5来说是正确的），所有浏览器都读到了 
　　voice-family: "\"}\"";  //IE5.X/win忽略了"\"}\""后的内容 
　　voice-family:inherit; 
　　width:300px;  //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的 
}

方法2.

div.content { 
　　width:300px !important;  //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值 
　　width(空格)/**/:400px;  //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用 
}

6.height不能小于16px,设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

解决方案:overflow设置为hidden

7.min-height不兼容 ie6 7解释为超过高度就撑开，而其他版本浏览器则遮盖下面的层

解决方案:min-height:200px; height:auto !important; height:200px; overflow:visible;

8.position:fixed IE5、6无法识别此属性

解决方案:

<!--[if lte IE 6]>
　　　<style type="text/css">
　　　　　 html {
　　　　　　　　/*这个可以让IE6下滚动时无抖动*/
　　　　　　　　background: url(about:black) no-repeat fixed
　　　　　　}
　　　　　　#demo_t, #demo_b, #demo_l, #demo_r {
　　　　　　　　position: absolute;
　　　　　　}
　　　　　　#demo_t, #demo_b {
　　　　　　　　/*这个解决body有padding时，IE6下100%不能铺满的问题*/
　　　　　　　　width: expression(offsetParent.clientWidth);
　　　　　　}
　　　　　　/*下面三组规则用于IE6下top计算*/
　　　　　　#demo_l, #demo_r {
　　　　　　　　top: expression(offsetParent.scrollTop + 300);
　　　　　　}
　　　　　　#demo_t {
　　　　　　　　top: expression(offsetParent.scrollTop);
　　　　　　}
　　　　　　#demo_b {
　　　　　　　　top: expression(offsetParent.scrollTop + offsetParent.clientHeight-offsetHeight);
　　　　　　}
　　</style>
<![endif]-->

9.浮动的div有margin_left属性ie6会加倍无论兼容视图还是无声明视图

解决方案:

　方案一: IE6唯一识别属性_的方式加_display属性_display:inline;

　方案二:

　　　　条件注释<!--[if lte IE 6]>
　　　　<style>
　　　　　　.on{ display:inline }
　　　　</style>
　　　　<![endif]-->

10.cursor兼容自定义指针cur格式的图片url路径问题无论是兼容还是无声明版本

解决方案:cursor:url(Hand.cur), url(/Hand.cur), auto;

11.png图片 IE6里面的png图片不能透明兼容版本和无声明版本都是

解决方案:

<!--[if IE ]>
　　　<style type="text/css">
　　　　　#DIVname{
　　　　　　　　background:none;
　　　　　　　　filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="pngtouming.png"
　　　　　}
　　　</style>
<![endif]-->

12.img浮动 img标签打回车会造成每个图片之间有缝隙

解决方案:可以删除之间的回车键也可以让这些图片浮动

13.在IE浏览器下 input type="text"文本框点击时后面会出现"X",以及type="password"后面会出现眼睛,如何除去这两种默认样式:

::-ms-clear,::-ms-reveal{display:none;}

注:IE9-不识别

14.CSS3前缀 -webkit- webkit渲染引擎 chrome/safari

　　　　　　 -moz- gecko渲染引擎 firefox

　　　　　　 -ms- trident渲染引擎 IE

　　　　　　 -o- 　opeck渲染引擎　opera　　　　

动画、过渡、background-size 都需要加前缀

eg: 动画

 @-webkit-keyframes name{
　　　　0%{动画开始的css样式;}
　　　　100%{动画结束的css样式;}
　}
-webkit-animation:name 8s infinite linear;

过渡:

div.box{
　　　　bottom:-40px;<br>　　  　-webkit-transition:all .3s ease-in-out 0s;
}

注:但是过渡不兼容IE8-,可以用JS动画实现

background-size 同样也不支持IE8,可以考虑用img

15.渐变

解决方案:

filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#35FEA1,endColorStr=#6E9DFF); /*IE 6 7 8*/
    background: -ms-linear-gradient(top, #35FEA1,  #6E9DFF);/* IE 10 */
    background:-moz-linear-gradient(top, #35FEA1,  #6E9DFF); /*火狐*/
    background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/*谷歌*/
    background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/* Safari 4-5, Chrome 1-9*/
    background: -webkit-linear-gradient(top, #35FEA1,  #6E9DFF);/*Safari5.1 Chrome 10+*/
    background: -o-linear-gradient(top, #35FEA1,  #6E9DFF);/*Opera 11.10+*/

16.PIE.htc 可以实现很多css3属性在IE下的兼容性如:圆角、阴影、渐变

(1) 圆角 border-radius

.signBtn{
    height: 40px;
    background-color:#08BCD2;
    color: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    behavior: url(css/PIE.htc);
}

(2)阴影 box-shadow

.box{
　　width:200px;
　　height:200px;
　　-webkit-box-shadow:1px 0 10px;
　　-moz-box-shadow:1px 0 10px;
　　box-shadow: 1px 0 10px;
　　background-color: #fff;
　　behavior: url(css/PIE.htc);/*IE边框阴影*/
}

(3)背景透明rgba

.box{
　　 background-color:rgba(12, 154, 171, 0.29);
    behavior: url(css/PIE.htc);
    -pie-background:rgba(12, 154, 171, 0.29);
}

(4)渐变

.box{
   width:200px;
   height:400px;
   background:-webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393));
   background:-moz-linear-gradient(#9F9, #393);
   -pie-background:linear-gradient(#9F9, #393);
   behavior:url(pie.htc);                
}

注:PIE.htc文件路径相对是相对于css文件,并非html文件,以上例子是将PIE.htc文件放在与css样式文件同一个文件夹css内,而对应的html问价与css文件夹同级

17.JS实现点击跳转到指定位置

$(".arraw-bt").click(function(){
    var scroll_offset = $("#section").offset();
     console.log(scroll_offset);
     $("body,html").animate({//如果只写body,只被chrome支持 只被chrome支持 Firefox和ie不支持
     "scrollTop":scroll_offset.top
     },0);//此处0写上会一下跳转到指定位置,若不写会有过渡效果
   /});

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

前端,兼容性

标签：

前端,兼容性

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无争山庄资源网 Copyright www.whwtcm.com

评论“前端兼容性问题总结(PC端)”

前端兼容性问题总结(PC端)

暂无“前端兼容性问题总结(PC端)”评论...

www.whwtcm.com 无争山庄资源网

129,905影音资源

244,626技术资源

111,817软件资源

578,645站长资源

前端兼容性问题总结(PC端)

前端,兼容性

详解Css3新特性应用之过渡与动画

CSS实现导航条Tab切换的三种方法介绍

评论“前端兼容性问题总结(PC端)”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

前端兼容性问题总结(PC端)

前端,兼容性

详解Css3新特性应用之过渡与动画

CSS实现导航条Tab切换的三种方法介绍

评论“前端兼容性问题总结(PC端)”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存