任务13-浏览器兼容


2016/6/6

可以装个虚拟机,用于调试IE的兼容


1.如何调试 IE 浏览器

  • IE浏览器7以上+自带的开发者工具,ie6可以用加border的方法
  • 采用模拟器的方式去模不同版本下的IE浏览器,如ietester
  • 通过安装虚拟机的方式,安装不同版本的IE的运行环境去达到调试IE浏览器的目的

2.什么是CSS hack?在 CSS 和 HTML里如何写 hack?在 CSS 中 ie6、ie7的 hack 方式?

  • CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。 简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

  • CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
    1.属性前缀法(即类内部Hack):例如 IE6能识别下划线""和星号" ",IE7能识别星号" ",但不能识别下划线"",IE6~IE10都认识"\9",但firefox前述三个都不能认识
    2.选择器前缀法(即选择器Hack):例如 IE6能识别html .class{},IE7能识别+html .class{}或者*:first-child+html .class{}
    3.IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): ,针对IE6及以下版本: 。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效
    <!-[if IE]>这段文字只是在IE浏览器下显示<![endif]->
    <!-[if IE6]>这段文字只是在IE6显示器生效<![endif]->
    <!-[if get IE6]>这段文字只是在IE6以上(包括)版本IE浏览器显示<![endif]->
    <!-[if !IE8]>这段文字在非IE浏览器下显示<![endif]>
    <!-[if ! IE]>这段文字只是在非IE浏览器下显示<![endif]>
    参考资料

3.列举几种 浏览器兼容问题

  • hover IE6不支持,以上的IE只支持a标签的hover
  • display:inline-block ie67不支持。
  • max-height,max-width等一系列,IE6不支持
  • padding,margin在不同浏览器默认样式有差异
  • 在ie6下块元素有浮动和横向margin值,横向的margin值会被放大成2倍,解决方法:display:inline
  • 在ie6下父级有边框的时候,子元素的margin值消失,解决方法:触发haslayout

4.针对兼容、多浏览器覆盖有什么看法?渐进增强和优雅降级是什么意思?

看法:对于兼容有有的放矢,分清主次,针对主流浏览器去开发,同时要兼顾用户需求,遇到一个问题解决一个,先完成基本功能和样式的实现,再完善细节。
优雅降级:在前面的开发中,先不用考虑一些低的版本的浏览器,等开发完成之后慢慢地去做一个适应,只要页面还正常,不乱,看着还可以就OK了,没必要去追求特别高的还原度。
渐进增强:先针对ie6去做开发,再对一些好的浏览器增加一些额外的一些效果,让它看起来更好看一些。

5.reset.css和normalize.css分别是做什么的?为什么推荐使用 nomalize.css?

  • reset.css:是用于去除浏览器预先给标签设置的默认样式。
  • normalize.css:normalize.css是reset.css的改良版,他是在reset的基础上进行改良避免误伤,保留了一些有价值的默认样式,还增加了其他功能,也没有reset.css 的一些缺点。
  • 为什么使用nomalize.css?
  1. Normalize.css 保护了有价值的默认值,这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时,Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
  2. Normalize.css 修复了浏览器的bug
  3. Normalize.css 不会让你的调试工具变的杂乱
  4. Normalize.css 是模块化的
  5. Normalize.css 拥有详细的文档
    参考资料

6.IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用

  • IE盒模型:宽度=内容宽度+padding+边框。
  • 标准盒模型:宽度=内容宽度。
    *要使ie6 7 8 使用标准盒模型:
    (1)可以在开头添加<!doctype html>来使用标准盒模型。
    (2)box-sizing:border-box 使元素按照ie盒模型计算,宽度=border+padding+内容宽度。

7.在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的区别

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

推荐阅读更多精彩内容

  • 一、问答部分 1. 如何调试 IE 浏览器 IE7及以上版本有调试台,可以按F12启动。Paste_Image.p...
    _hello__world_阅读 455评论 0 1
  • 一、问答部分: 1. 如何调试 IE 浏览器? 如果是IE7版本以上可以使用自带的开发者工具,按F12,即可打开:...
    小木子2016阅读 519评论 0 0
  • 1.如何调试IE浏览器? 对于高版本的IE浏览器(IE7以上)可以使用IE自带的开发者工具,如下图: 使用一些集成...
    饥人谷_任磊阅读 359评论 0 1
  • 1.如何调试 IE 浏览器 IE8以上有开发者工具(高版本的IE开发者工具兼容模式可以往下选择兼容不同版本),F1...
    饥人谷_kule阅读 416评论 0 0
  • 1 . 如何调试 IE 浏览器 使用高版本的IE浏览器控制台。 如果某个元素不见了,可以使用如下方法:a.给该元素...
    osborne阅读 375评论 0 1