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

路径必须为绝对路径。

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

16、chrome字体小于12px

/* 当font-size<12，chrome都当12px处理了，要写小字体，如下：*/
.box {
   -webkit-transform:scale(0.8);
}

二、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库。

 

转载于:https://www.cnblogs.com/camille666/p/pc_browser_compatible.html