浏览器兼容

在 IE 浏览器上进行调试

  • 在高版本的IE浏览器如IE8以上,有开发者工具,按F12调出,可以选择不同的浏览器版本进行调试(除了IE6,IE6可以通过设置border或使用javascript来测试)。

CSS hack的含义及在 CSS 中 ie6、ie7的使用

  • CSS hack是CSS使用中的一些奇怪的做法(与现行的标准用法不同,早期的浏览器如IE6出来时并没有统一的渲染标准),主要是针对低版本的IE浏览器的兼容性来使用的。
  • 在HTML中hack的写法一般有三种
    ①属性前缀:直接在CSS选择器内部的属性前加仅低版本IE能识别的符号* _等;IE6能识别* _,例如*display:inline;而IE7能识别*但不能识别_
    ②选择器前缀:在CSS选择器前加仅低版本IE能识别的符号;IE6能识别*,如*p{};而IE7能识别*+,如*+p{}
    ③条件注释:针对一大段的CSS hack可以用``来做兼容,if IE可以改成其他条件,如if IE6

常见浏览器兼容问题

  • 不支持部分标签或属性:例如IE6不支持display:inline-block,因为其内部没有关于此属性的定义和解析方式,这个时候我们就只能退而求其次使用display:inline来保证至少排版不要差异太大,当然也可以用其他方式如浮动来达成类似的效果,同样的例子还有min-height等.
  • 不同浏览器的默认设置差异:例如低版本的IE盒模型与标准盒模型的差异(下面问题会提到);又或者默认的margin和padding差异,所以一般在css来头会有一个*通配符来修改默认的的margin和padding为0。

对兼容、多浏览器覆盖的看法及渐进增强和优雅降级的理解

  • 兼容和多浏览器覆盖是历史遗留问题,是在浏览器发展和W3C标准的建立中逐渐产生的,我认为开发人员需要抓住主要需求,针对主浏览器做开发,最后再去做兼容和多浏览器覆盖,要分清主次,明白锦上添花的含义。最终前端开发人员理想的状况是不需要兼容;针对前端入门的新手我认为重点在学习其他重点知识,对兼容是要去理解,也要知道如果碰到此问题要如何去搜索寻找解决方法,保持有意识也懂方法的前提下先去补充其他知识。
  • 渐进增强、优雅降级的主要思想是一样的,就是先指针对需求,适配1~2款浏览器去做主开发。如果是先针对现代浏览器的话,就可以优雅降级,不追求画面多炫功能多强大,针对低版本如IE7等做些兼容能实现基础功能即可;而如果一开始是部分政府项目,是针对IE6、7等低版本浏览器做的开发的话,就可以渐进增强,针对现代浏览器修改部分CSS去实现一些相对较先进方便的功能把页面做得更漂亮一点。

reset.css和normalize.css的作用与区别

  • reset.css是用于去除浏览器预先给标签设置的默认样式,如h标题的加粗和margin、li前面的小圆点等,有时候我们并不需要这些默认设置,就可以在CSS开头进行CSS重置,就是reset.css。
  • normalize.css是reset.css的改良版,他是在reset的基础上进行改良避免误伤,保留了一些有价值的默认样式,还增加了其他功能,也没有reset.css的一些缺点。
  • 相比与reset.css,normalize.css有以下几个优点:①它保留了部分有价值的默认样式,而且努力使不同浏览器的默认值保持一致尽量让表现接近现代标准;
    ②它修复部分浏览器的问题和bug(目前我还不大理解);
    ③它没有reset.css的长串继承链,调试的时候不会显得很乱;
    ④它是模块化的,你可以清楚地知道哪些元素设置了什么值,同时你可以去掉某些你不常用或你不想要的部分;
    ⑤它有详细的代码和注释文档,你可以自己测试,同时也能让你了解到浏览器默认是怎么渲染元素的。

IE盒模型和标准盒模型的区别,怎样使 IE678使用标准盒模型?box-sizing:border-box的作用?

  • 盒模型,最中心是内容,往外是paddin内边距,再来是border边框,最后是margin外边距;IE盒模型和标准盒模型构造一样,区别在于当你指定了一个块级元素的width值后,在标准盒模型中代表内容宽度,而同一个width值在IE盒模型中却是内容宽度+内边距+边框,引用一张图作说明:
    盒模型
  • 可以使用<!doctype html>声明来使 IE678使用标准模式的标准盒模型。
  • box-sizing:border-box使用后,为元素指定的宽度和高度将包含其内边距和边框,后续如果有设置内边距和边框的话就会压缩内容宽度了,想当于采用了怪异IE盒模型。

在 ie 6, 7, 8中盒模型的展示

  • IE6的测试如下,没有doc申明,IE盒子,盒子偏小,不支持inline-block、不支持max-width!


    IE6未申明
  • 我们把doc申明添加进去,并在IE6做测试,盒子变回标准盒模型,但是inline-block和max-width依然没有效果!


    IE6有申明
  • IE8测试如下,没有doc申明,IE盒子,盒子偏小,未申明doc不支持inline-block、未申明也不支持max-width!


    IE8未申明
  • 我们把doc申明添加进去,并在IE8做测试,盒子变回标准盒模型,也支持inline-block和max-width!


    IE8有申明
  • chrome浏览器效果如下,标准盒子,支持inline-block、支持max-width!


    chrome测试
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • 一、如何调试 IE 浏览器 IE7以上版本自带的开发者工具,IE6可以用border的方法;例:IE11的开发者工...
    __Qiao阅读 1,120评论 2 17
  • 一、如何调试 IE 浏览器? 在IE7以上的版本中可以通过按快捷键F12调出开发人员调试框,如下图IE7以上调试工...
    dengpan阅读 543评论 0 2
  • 一、如何调试 IE 浏览器? IE调试的一般方法(css): 使用高版本IE控制台(对于IE7以上)IE11的开发...
    婷楼沐熙阅读 547评论 0 6
  • 一、问答部分 1. 如何调试 IE 浏览器 IE7及以上版本有调试台,可以按F12启动。Paste_Image.p...
    _hello__world_阅读 455评论 0 1
  • 一、问答部分: 1. 如何调试 IE 浏览器? 如果是IE7版本以上可以使用自带的开发者工具,按F12,即可打开:...
    小木子2016阅读 519评论 0 0