浏览器兼容性 | 易学教程

Event对象跨浏览器兼容性写法

阅读更多关于 Event对象跨浏览器兼容性写法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Event对象跨浏览器兼容性写法</title> </head> <body> <script> var EventUtil={ //添加事件 addHandler:function(element,type,handler){ if (element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent("on"+type,handler); }else{ element["on"+type]=handler; } }, //移除事件 removeHandler:function (element,type,handler){ if (element.removeEventListener){ element

HTML5浏览器支持及兼容性处理

阅读更多关于 HTML5浏览器支持及兼容性处理

1、现代的浏览器都支持HTML5。 2、所有浏览器不管是新的还是旧的对无法识别的元素会作为内联元素自动处理。 3、HTML5定义了8个HTML语义元素，所有这些元素都是块级元素，为了能让旧版本的浏览器正确显示这些元素，你可以设置css的display属性值为block，如下： header, section, footer, aside, nav, main, article, figure { display: block; } 4、你可以向HTML添加新元素，如下： <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>为 HTML 添加新元素</title> <script>document.createElement("myHero")</script> <style> myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; } </style> </head> <body> <myHero>我的第一个新元素</myHero> </body> </html> JavaScript语句 document.createElement("myHero") 是为ie浏览器添加新的元素

浏览器兼容性系列--浅谈window.attachEvent

阅读更多关于浏览器兼容性系列--浅谈window.attachEvent

以前写 JavaScript 脚本时，事件都是采用 object.event = handler; 的方式初始化。这种方式对于 Internet Explorer、Mozilla/Firefox 和 Opera 来说很通用。但是有一个问题就是，这种方式只能一个事件对应一个事件处理过程。如果希望一个事件可以依次执行多个处理过程就不好用了。但是 Internet Explorer 从 5.0 开始提供了一个 attachEvent 方法，使用这个方法，就可以给一个事件指派多个处理过程了。attachEvent 对于目前的 Opera 也适用。但是问题是 Mozilla/Firefox 并不支持这个方法。但是它支持另一个 addEventListener 方法，这个方法跟 attachEvent 差不多，也是用来给一个事件指派多个处理过程的。但是它们指派的事件有些区别，在 attachEvent 方法中，事件是以 “on” 开头的，而在 addEventListener 中，事件没有开头的 “on”，另外 addEventListener 还有第三个参数，一般这个参数指定为 false 就可以了。因此要想在你的程序中给一个事件指派多个处理过程的话，只要首先判断一下浏览器，然后根据不同的浏览器，选择使用 attachEvent 还是 addEventListener 就可以了。实例如下

浏览器的兼容性以及写法

阅读更多关于浏览器的兼容性以及写法

第一个清除浮动的兼容性第二个透明度的兼容写法第三个 js获取节点的兼容写法第四个获取计算机计算的所有属性第五个获取元素子节点childNodes 这个属性有兼容性第六个动态创建节点，元素没有子节点，Ie低版本会读取不到，而标准浏览器会。第七个获取浏览器可见区的高度宽度 body 第八个解决Css3中的兼容性第九个 Event的兼容性第十个事件绑定的兼容性写法第十一个 Mouseevent有兼容性第十二个 Event对象的兼容性第十三个事件源（点击那个元素，那个元素就是事件源）兼容性第十四个阻止事件冒泡兼容性第十五个阻止事件默认行为兼容性清楚浮动在低版本浏览器不行，需要处理兼容性加一个 .clearfix{ *zoom：1；} 为什么加了 .clearfix{*zoom：1;} 它是专门针对Ie 6/7低版本的，如果没有加 .clearfix{*zoom：1；}如果是ie 6/7你给这个元素加了clearfix不起作用，只有加它再给这个父级加 clearfix 才有效果。它是解决iE清除浮动在低版本浏览器兼容性第二个透明度的兼容写法 rgb 和rgba 和oopacity rgb是颜色的表达方法值是 0-255 如 background：rgb（12，13，14） opacity 表示透明度值是0-1； rgba（）人是red0

LoadRunner 与浏览器兼容性

阅读更多关于 LoadRunner 与浏览器兼容性

LoadRunner 兼容的浏览器版本 8.0 最高ie6 8.1 最高ie6 9.0 最高ie7 9.5 最高ie8 11.0 最高ie9( win7 32位+LR11+IE10可用，但win7 64位+LR11+IE10不可用，降至IE9可用)，支持firefox3.6、24.0 ———————————————— 版权声明：本文为CSDN博主「Xiejunyi12」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/xiejunyi12/article/details/52230014 来源： https://www.cnblogs.com/gmeihe17/p/12021112.html

前端必备面试题(一)

阅读更多关于前端必备面试题(一)

Web前段面试题 1.doctype在严格模式下和混杂模式有什么区别? 1.<!DOCTYPE>声名位于文档的最前面，在<HTML> 标签的前面，告知浏览器以何种模式来渲染文档。 2.严格模式的排版和JS运作模式都是以浏览器支持的最高的标准运行。按照W3C的标准来解析代码。 3.混杂模式是以宽松的，向后兼容的方式来解析代码。是指浏览器用自己的方式解析代码，模拟老式浏览器的行为以防止网站停止工作。 4.若DOCTYPE为声名或格式不正确，页面将会以怪异模式的方式解析。 5.Doctype标签可声明三种DLD类型，分别是严格型，过渡型，框架型。 2.行内元素和块级元素和空元素? 内联元素（行内元素）内联元素(inline element) a、 abbr 、acronym、 b 、bdo、big 、br、code、dfn 、emfont、i、img、input、kbd 、label、q、s、samp、select、small、span、strike、strong 、sub、sup、textarea、 u、var 块元素(block element) address、blockquote、center 、dir 、div 、dl 、 fieldset、form、h1 - h6 、hr 、menu 、noframes、、ol 、p、pre 、table 、ul 空元素: br、meta

web兼容性 CSS !important 到 CSS hack

阅读更多关于 web兼容性 CSS !important 到 CSS hack

css !important作用是提高指定CSS样式规则的应用优先权。 !important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。语法格式{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;} 浏览器识别 ie7，ie8，firefox，chrome等高端浏览器下，已经可以识别 !important属性，但是IE 6.0仍然不能完全识别. important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里)，IE 6.0认为! important优先级较高，否则当含! important的样式属性被同一个{}里的样式覆盖时，IE 6.0认为! important较低! important，最主要是为了IE 6.0浏览器。案例分析：最重要的一点是：IE 6.0一直都不支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义，例如，我们定义这样一个样式： colortest { border:20px solid #60A179 !important; border:20px solid #00F; padding: 30px; width : 300px; } 在Mozilla中浏览时候，能够理解!important的优先级，因此显示

一些移动端浏览器的兼容性Bug

阅读更多关于一些移动端浏览器的兼容性Bug

做移动端的Web也有一段时间了，踩过的坑真心不少。下面列出一些，移动端浏览器兼容性的Bug，供大家参考。【UC浏览器】video标签脱离文档流场景：<video>标签的父元素(祖辈元素)设置transform样式后，<video>标签会脱离文档流。测试环境：UC浏览器 8.7/8.6 + Android 2.3/4.0 。 Demo：http://t.cn/zj3xiyu 解决方案：不使用transform属性。translate用top、margin等属性替代。【UC浏览器】video标签总在最前场景：<video>标签总是在最前（可以理解为video标签的z-index属性是Max）。测试环境：UC浏览器 8.7/8.6 + Android 2.3/4.0 。【UC浏览器】position:fixed 属性在UC浏览器的奇葩现象场景：设置了position: fixed 的元素会遮挡z-index值更高的同辈元素。在8.6的版本,这个情况直接出现。在8.7之后的版本,当同辈元素的height大于713这个「神奇」的数值时,才会被遮挡。测试环境：UC浏览器 8.8_beta/8.7/8.6 + Android 2.3/4.0 。 Demo：http://t.cn/zYLTSg6 【QQ手机浏览器】不支持HttpOnly 场景

浏览器兼容性问题（IE9+;PC）

阅读更多关于浏览器兼容性问题（IE9+;PC）

HTML/CSS 1. 默认margin、padding不一致 * {margin: 0;padding: 0;} 2. css3的animation IE9不支持 3. display: flex IE9不支持；IE10部分支持，使用display: ms-flexbox flexbugs@github IE10下，justify-content 对容器内的span不起作用，需要设置span display: block/inline-block IE11支持不加前缀的flex，且flex容器内部各部分宽度相同（与其他浏览器不一致），解决办法是设置容器内部各成员 width: auto 在 IE11 上 align-items 对于设置 min-height 的父元素不能实现垂直居中，改为设置height即可 4. 多个img放在一起时，部分浏览器会有默认间距 img使用float布局 5. webkit / trident 中 iframe 有默认高度其他无 6. IE11 th标签默认对齐方式为center，chrome为left，由于默认值的原因，若text-align是继承于父级的，也无效 9. IE11 button默认overflow:hidden，chrome为visible 10. PC上iframe内容超出时无法滚动，而移动端可滚动

移动端兼容性问题解决方案

阅读更多关于移动端兼容性问题解决方案

1. IOS移动端click事件300ms的延迟响应移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的, 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒

订阅浏览器兼容性