2023年6月21日发(作者：)
常见的兼容性问题常见的兼容性问题浏览器有着⼤量不同的版本，不同种类的浏览器的内核也不尽相同，所以不同浏览器对代码的解析会存在差异，这就导致对页⾯渲染效果不统⼀的问题。初始化样式因浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，如果不初始化会造成不同浏览器之间的显⽰差异，布局出现错乱，所以要初始化样式，达到统⼀的布局。最粗暴的⽅案就是使⽤*初始化样式，但是其会对于所有的标签加载样式以及计算样式优先级，可能会对性能有所影响。* {
margin: 0; padding: 0;}通常使⽤抹平默认样式差异，当然也可以根据样式定制⾃⼰的。内核样式兼容在CSS3标准还未确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进⾏兼容，所以每种浏览器使⽤了⾃⼰的私有前缀与标准进⾏区分，当标准确⽴后，各⼤浏览器将逐步⽀持不带前缀的CSS3新属性，⽬前已有很多私有前缀可以不写了，但为了兼容⽼版本的浏览器，可以仍沿⽤私有前缀和标准⽅法，逐渐过渡。内核代表浏览器前缀-ms-moz-oTridentIE浏览器GeckoFirefoxPrestoOperaWebkitChrome、Safari-webkit透明属性⽤来设定元素透明度的opacity是CSS 3⾥的⼀个属性，现代浏览器都已经⽀持，对于⽼版本浏览器可以通过加⼊私有前缀来⽀持，对于IE6-IE8可以通过filter属性来⽀持，IE4-IE9都可以通过滤镜写法提供兼容⽀持。opacity: 0.5;-moz-opacity:0.5;filter: alpha(opacity = 50); //IE6-IE8filter: progid:(style = 0, opacity = 50); //IE4-IE9媒体查询对于IE9以下浏览器不⽀持CSS3媒体查询的问题，通常使⽤来作为兼容性解决⽅案。HTML5标签对于IE9以下浏览器不⽀持HTML5新标签的问题，可以使⽤Element创建元素并设置其CSS样式即可，通常使⽤来作为兼容性解决⽅案。placeholder兼容性placeholder是html5新增的⼀个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提⽰显⽰在⽂本框中，当⽂本框获得焦点或输⼊内容时，提⽰⽂字消失。对于其兼容性⾸先需要判断input是否⽀持placeholder，然后在不⽀持的情况下可以通过input的onfocus与onblur事件监听来实现placeholder效果。事件监听句柄在IE9之前，必须使⽤attachEvent⽽不是使⽤标准⽅法addEventListener来注册元素的监听器，事件兼容的问题，通常需要会封装⼀个适配器的⽅法，过滤事件句柄绑定、移除。 var handler = {} //绑定事件 = function(target, type, handler) { if(ntListener) { ntListener(type, handler, false); } else { Event("on" + type, function(event) { return (target, event); }, false); } }; //取消事件监听 = function(target, type, handler) { if(EventListener) { EventListener(type, handler); } else { Event("on" + type, function(event) { return (target, event); }, true); } };阻⽌默认⾏为W3C推荐的阻⽌默认⾏为的⽅式是tDefault()，此⽅法只会阻⽌默认⾏为⽽不会阻⽌事件的传播。IE9之前的浏览器阻⽌默认⾏为需要使⽤Value = false。直接在事件处理函数中return false也能阻⽌默认⾏为，只在DOM0级模型中有效。此外，在jQuery中使⽤returnfalse会同时阻⽌默认⾏为与事件传播，通常也会封装⼀个⽅法来实现默认⾏为的阻⽌。tDefault = function(event) { event = event || ; if (tDefault) { tDefault(); } else { Value = false; }}阻⽌事件冒泡W3C推荐的阻⽌冒泡的⽅法是opagation()，IE9之前则是使⽤Bubble = true;，通常也会封装⼀个⽅法来实现阻⽌事件冒泡。opagation = function(event) { event = event || ; if (opagation) { opagation(); } else { Bubble = false; }}滚动⾼度获取窗⼝的滚动⾼度scrollTop需要采⽤兼容性写法，即使声明
2023年6月21日发(作者：)
常见的兼容性问题常见的兼容性问题浏览器有着⼤量不同的版本，不同种类的浏览器的内核也不尽相同，所以不同浏览器对代码的解析会存在差异，这就导致对页⾯渲染效果不统⼀的问题。初始化样式因浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，如果不初始化会造成不同浏览器之间的显⽰差异，布局出现错乱，所以要初始化样式，达到统⼀的布局。最粗暴的⽅案就是使⽤*初始化样式，但是其会对于所有的标签加载样式以及计算样式优先级，可能会对性能有所影响。* {
margin: 0; padding: 0;}通常使⽤抹平默认样式差异，当然也可以根据样式定制⾃⼰的。内核样式兼容在CSS3标准还未确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进⾏兼容，所以每种浏览器使⽤了⾃⼰的私有前缀与标准进⾏区分，当标准确⽴后，各⼤浏览器将逐步⽀持不带前缀的CSS3新属性，⽬前已有很多私有前缀可以不写了，但为了兼容⽼版本的浏览器，可以仍沿⽤私有前缀和标准⽅法，逐渐过渡。内核代表浏览器前缀-ms-moz-oTridentIE浏览器GeckoFirefoxPrestoOperaWebkitChrome、Safari-webkit透明属性⽤来设定元素透明度的opacity是CSS 3⾥的⼀个属性，现代浏览器都已经⽀持，对于⽼版本浏览器可以通过加⼊私有前缀来⽀持，对于IE6-IE8可以通过filter属性来⽀持，IE4-IE9都可以通过滤镜写法提供兼容⽀持。opacity: 0.5;-moz-opacity:0.5;filter: alpha(opacity = 50); //IE6-IE8filter: progid:(style = 0, opacity = 50); //IE4-IE9媒体查询对于IE9以下浏览器不⽀持CSS3媒体查询的问题，通常使⽤来作为兼容性解决⽅案。HTML5标签对于IE9以下浏览器不⽀持HTML5新标签的问题，可以使⽤Element创建元素并设置其CSS样式即可，通常使⽤来作为兼容性解决⽅案。placeholder兼容性placeholder是html5新增的⼀个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提⽰显⽰在⽂本框中，当⽂本框获得焦点或输⼊内容时，提⽰⽂字消失。对于其兼容性⾸先需要判断input是否⽀持placeholder，然后在不⽀持的情况下可以通过input的onfocus与onblur事件监听来实现placeholder效果。事件监听句柄在IE9之前，必须使⽤attachEvent⽽不是使⽤标准⽅法addEventListener来注册元素的监听器，事件兼容的问题，通常需要会封装⼀个适配器的⽅法，过滤事件句柄绑定、移除。 var handler = {} //绑定事件 = function(target, type, handler) { if(ntListener) { ntListener(type, handler, false); } else { Event("on" + type, function(event) { return (target, event); }, false); } }; //取消事件监听 = function(target, type, handler) { if(EventListener) { EventListener(type, handler); } else { Event("on" + type, function(event) { return (target, event); }, true); } };阻⽌默认⾏为W3C推荐的阻⽌默认⾏为的⽅式是tDefault()，此⽅法只会阻⽌默认⾏为⽽不会阻⽌事件的传播。IE9之前的浏览器阻⽌默认⾏为需要使⽤Value = false。直接在事件处理函数中return false也能阻⽌默认⾏为，只在DOM0级模型中有效。此外，在jQuery中使⽤returnfalse会同时阻⽌默认⾏为与事件传播，通常也会封装⼀个⽅法来实现默认⾏为的阻⽌。tDefault = function(event) { event = event || ; if (tDefault) { tDefault(); } else { Value = false; }}阻⽌事件冒泡W3C推荐的阻⽌冒泡的⽅法是opagation()，IE9之前则是使⽤Bubble = true;，通常也会封装⼀个⽅法来实现阻⽌事件冒泡。opagation = function(event) { event = event || ; if (opagation) { opagation(); } else { Bubble = false; }}滚动⾼度获取窗⼝的滚动⾼度scrollTop需要采⽤兼容性写法，即使声明
发布评论