展开

关键词

浏览器兼容

一、什么是浏览器兼容问题 同一份代码,有的浏览器显示效果正常,有的浏览器显示不正常 二、为什么会有浏览器兼容问题 同一产品,版本越老 bug 越多 同一产品,版本越新,功能越多。 老的浏览器还没有这个功能,当然显示有误 不同浏览器,不同标准,不同效果。比如不同浏览器的内核都不一样 三、用到的网站 1、caniuse.com 查CSS属性兼容情况 ? ? 让哪些浏览器支持哪些效果 3、如何做 (1)根据兼容需求选择技术框架/库(jquery) (2)根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css ie9) (4)react(兼容ie8) 不同的框架兼容浏览器不一样,在开发之前需要留意一下 2、条件注释(又叫IE条件注释) 条件注释 (conditional comment) 是于HTML源码中被 respond.js css reset normalize.css Modernizr 这是处理兼容思路的转变,之前处理兼容处理的是浏览器

50652

浏览器兼容

先来说说什么是浏览器兼容? 对于很多初学者来说先要知道目前主流的浏览器有IE6、IE8、Mozilla、 FireFox、Opera、Safari、Chrome、Netscape等。 即兼容问题。 如何能做到浏览器兼容? 1、合理化使用标签与CSS 2、使用HACK代码 先说合理化使用标签与CSS。 到底怎么样才是合理的呢? 其实CSS hack是一种类似作弊的手段,以欺骗浏览器的方式达到兼容的目的,是用浏览器兼容性差异来解决浏览器兼容性问题。这种方法快捷、简单粗暴。 / 忠告: 在Web页面制作中尽量不要使用CSS Hack来处理兼容问题。 因为任何浏览器下出现渲染不一致都极有可能是我们自己的结构或样式不符合W3C的某些要求,或者说违背了浏览器的某些规则而造成的,所以我们应该尽量通过结构或CSS的修改来达到各浏览器渲染一致效果,除非到了万不得已情况下

527120
  • 广告
    关闭

    一大波轻量级工具升级重磅来袭

    代码传递思想,技术创造回响!Techo Day热忱欢迎每一位开发者的参与!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    css3在IE下兼容

    原文地址:http://blog.csdn.net/bingqingsuimeng/article/details/44201433 做前端的同学都应该听说或者用过,是一段脚本,可以让ie实现css3里的圆角和阴影效果 css带来的便利是很容易感受的到的,但恶心的是它在ie下的不兼容,所以某位牛人现身写了个ie-css3.htc,允许你在ie下去使用css3的部分东西。 ie-css3的使用方法很简单,在你需要使用css3的样式里加入behavior: url(js/ie-css3.htc);就可以了(括号里是ie-css3.htc的地址) ie-css3.htc

    57840

    CSS3之flex兼容写法

    今天还是变谈CSS3里的flex怎么处理兼容的 flex是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了,虽然现在低版本浏览器不支持,可是对于移动来说兼容性不是问题 那就不好用了,今天咱们就说下如果写flex才能保证兼容性。 flex之所以有兼容性。 是因为w3c从09到现在更新了很多次,所以有一些浏览器只是支持旧语法的书定方式,flex属性有很多种,今天主要说常用的等比设置和居中这两块 一、旧语法 .box{     display: -moz-box 这种兼容写法不一定起效的。尤其是在底版本安卓系统中。因为什么呢?因为所有都是向下兼容的,所以写法的顺序一定要写好了才起作用。就是把旧语法写在底下,个别不兼容的移动设置才会识别,哪些是旧的语法,你懂的。 所以上面的兼容写法应该是这样的才对 .box{          display: -webkit-flex; /* 新版本语法: Chrome 21+ */     display: flex; /*

    63310

    CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

    一、浏览器兼容 1.1、概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题。 兼容性主要考虑三方面: 1)、CSS兼容 2)、JavaScript兼容 3)、HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核。 多年前我们一直为IE6兼容烦恼,为它没少加班;盼走了IE6现在又出现了IE8,看来兼容没有尽头... 1.2、浏览器内核 Trident Microsoft公司浏览器内核,IE6、IE7、IE8(Trident 1.4、兼容的一般标准 1)、在不同的主流的浏览器上表现效果一致 2)、能适应不同的屏幕大小 3)、能适应不同的分辨率与色彩深度 浏览器兼容在线测试: https://turbo.net ? CSS样式达到让浏览器兼容的过程。

    931100

    兼容浏览器的insertAdjacentHTML

    为了兼容其它浏览器就有了如下的函数“insertHTML” 重点: 1、为了兼容其它浏览器,支持beforeBegin、afterBegin、beforeEnd、afterEnd 2、如何将字符串String PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>兼容浏览器的 PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>兼容浏览器

    30720

    css3 zoom属性兼容ie的缩放

    文本缩放,在之前我们使用过css3的transform中scale进行比例扩大或者缩放,但是这个属性兼容性差,在IE10一下基本就失效(蔫了),今天带来的zoom就很好解决这个问题!

    zoom缩放

    这是一个使用zoom缩放的样式,由于scale是一个CSS3的一个熟悉,兼容性差! 而这个zoom兼容性可以支持到IE7低版本,可以说是IE独享特权,缩放

    </body> </html> 不同设备的显示效果: chrome: ? firefox: ? ,属性对IE兼容性良好,可以算上IE的特权了!

    55640

    浏览器兼容问题之我见

    在本人亲身跟进一些前端项目过程中,发现相同的项目在不同的浏览器中运行出来的展示效果不太一样。上网查询下发现这样的现象叫浏览器兼容问题。那么问题来了:为什么会有兼容问题呢? ,这就是导致兼容问题的最重要的原因。 因此我们想要开发出一个能够推入实用阶段的网页就必须要解决网页在当前主流浏览器上的兼容问题。 对浏览器兼容问题,又细分了如下几类:HTML兼容、Javascript兼容、css兼容。 现在让我们来看一看我总结出来的常见的兼容问题以及解决方案: 问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:我们随意写几个标签,在不使用样式控制的前提下,运行出来的margin、padding 问题三:标签最低高度设置min-height不兼容问题 问题症状:min-height本身就是一个不兼容css的属性,因此在设置min-height属性的网页就不能很好的被各浏览器兼容

    24950

    浏览器兼容性问题

    360浏览器兼容性问题-backspace删除键出现后退页面,无法删除内容 直接将下面这段代码放在网站的母版页,或者公用的地方。保证执行下面这段脚本即可。 <script> function banBackSpace(e) { var ev = e || window.event; //各种浏览器下获取事件对象 ev.preventDefault(); } if (ev.returnValue) { //IE浏览器下用

    17220

    js事件浏览器兼容案例

    49720

    浏览器兼容性自查

    Author: Codec.Wang Date: 2020/08/29 在解决浏览器兼容性问题或使用一些较新的 Web 技术时,经常需要查看各浏览器对 HTML/CSS/JS/SVG/Web/HTTP 以下是两种不错的自查方式: CanIUse https://caniuse.com/ 搜索关键字就会给出该特性在桌面和移动端主流浏览器中的兼容数据: 该特性在全球浏览器中支持 + 部分支持的比例,可以点击搜索栏旁边的设置来显示中国的数据 浏览器的当前版本,往上是旧版本,往下是未来的版本 详情浮窗:该版本的发布时间和使用率等,浏览器使用率数据来自 StatCounter 附加资源:很多实用的链接,比如该特性的规范定义、功能演示、不支持该特性时可使用的 Polyfill等等 MDN 在 MDN(Mozilla Developer Network) 上查看接口的相关资料时,一般都会在最后给出浏览器兼容数据,如: https://developer.mozilla.org

    10530

    浏览器兼容问题笔记

    Safari浏览器: 1.safari执行history.go(-1);需要添加return false; Chrome浏览器 1.Chrome浏览器要预读图片,需要通过对图片的预加载。

    46390

    浏览器兼容性问题

    1.浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。 碰到频率:100% 解决方案:CSS里 *{margin:0;padding:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是 2.浏览器兼容问题五:图片默认有间距 问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。 碰到几率:20% 解决方案:使用float属性为img布局 备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。 (我的一个学生使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法,所以我禁止他们使用) 3. ie6.0横向margin加倍 产生因素:块属性、float、有横向margin

    29230

    减少浏览器兼容性问题

    做为一个前端工程师,不少时间都在处理浏览器兼容性问题。本文对如何减少浏览器兼容性问题的方法做了些总结。 确定运行环境 在开发前,我们要确定页面的运行环境:要兼容哪些浏览器,以及哪些屏幕分辨率。 如果我们不了解我们的运行环境,兼容性也无从谈起。也只有在确定来运行环境后,我们才可以选择合适的方式。我们可以借助 HTML5 与 CSS3 技术应用评估来选择用哪些技术。 下面是一些查询兼容性的网站 es5规范浏览器兼容性表格 es6规范浏览器兼容性表格 html5 移动端兼容性速查 如果实在想用某个特性,但某个想兼容浏览器不支持,可以找找有没库来做支持的 HTML5 所以我们要了解哪些写法会产生兼容性问题,然后避免那样写。 推荐认真研究浏览器兼容性-根本原因内容列表。 充分的测试 推荐使用 iTest。它是阿里出的测试工具。支持主流浏览器的截图,死链接检测等。 一些 CSS 属性记得要加浏览器前缀 有时页面的元素改变后,应该被重绘,但浏览器没有重绘,可以用让元素隐藏,然后再显示的方式来让浏览器重绘 拓展阅读 W3Help - 兼容性 - 根本原因内容列表 前端工程师如何系统地整理和累积兼容性相关的知识

    30920

    最全的CSS浏览器兼容整理

    CSS对浏览器兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就 会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码 浏览器多了,网页兼容性更差了,疲于奔命的还是我们 ,为解决IE7.0的兼容问题,找来了下面这篇文章: 现在我大部分都是用! 下面是三个浏览器兼容性收集. important } :empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的 浏览器上。 对IE6和FF的兼容可以考虑以前的!

    38920

    05-移动端开发教程-CSS3兼容处理

    CSS3的标准并没有全部定稿,目前CSS3的标准分成了不同的模块,具体的标准由各个模块推动标准和定稿,标准制定的过程中,浏览器也在不断的发新的版本来兼容新的标准。 只有在新的css3的实验性的属性前需要添加前缀,目前大部分常用的css3新属性都可以直接舍弃前缀。 查看浏览器兼容css3属性情况请参考:caniuse网站 .wrap { display: -webkit-box; display: -ms-flexbox; display: flex 如此一来页面解析压力就大了,性能会打一定的折扣,并且一旦脚本加载失败,那么就会出现浏览器无法正常渲染CSS3的样式风格。 比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。----

    499120

    05-移动端开发教程-CSS3兼容处理

    CSS3的标准并没有全部定稿,目前CSS3的标准分成了不同的模块,具体的标准由各个模块推动标准和定稿,标准制定的过程中,浏览器也在不断的发新的版本来兼容新的标准。 css3的实验性的属性前需要添加前缀,目前大部分常用的css3新属性都可以直接舍弃前缀。 查看浏览器兼容css3属性情况请参考:caniuse网站 .wrap { display: -webkit-box; display: -ms-flexbox; display: flex; 如此一来页面解析压力就大了,性能会打一定的折扣,并且一旦脚本加载失败,那么就会出现浏览器无法正常渲染CSS3的样式风格。 比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

    43160

    Ionic4兼容IE浏览器处理

    以Angular版本为例,兼容IE浏览器,主要是JS+CSS的语法和用法的调整处理。 1. JS,可以使用内置的Polyfill方案。 重新编译运行,可以看到原来在IE浏览器提示脚本错误的都消失了,页面能正常运行,只是样式可能会有点变形。 2. CSS自定义样式调整 Ionic4大量使用了shawdow-dom,IE浏览器不解析#shadow-root,但会解析其下内容,所以Dom都会存在,只是样式可能会不同。 系统内置样式基本是做了兼容处理的,而自定义样式放在全局和局部都会存在不一样的兼容效果,可以做下兼容性调整,如: --background: transparent; background-color : transparent; // 兼容性后备处理

    50720

    相关产品

    • 标准兼容测试

      标准兼容测试

      标准兼容测试(Standard Compatibility Testing)致力于为移动开发者提供完善的适配兼容测试服务,发现和定位产品在移动终端出现的适配问题,提供完整的问题信息,帮助开发者解决问题,提升产品的质量。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注云+社区

      领取腾讯云代金券