我的前端学习笔记13——浏览器兼容问题

1,如何调试 IE 浏览器?

  • 使用高版本浏览器(IE8以上)控制台进行调试。
  • 将浏览器分级,市场份额多的优先着重考虑,小的适当考虑。
  • 测试IE的方法

1,虚拟机。
2,远程虚拟机。
3,IE tester(不靠谱)。
4,某些IE可以开启浏览器模式。

  • 使用border:1px solid;outline:1px solid color;或者在网页输入框输入javascript:进行调试;

2,什么是CSS hack?在 CSS 和 HTML里如何写 hack?在 CSS 中 IE 7、IE 8的 hack 方式?

  • 什么是CSShack:
    由于不同厂商的流览器或某浏览器的不同版本(如IE6~IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器、不同版本写相应的CSS code的过程,叫做CSS hack。

  • 属性前缀法(即类内部Hack):例如 IE6能识别下 _* ,IE7能识别 *,但不能识别 _
  • 选择器前缀法(即选择器Hack):例如 IE6能识别html .class{},IE7能识别+html .class{}或者*:first-child+html .class{}
  • IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释) ,包括IE6及以下版本 。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
  • IE7&IE8 hack:
    条件注释:

一般这样使用:

  • 类内属性前缀法

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

  • hover兼容性问题:
    hover在IE6/7只有a链接才可以用,其他用法均无效,因此解决措施为:
把需要引用hover的元素换成a链接

但是这里有一个问题:换成a链接之后点击就会出现跳转,解决措施为:

用代码 `;` 代替链接,就不会发生跳转

  • display:inline-block兼容性问题:
    display:inline-block不被IE6/7兼容,因此只能用inline代替。解决措施为:
`*` 只有IE浏览器会默认生效,其他浏览器不支持,视之为废码, `*` 可以只让IE6/7识别;zoom=1只有IE浏览器支持,可以触发IE浏览器的BFC(haslayout)。

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

  • A级兼容(chrome、firefox、IE9+):要保证在最新浏览器上完美实现设计稿;
  • B级兼容(ie8):能用且差别不大;
  • C级兼容(ie7以下):能用首先以最大程度完善设计稿为基础,再考虑兼容性,不能为盲目为了兼容问题而弃用方便简洁的新方法(如html5、css3);
    (当然也不能用过新的技术方法使得兼容性过于低、实用性差)

渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容
区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带

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

  • reset.css
    在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。
  • normalize.css
    Normalize.css是一种CSS reset的替代方案。Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

Normalize vs Reset

  1. Normalize.Css 保护了有价值的默认值。Reset通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果。相比之下,Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时,Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
  2. Normalize.Css 修复了浏览器的Bug。它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。关于这一点,Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
  3. Normalize.Css 不会让你的调试工具变的杂乱。使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链。在Normalize.css中就不会有这样的问题。
  4. Normalize.Css 是模块化的。这个项目已经被拆分为多个相关却又独立的部分,这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分(比如表单的一般化)。
  5. Normalize.Css 拥有详细的文档。Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异,并且你可以更容易地进行自己的测试。

6,IE盒模型和标准盒模型有什么区别? 怎样使 IE7、8使用标准盒模型?

W3C盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分,width= content
IE 盒子模型的范围包括 margin、border、padding、content,width=border+padding+content

**使 IE7、8 使 用 标 准 盒 模 型 的 方 法 **

7,box-sizing:border-box有什么作用?

  • 令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度,模拟IE盒模型规范。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 一、问答部分 1. 如何调试 IE 浏览器 IE7及以上版本有调试台,可以按F12启动。Paste_Image.p...
    _hello__world_阅读 455评论 0 1
  • 一、问答部分: 1. 如何调试 IE 浏览器? 如果是IE7版本以上可以使用自带的开发者工具,按F12,即可打开:...
    小木子2016阅读 519评论 0 0
  • 一、如何调试 IE 浏览器 IE7以上版本自带的开发者工具,IE6可以用border的方法;例:IE11的开发者工...
    __Qiao阅读 1,120评论 2 17
  • 郭相麟 害怕的心 左右着你我 爱与生活因为想法和落差 让我执着于你的肯定与认可 让我在夜里无言的落泪 让我的付出在...
    郭相麟阅读 170评论 0 0