前端 PC端兼容性问题总结

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

　　解决方案:

1	`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不支持

　　解决方案:

1 2	`display` `:inline-` `block` `;` `*` `display` `:` `inline` `;`

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

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

1	`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;

　　　　方案二:

条件注释

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"后面会出现眼睛,如何除去这两种默认样式:

1	`::-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 . 3 s ease-in-out 0 s;

}

注:但是过渡不兼容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写上会一下跳转到指定位置,若不写会有过渡效果/});

前端 PC端兼容性问题总结相关推荐

前端pc端、手机端适配基本知识
前端pc端.手机端适配问题一个项目如何做到手机.电脑共用的方式 1.第一种方式:响应式布局(栅格布局),即通过媒体查询控制css样式,从而实现一套代码手机.电脑共享.一般而言,手机.电脑共享样式,其 ...
千锋教育Web前端——PC端企业类型整页制作
千锋教育Web前端--PC端企业类型整页制作文章目录千锋教育Web前端--PC端企业类型整页制作一.PC端的布局二.源码 1.CSS源码 2.HTML源码三.运行结果一.PC端的布局通栏 ...
前端pc端和移动端的区别？
1.兼容性 pc端需要考虑浏览器兼容性,移动端主要考虑屏幕分辨率和不同系统的兼容性. 2.页面布局 PC端常用布局固定宽度980px居中,移动端屏幕的大小和分辨率不同,多用响应式布局,使用em(以父元 ...
前端PC端微信扫码登录
PC端微信扫码登录一.微信开放平台 1.创建网站应用 2.设置回调域名二.代码 1.在index.html页面引入http://res.wx.qq.com/connect/zh_CN/htmled ...
web前端PC端百度地图的开发指导
先看效果图片: 最终效果描述: 1.搜索:有搜索提示,并且可以根据选择进行定位: 2.获取经纬度:点击地图中某点,在文本框中获取当前点的经纬度的值: 3.获取详细地址:点击地图中某点时,将该点的详细地 ...
WEB前端浏览器兼容性问题(PC端及移动端)
WEB前端浏览器兼容性问题(pc端及移动端) PC端 (一)html部分1.H5新标签在IE9以下的浏览器识别 <!--[if lt IE 9]> <script type=&quo ...
前端页面开发浅谈：PC 端设计如何“完美”迁移到移动端？
文章目录前言一.我真的需要一个登录页面吗? 1.1.用户眼中不确定持续使用的系统 1.2.免登陆实现的功能可以满足用户需求二.举个移动端登陆例子三.前端学习不是造火箭四.前端的布局设计五. ...
uniapp制作pc端响应式布局——带开源前端【伸手党福利】【持续更新】
实现目标:uniapp一套式制作pc端.pad端.手机端.符合国家等保二级标准. 目录技术分析 pc端(pad端)与移动端的开发区别 1. 用户操作习惯. 2. 界面区别. 3. 表格区别 4. 技 ...
javascript 判断前端是 pc端还是移动端
javascript 判断前端是 pc端还是移动端 <!DOCTYPE html> <html lang="en"> <head>< ...

前端 PC端兼容性问题总结

前端 PC端兼容性问题总结相关推荐

最新文章

热门文章