PC端问题列表及解决方案
一、CSS相关
1、PC站百度文件引用不到,出现报错,问题可能是电脑拦截了百度广告。
解决方案:把拦截广告的浏览器插件关掉。
2、ie6双倍边距:在使用了float的情况下,不管是向左还是向右都会出现双倍。
解决方案:使用display:inline。
3、ie6吞吃现象:上下两个div,上面的div设置背景,却发现下面没有设置背景的div 也有了背景。
解决方案:使用zoom:1。
4、修正IE6振动
解决方案:background-attachment:fixed;
5、ie6下,绝对定位的div下包含相对定位的div,如果给内层相对定位的div高度height具体值,内层相对层将具有100%的width值,外层绝对层将被撑大。
解决方案:给内层相对层float属性。
6、position:fixed,在IE6中无效。
解决方案: _position:absolute; _top:expression(eval(document.documentElement.scrollTop));
7、css hack
ie6可识别_,*; ie7可识别*,!important; ff可识别!Important。
8、注释也能产生bug
解决方案:用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。
9、img下的留白
解决方案:给img设定display:block。
10、如何阻止浏览器把空格渲染成占位符?
设置父容器字体大小为0,指定子容器字体大小为某具体值。
11、background-image:url(../images/fireworks.png?v=2)
加问号的作用,总是取服务器上的最新资源。
12、IE8下面的png图片无法正常显示
原因:打开调试面板,你会发现IE8浏览器把PNG格式的img解析成了span标签,导致图无法显示。 解决方案:在样式里面对span设置宽高和display:inline-block;即可。
13、IE8下面的css3渐变没有作用
解决方案:通常用1px的渐变图片横向平铺替代css3样式或者写滤镜
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
14、IE8不支持background-size
解决方案:.ie8-bgsize{ background:url("pic/bg.jpg"); background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pic/bg.jpg',sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pic/bg.jpg',sizingMethod='scale')"; }
路径必须为绝对路径。
二、JS相关
1、IE8,9,10不支持console
解决方案:使用前,先判断是否支持console.log,支持再用。
console && console.log('正在调试');
或者在网站中引入console.js。用来修复在不支持或部分支持console的浏览器下,调用console.***出错的问题。
2、IE9,10,Edge浏览器中, 点击搜索下拉item,页面报错400,IE浏览器地址栏对中文字符不解析,比如kw=关键字。
解决方案:对搜索下拉每个item的关键字进行编码encodeURIComponent,比如kw=%E5%85%B3%E9%94%AE%E5%AD%97。
3、IE不支持placeholder属性
解决方案:在页面中写div,手动写JS模拟placeholder的功能(不要在文本框中直接使用placeholder属性)或者引入placeholder.js插件,就可以在文本框中使用placeholder属性。
4、IE10,Edge文本框遗留的数据和placeholder重叠
解决方案:如果是IE10或者Edge浏览器,就在beforeUnload事件中加清空文本框值的操作。
5、IE8,9,10不支持input事件,所以最好用input和propertychange事件
var eventName = (navigator.userAgent.indexOf("MSIE")!=-1) ? "propertychange" :"input"; $("J_textBox").on(eventName,function(){ doSomething(); });
6、浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)
var w=window.innerWidth//对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari || document.documentElement.clientWidth//对于 Internet Explorer 8、7、6、5 || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
7、动画兼容性写法 requestAnimationFrame
8、一些动画问题
13、网页音乐不能自动播放
14、safari浏览器中,new Date("yyyy-mm-dd")报错invalid date
safari的实现中,没有支持"yyyy-mm-dd"格式,得用"yyyy/mm/dd"代替,或者用moment库。
PC端问题列表及解决方案的更多相关文章
- 曾经的pc端项目踩到的一些兼容性的坑及其解决方案
曾经公司pc端项目一直最低兼容到IE7,要求和chrome下浏览效果一致,真心坑坏了我和另外一个小伙伴(另一个小伙伴以前也没处理过兼容问题).不过还好,在这里真心感谢鑫哥博客的详解,从底层原理讲到了具 ...
- PC端的软件端口和adb 5037端口冲突解决方案
引用https://www.aliyun.com/jiaocheng/32552.html 阿里云 > 教程中心 > android教程 > PC端的软件端口和adb 50 ...
- dede手机端首页点击文章内容、列表,却跳到pc端
手机访问到手机端首页,点击列表.内容.图片等都跳到pc端,是什么原因? 查看m模板里面的index.html文件生成的代码是绝对路径(数字随机)13.html 而不是view.php?aid=13 解 ...
- PC端触底效果反复触发的解决方案
最近在做一个PC端的项目,要求是在滑动到页面的底部的时候就动态的加载下一页的数据,代码实现思路如下: 首先,我们需要知道浏览器中有三个高度,分别是屏幕高度(outerHeight),文档容器高度(in ...
- 网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案(IOS、安卓、微信端)
最近公司官网需要使用视频当做banner背景且自动播放,并且因为是官网需要做到PC端和移动端都可以适配兼容,这些问题很是头疼: 兵来将挡,水来土掩,进过查阅相关技术资料,现已完美兼容PC端和移动端.下 ...
- 简述移动端与PC端的区别
1.移动端与PC端的区别 PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更 ...
- PDA手持扫描资产标签,盘点完成后将数据上传到PC端,固定资产系统查看盘点结果
固定资产管理系统介绍: 致力于研发条码技术.集成条码系统的专业性公司,针对客户的不同需求,提供一站式的企业条码系统解决方案:包括功能强大的软件系统.安全可靠的无线网络.坚固耐用的硬件系统.灵活易用的管 ...
- Macaca自动化测试之PC端测试
Macaca是一套完整的自动化测试解决方案.由阿里巴巴公司开源: http://macacajs.github.io/macaca/ 特点: 同时支持PC端和移动端(Android.iOS)自动化测试 ...
- 淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
随机推荐
- IDEA+Maven+Spring MVC HelloWorld示例
用Maven创建Web项目 选择webapp模板 创建成功后点Enable Auto-Import idea给我们创建出来的结构是这样的,这还不标准,需要自己修改. 在main文件夹下创建java文件 ...
- 一次mysql主从加keepalived配置搭建及切换演示
[需求] 根据需求需要搭建mysql主从架构数据库及加keepalived进行自动切换VIP [环境介绍] 系统环境:CentOS release 6.4 (Final) + Server vers ...
- 虚拟云主机创建多个站点方法(.htaccess实现)
阿里的普通版虚拟云主机最多只能建一个站点,但可以绑定多个域名.如果我们想创建2个或3个主机怎么办呢?难道需要再另外购买一台主机? 其实我们可以通过.htaccess文件来定义相关域名绑定对应的网站目录 ...
- MVC实例应用模式
MVC实例应用模式 1.可用性: 比如异常处理 2.可修改性: 比如用接口实现 3.性能战术: 4.易用性战术: 分层实现 5.可测试性战术: 实现对其接口进行测试,并不需要对其实现方法进行 6.安全 ...
- ipmitool 工具使用
ipmi 工具使用: 一. ipmitool lan print ipmitool -I open lan set 1 ipsrc static 设置本地BMC地址为静态,才能设置IP ipmit ...
- vue项目的mode:history模式
最近做的Vue + Vue-Router + Webpack +minitUI项目碰到的问题,在此记录一下,Vue-router 中有hash模式和history模式,vue的路由默认是hash模式, ...
- java平台学习笔记
java程序从编写源码开始到程序执行一共有三个阶段,编写期,编译期,运行期. 通常,人们都希望自己的程序更快(不仅仅是执行更快,也有编写更快),因此java在不断更新. java源码先通过javac编 ...
- sql的四种匹配模式
1. % 表示任意0个或多个字符.如下语句:Select * FROM user Where name LIKE '%三%'; 将会把name为“张三”,“三脚猫”,“唐三藏”等等有“三”的全找出来. ...
- python数字常量
数学常量 pi 数学常量 pi(圆周率,一般以π来表示) e 数学常量 e,e即自然常数(自然常数).
- 项目Alpha冲刺(2/10)
1.项目燃尽图 2.今日进度描述 项目进展 完成数据库和服务器的连接部分,完成了一些应用的基本功能. 问题困难 第一次使用服务器,配置环境部署项目都花了很长时间,学习中存在许多问题. 心得体会 应该早 ...