常见的浏览器兼容

最新推荐文章于 2022-07-19 15:25:20 发布

weixin_30387339

最新推荐文章于 2022-07-19 15:25:20 发布

阅读量77

点赞数

原文链接：http://www.cnblogs.com/hcw136156133/p/4557611.html

版权

一、html相关

（1）IE6 不支持 PNG24 格式图片的半透明效果。 IE6 浏览器在处理带有半透明通道的 PNG24 格式图片时，错误的将半透明通道渲染成灰色。其他浏览处理正常。

　　解决方法：使用 IE 专有滤镜 AlphaImageLoader Filter 来修复 IE6 透明通道问题；或者使用脚本批量处理方式：

function fixpng24(){
    var arVersion = navigator.appVersion.split("MSIE");
    var version = parseFloat(arVersion[1]);
    if ((version >= 5.5) && (document.body.filters)){
       for(var i=0; i<document.images.length; i++){
          var img = document.images[i];
          if (img.src.toLowerCase().slice(-3) == "png"){
             var imgID = (img.id) ? "id='" + img.id + "' " : "";
             var imgClass = (img.className) ? "class='" + img.className + "' " : "";
             var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
             var imgStyle = "display:inline-block;" + img.style.cssText ;
             if (img.align == "left") imgStyle = "float:left;" + imgStyle;
             if (img.align == "right") imgStyle = "float:right;" + imgStyle;
             if (img.parentElement.href) imgStyle = "cursor:pointer;" + imgStyle;
             var strNewHTML = "<span " + imgID + imgClass + imgTitle
             + " style=\"width:" + img.width + "px; height:" + img.height + "px;" + imgStyle
             + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
             + "(src='" + img.src + "', sizingMethod='scale');\"></span>";
             img.outerHTML = strNewHTML;
             i--;
          }
       }
    }
}

（2）只有 IE6 中给 IMG 设置相同的 src 时会重载图片。

　　原因：IE7 IE8 Firefox Safari Chrome Opera 等浏览器在重新设置相同的src后并没有向服务器端发送新的请求，说明此时他们均缓存了图片。

而 IE6 则没有该缓存机制，每次 "src" 修改后均会再次从远程请求图片。

　　解决方法：如果需要重复设置相同的 src 值时，均触发 IMG 的 onload 事件，或者需要每次均从服务器端下载图片数据的时候，可以采用图片地址后加上随机数或当前时间戳参数的手段，避免内容被缓存。

（3）在 IE6 IE7 IE8(Q) 中 BUTTON 元素 type 属性的默认值不是规范规定的 submit 而是 button，则默认没有设定 type 属性时的 BUTTON 元素将创建一个普通按钮，而不是提交按钮。

　　影响：这会导致按钮的类型在不同浏览器之间出现差异，若按钮位于表单中，则在 IE8(S) 及其他非 IE 浏览器中，点击这种没有设定 type 属性的按钮会触发表单提交事件。

　　解决方法：在使用 BUTTON 元素时应明确的为其设定 type 属性，避免因为浏览器默认属性值不同导致按钮类型出现差异。

（4）各浏览器对未闭合标签的容错方式不同。

　　解决方法：使用闭合标签。

（5） 'INPUT[type=file]' 的 'value' 属性值在各浏览器中存在差异。

　　影响：上传图片时，使用javascript来获取input元素的value属性值，然后将值赋给img元素的src属性，从而实现上传图片的显示。但是事实是仅实在IE浏览器下才能实现。　

　　原因：各个浏览器对用户选择的本地文件信任程度不同，只有 IE6 IE7 IE8 浏览器在默认安全设置下信任用户选择的本地文件。

　　　　a、IE 中可以通过 JavaScript 脚本获得所上传图片的完整路径并可以根据这个路径将图片显示在客户端；

　　　　b、Opera Chrome 中通过 JavaScript 脚本所获得的为所上传图片的伪路径 ( fakepath ) ，因此不能根据这个路径显示本地图本片；

　　　　c、FireFox Safari 中获得的为图片的名称，因此也不能根据这个独立图片名显示本地图本片。

　　解决方法：先判断浏览器，IE6 IE7 IE8使用value，其他浏览器，使用FileReader来实现，代码如下：

<body>
<input id="f" type="file"/>
<button οnclick="a()">clike</button><br/>
<img id="img" style="width:150px;height:110px;"/>
</body>
<script>
function a(){
var file=document.getElementById("f");
var img=document.getElementById("img");
var path=file.files[0];
var reader = new FileReader();
reader.onload = function () {
var strPath=reader.result;
img.src=strPath;
console.log(strPath);
};
reader.readAsDataURL(path); //可以将读取到的文件编码成Data URL
}

</script>

二、css渲染

　　（1）浏览器默认的margin和padding不同。

　　　　解决方案：加一个全局的*{margin:0;padding:0;}来统一。

　　（2）浮动ie产生的双倍距离，如#div{float:left;width:200px;margin-left:10px;}，在IE浏览器下会产生20px的左边距。

　　　　解决方案：将其设置为行内元素，display：inline。

　　（3）IE不支持min-height，min-width，max-height，max-width属性。

　　　　解决方法：使用javascript来解决。

　　（4）DIV浮动IE文本产生3象素的bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距。代码如下：

　　　　#box{ float:left; width:800px;}

　　　　#left{ float:left; width:50%;}

　　　　#right{ width:50%;}

　　　　 *html #left{ margin-right:-3px; //这句是关键，即解决方法}

　　　　 </div>

　　　（5）IE6、IE7、IE8不支持子选择器、兄弟选择器、属性选择器。

　　　　　　尽量避免使用它们。

　　　（6）超链接访问过后hover样式就不会显示，被点击访问过的超链接样式不在具有hover和active。

　　　　解决方案：改变CSS属性的排列顺序：L-v-H-A：

　　　　a:link {} a:visited {} a:hover {} a:active {}

　　　（7）IE6下图片下有空隙产生。

　　　　解决方案：改变html的排版；将display属性设置为block。

　　　（8）IE6下无法设置1px左右高度的容器。

　　　　原因：IE6下容器有默认的行高。

　　　　解决方案：overflow:hidden | zoom:0.08 | line-height:1px

三、javascript

　　　（1）IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。

　　　（2）IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性.

　　　（3）IE6 IE7 IE8(Q) 不支持 JSON 对象。

　　　　　影响：使用了 JSON 对象的脚本代码在 IE6 IE7 IE8(Q) 中运行的时候可能会抛出异常，导致功能失效。

　　　　　解决方法：可以使用 window.eval() 或 new Function(){} 的方式解析 JSON 格式字符串。

　　　（4）IE6 IE7 IE8(Q) 中的 getElementById 方法的参数不区分大小写。

　　　　影响：如果作为参数的 id 和目标元素的实际 id 的大小写不匹配，在某些浏览器中将无法获取该元素。

　　　　解决方法：在使用 document.getElementById 获取页面元素时，应保证作为参数的 id 与目标元素的实际 id 值完全一致。

　　　（5）各浏览器对于 document、document.body、document.documentElement 对象的 onscroll 事件的支持存在差异。

　　　　解决方案：在给整个浏览器窗口绑定滚动事件 (scroll) 的时候，绑定到 window 对象上。

　　（6）IE 在创建 DOM 树时会忽略某些空白字符。

　　　　影响：用户针对 IE 设计的脚本如果使用节点对象的 nodeList、firstChild、lastChild、previousSibling 或 nextSibling 方法，可能会因为此问题而无法在其他浏览器中达到相同的目的，如脚本执行出错，或对错误的目标对象进行了操作。

　　　　解决方案：1、没有必要时尽量去掉各标签之间的空白字符。

　　　　　　　　　2、在获取节点时做类型判断。

浏览器兼容地址：http://w3help.org/zh-cn/causes/index.html

转载于:https://www.cnblogs.com/hcw136156133/p/4557611.html

weixin_30387339

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常见的浏览器兼容

一、html相关（1）IE6 不支持 PNG24 格式图片的半透明效果。IE6 浏览器在处理带有半透明通道的 PNG24 格式图片时，错误的将半透明通道渲染成灰色。其他浏览处理正常。　　解决方法：使用 IE 专有滤镜 AlphaImageLoader Filter 来修复 IE6 透明通道问题；或者使用脚本批量处理方式：function fixpng24(){ v...
复制链接

扫一扫