一、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')";
}

路径必须为绝对路径。

15、格式化代码引发的css编译失败

二、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、一些动画问题

9、addEventListener

10、blur和click事件冲突

11、原生JavaScript支持6种方式获取元素

12、IE6,7,8不支持forEach和map方法

13、网页音乐不能自动播放

14、safari浏览器中,new Date("yyyy-mm-dd")报错invalid date

safari的实现中,没有支持"yyyy-mm-dd"格式,得用"yyyy/mm/dd"代替,或者用moment库。

PC端问题列表及解决方案的更多相关文章

  1. 曾经的pc端项目踩到的一些兼容性的坑及其解决方案

    曾经公司pc端项目一直最低兼容到IE7,要求和chrome下浏览效果一致,真心坑坏了我和另外一个小伙伴(另一个小伙伴以前也没处理过兼容问题).不过还好,在这里真心感谢鑫哥博客的详解,从底层原理讲到了具 ...

  2. PC端的软件端口和adb 5037端口冲突解决方案

    引用https://www.aliyun.com/jiaocheng/32552.html 阿里云 >  教程中心   >  android教程 >  PC端的软件端口和adb 50 ...

  3. dede手机端首页点击文章内容、列表,却跳到pc端

    手机访问到手机端首页,点击列表.内容.图片等都跳到pc端,是什么原因? 查看m模板里面的index.html文件生成的代码是绝对路径(数字随机)13.html 而不是view.php?aid=13 解 ...

  4. PC端触底效果反复触发的解决方案

    最近在做一个PC端的项目,要求是在滑动到页面的底部的时候就动态的加载下一页的数据,代码实现思路如下: 首先,我们需要知道浏览器中有三个高度,分别是屏幕高度(outerHeight),文档容器高度(in ...

  5. 网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案(IOS、安卓、微信端)

    最近公司官网需要使用视频当做banner背景且自动播放,并且因为是官网需要做到PC端和移动端都可以适配兼容,这些问题很是头疼: 兵来将挡,水来土掩,进过查阅相关技术资料,现已完美兼容PC端和移动端.下 ...

  6. 简述移动端与PC端的区别

    1.移动端与PC端的区别 PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更 ...

  7. PDA手持扫描资产标签,盘点完成后将数据上传到PC端,固定资产系统查看盘点结果

    固定资产管理系统介绍: 致力于研发条码技术.集成条码系统的专业性公司,针对客户的不同需求,提供一站式的企业条码系统解决方案:包括功能强大的软件系统.安全可靠的无线网络.坚固耐用的硬件系统.灵活易用的管 ...

  8. Macaca自动化测试之PC端测试

    Macaca是一套完整的自动化测试解决方案.由阿里巴巴公司开源: http://macacajs.github.io/macaca/ 特点: 同时支持PC端和移动端(Android.iOS)自动化测试 ...

  9. 淘宝购物车页面 PC端和移动端实战

    最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...

随机推荐

  1. IDEA+Maven+Spring MVC HelloWorld示例

    用Maven创建Web项目 选择webapp模板 创建成功后点Enable Auto-Import idea给我们创建出来的结构是这样的,这还不标准,需要自己修改. 在main文件夹下创建java文件 ...

  2. 一次mysql主从加keepalived配置搭建及切换演示

    [需求] 根据需求需要搭建mysql主从架构数据库及加keepalived进行自动切换VIP [环境介绍]  系统环境:CentOS release 6.4 (Final) + Server vers ...

  3. 虚拟云主机创建多个站点方法(.htaccess实现)

    阿里的普通版虚拟云主机最多只能建一个站点,但可以绑定多个域名.如果我们想创建2个或3个主机怎么办呢?难道需要再另外购买一台主机? 其实我们可以通过.htaccess文件来定义相关域名绑定对应的网站目录 ...

  4. MVC实例应用模式

    MVC实例应用模式 1.可用性: 比如异常处理 2.可修改性: 比如用接口实现 3.性能战术: 4.易用性战术: 分层实现 5.可测试性战术: 实现对其接口进行测试,并不需要对其实现方法进行 6.安全 ...

  5. ipmitool 工具使用

      ipmi 工具使用: 一. ipmitool lan print ipmitool -I open lan set 1 ipsrc static 设置本地BMC地址为静态,才能设置IP ipmit ...

  6. vue项目的mode:history模式

    最近做的Vue + Vue-Router + Webpack +minitUI项目碰到的问题,在此记录一下,Vue-router 中有hash模式和history模式,vue的路由默认是hash模式, ...

  7. java平台学习笔记

    java程序从编写源码开始到程序执行一共有三个阶段,编写期,编译期,运行期. 通常,人们都希望自己的程序更快(不仅仅是执行更快,也有编写更快),因此java在不断更新. java源码先通过javac编 ...

  8. sql的四种匹配模式

    1. % 表示任意0个或多个字符.如下语句:Select * FROM user Where name LIKE '%三%'; 将会把name为“张三”,“三脚猫”,“唐三藏”等等有“三”的全找出来. ...

  9. python数字常量

    数学常量 pi 数学常量 pi(圆周率,一般以π来表示) e 数学常量 e,e即自然常数(自然常数).

  10. 项目Alpha冲刺(2/10)

    1.项目燃尽图 2.今日进度描述 项目进展 完成数据库和服务器的连接部分,完成了一些应用的基本功能. 问题困难 第一次使用服务器,配置环境部署项目都花了很长时间,学习中存在许多问题. 心得体会 应该早 ...