兼容性

最新推荐文章于 2024-04-12 10:52:06 发布

sharryling

最新推荐文章于 2024-04-12 10:52:06 发布

阅读量196

点赞数

分类专栏： web知识

本文链接：https://blog.csdn.net/qq_22703205/article/details/88880440

版权

web知识专栏收录该内容

14 篇文章 0 订阅

订阅专栏

html

1.针对IE浏览器比较好的解决方案是html5shiv。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别
1.H5新标签在IE9以下的浏览器识别
<!–[if lt IE 9]>
<script type=“text/javascript” src=“js/html5shiv.js”>
<![endif]–>
html5shiv.js下载地址
https://github.com/aFarkas/html5shiv/releases
针对IE浏览器比较好的解决方案是html5shiv。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。

css

1.滚动栏

浏览器	获取 scrollTop高度特点
谷歌	document.body.scrollTop
safari	比较特别，有自己获取scrollTop的函数： window.pageYOffset ；
IE6/7/8	没有doctype声明的页面里，可以使用 document.body.scrollTop 来；有doctype声明的页面，则可以使用 document.documentElement.scrollTop ；
Firefox	直接用 document.documentElement.scrollTop ；

事件绑定

方式有三：

事件绑定兼容性

兼容写法：

    if(window.addEventListener){
        //chrom firefor ...
        object.addEventListener('click',function(){
        },false);
    }
    else if(window.attachEvent){
        //IE
        object.attachEvent('onclick',function(){})
    }
    else{
        object.onclick = function(){}
    }

事件响应

① on + 事件：浏览器都能用，但是只能绑定一次

在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。
在JavaScript代码中绑定事件的语法为：
elementObject.onXXX=function(){
    // 事件处理代码
}

其中：
elementObject 为DOM对象，即DOM元素。
onXXX 为事件名称。
例如，为 id="demo" 的按钮绑定一个事件，显示它的 type 属性：
<input  id="demo"  type="button"  value="点击我，显示 type 属性" />
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
    alert(this.getAttribute("type"));  //  this 指当前发生事件的HTML元素，这里是<div>标签
}
</script>
--------------------- 
原文：https://blog.csdn.net/tylerlee008/article/details/79125697

在DOM元素中直接绑定
这里的DOM元素，可以理解为HTML标签。JavaScript支持在标签中直接绑定事件，语法为：
onXXX=“JavaScript Code”

其中：

onXXX 为事件名称。例如，鼠标单击事件 onclick ，鼠标双击事件 ondouble，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
JavaScript Code 为处理事件的JavaScript代码，一般是函数。

例如，单击一个按钮，弹出警告框的代码有如下两种写法。

原生函数

<input οnclick=“alert(‘谢谢支持’)” type=“button” value=“点击我，弹出警告框” />

② addEventListener：谷歌

在这里插入图片描述

document.getElementById('test_div').addEventListener('click', function () {
        console.log('div');
    },true)
    document.getElementById('test_button').addEventListener('click', function(){
        console.log('test1');
    },false);
--------------------- 
原文：https://blog.csdn.net/tylerlee008/article/details/79125697

③ attachEvent：IE

IE9以下不支持 addEventListener函数，IE浏览器要使用 attachEvent函数代替。
在这里插入图片描述

    var ele = document.getElementById('xDiv');
    
    ele.attachEvent('onclick',()=>{
        console.log('指向全局的this',this);
    });

3.CSS3属性在IE8以及IE9中的兼容性表现

如果某些库（如bootstrap）不支持IE的兼容模式，为了解决这个问题，我们需要在head中引入以下meta标签。这个标签能够确保你的每个页面能够在兼容模式下正常地被渲染。
是针对 IE8 版本的一个特殊文件头标记，Edge模式告诉IE以最高级模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。

<meta http-equiv="X-UA-Compatible" content="IE=edge”>

浏览器市场份额的激烈竞争，给网页设计开发人员带来了兼容性设计的麻烦。仅IE浏览器就有好几个主流版本，IE6、IE7、IE8 等等。当然使用诸如 IETester，多版本 IE 共存解决方案之类的第三方集成工具，可以方便代码调试。但我们总需要找寻一种更为省时省力的方法。
X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记，用于为 IE8 指定不同的页面渲染模式。对于ie8之外的浏览器是不识别的

4.bootstrap

步骤一同3：

<meta http-equiv="X-UA-Compatible" content="IE=edge”>

步骤二：
见：https://blog.csdn.net/qq_22703205/article/details/88933210
在这里插入图片描述

5.条件注释判断浏览器版本

<!--[if lt IE 9]>        <!--[endif]>

版本小于9，不包括9。

<!--[if lt IE 9]>        <!--[endif]> 
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->