浏览器兼容性

一,如何调试 IE 浏览器

答:
1.使用高版本IE控制台;
2.border: 1px solid red(特别针对于IE6),或者outline: 1px solid red(效果比border好,没有副作用);
3.IE test 等常用IE测试软件;
4.虚拟机,直接在IE对应的版本打开测试;
5.javascript(在IE里面执行JS,在JS里面写样式进行调试);
6.http://fts.aliyun.com/ (阿里云前端浏览器测试)

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

答:
1.为了获得统一的页面效果,针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack。
2.三种hack写法:1)css属性前缀法 2)选择器前缀法 3)IE条件注释(即HTML头部引用if IE).

详解:
1.属性前缀法:
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀,以达到预期的页面展现效果。
例如 IE6能识别下划线_和星号*,IE7能识别星号*,但不能识别下划线_,IE6~IE10都认识\9,但firefox前述三个都不能认识.
例如:*background-color:black; /* IE6, IE7 */只对IE6 IE7有效。
2.选择器前缀法:
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器,在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
例如:
*html *前缀只对IE6生效 *+html *+前缀只对IE7生效
3.条件注释法
这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式。
例如:

 只在IE下生效<!--[if IE]>这段文字只在IE浏览器显示<![endif]-->
只在IE6下生效<!--[if IE 6]>这段文字只在IE6浏览器显示<![endif]-->
只在IE6以上版本生效<!--[if gte IE 6]>这段文字只在IE6以上(包括)版本IE浏览器显示<![endif]-->
只在IE8上不生效<!--[if ! IE 8]>这段文字在非IE8浏览器显示<![endif]-->
非IE浏览器生效<!--[if !IE]>这段文字只在非IE浏览器显示<![endif]-->

参考资料
史上最全的CSS hack方式一览
browserhacks

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

答:
1.inline-block在IE6和IE7不支持,解决方式 {display:inline; zoom:1}
2.opacity透明度在IE8以下不支持,解决方式filter:alpha(opacity=50)
3.IE8以下版本的浏览器不支持min-widthmax-width属性;解决方法:直接写死。

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

答:
每个浏览器的兼容性(渲染标准)不同,不存在完美兼容的,应该根据项目的数据调研,根据市场和用户定位,决定兼容的程度
多浏览器兼容覆盖的思路
1.根据调查数据决定是否兼容,如果是,则先看IE,
2.看看网页在IE是否出现问题
3.利用caniuse查看到底哪个属性没有兼容
4.通过搜索引擎查看解决该问题的方案
5.如果通过CSS无法解决问题,那么就用JS

渐进增强(progressive enhancement)针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行改进和完善以达到更好的用户体验。
优雅降级(graceful degradation)一开始就构建完整的功能,然后再针对低版本浏览器进行兼容(打补丁),确保低版本浏览器可用。

区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。
降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。
参考资料优雅降级和渐进增强

五,reset.cssnormalize.css分别是做什么的?为什么推荐使用 nomalize.css?

答:reset.css直接重置浏览器默认的样式,demo(*{ margin:0; padding:0; })
normalize.css是一种CSS reset的改进方案,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。支持包括手机浏览器在内的超多浏览器,同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。

为什么推荐使用normalize.css
1.保护有用的浏览器默认样式而不是完全去掉它们一般化的样式:
2.为大部分HTML元素提供修复浏览器自身的bug并保证各浏览器的一致性优化CSS可用性:
3.用一些小技巧解释代码:
4.Normalize.css 是模块化的,可以自定义设计。
5.有注释和详细的文档

如何使用 normalize.css
首先,安装或从Github下载Normalize.css,接下来有两种主要途径去使用它。
策略一:将normalize.css作为你自己项目的基础CSS,自定义样式值以满足设计师的需求。
策略二:引入normalize.css源码并在此基础上构建,在必要的时候用你自己写的CSS覆盖默认值。

相关阅读
Normalize.css

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

答:
1.ie678(不添加 doctype)使用 ie 盒模型,宽度=边框+padding+内容宽度;
2.ie678(添加doctype)则使用W3C标准盒模型, 宽度= 内容宽度;
3.IE678 添加doctype 使用标准盒模型
4.box-sizing:border-box是CSS3的新属性,作用是先固定盒子大小;然后任何padding和边框都在盒子内进行改变。通过从已设定的宽度和高度中分别减去边框和内边距才能得到内容的宽度和高度。

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

推荐阅读更多精彩内容