浏览器的兼容与CSS技巧

一、如何调试 IE 浏览器
1、IE7以上版本的浏览器自带开发者工具,可以直接设置进行调试。

ie兼容.jpg

2、用f2etest可以直接设置不同浏览器版本进行测试。
3、建议安装Xp的虚拟机,模拟不同版本的IE浏览器。
二、什么是CSS hack?在 CSS 和 HTML里如何写 hack?在 CSS 中 ie6、ie7的 hack 方式?
一般情况下,用自己的浏览器写代码进行设计时,可以完美展示,但是如果放在版本比较低的浏览器上,会有些效果运行不了,不能正常显示。让网页样式兼容不同的浏览器,使css代码兼容不同的浏览器,需用非一般的手段解决问题,用一个bug解决此bug,写css hak。
针对一些浏览器不兼容的bug, 用css hak实现兼容性。
方法:1、写在html里的条件注释。条件注释是如果是在IE6的浏览器下,会显示“那就展示这句话”如果不是在IE的浏览器下,会显示“那就展示这句话”一般为提升网页的可读性,会添加注释本身再网页客户端是不显示的,或者/这是注释/
2、写在css里的css hack,让网页兼容不同的浏览器,css hack的目的就是使css代码兼容不同的浏览器。一般页面上使用较多的IE6,IE7,IE6,7这三种。IE6的hack写法是_例如p{color:blue;_color:blue;}同时写上hack和正常内容;对于代码“_color:blue”IE6可以读取,但是IE7就不行了。IE6,7的hack是,例如p{min-height:100px;height:100px;}由于min-height不兼容6,7。li{display:inline-block;display:inline;}inline-block,不支持6,7,进行相应设置即可。
3、在IE6,7中的hack方式是属性前面加个
,即p{display:inline;}则该属性再ie6和IE7下均有效
三、列举几种 浏览器兼容问题
1、不同浏览器的外补丁、内补丁默认不一样大
1、display:inline-block只支持IE8及以上版本,如果要使用,需设置.wrap{display:inline-block;
display:inline;}
2、box-sizing:border-box只支持IE8及以上版本
3、background-size:只支持IE8以上版本
4、opacity支持IE8以上及部分IE8版本
四、针对兼容、多浏览器覆盖有什么看法?渐进增强优雅降级是什么意思?
看法:1、根据项目针对的目标客户特点,进行浏览器兼容的设置;
2、一般需要兼容至要求最低版本,在项目开始前,确定最低支持的版本,设计兼容方案,比如目标客户一般使用IE7,IE8,IE9及以上,那么我们应该兼容IE7;
渐进增强和优雅降级都是由于低版本浏览器不支持CSS3,但是CSS3的效果比较好(比如圆角),所以再版本高的浏览器显示正常的,在低版本浏览器只保证一般显示,二者的区别是:
渐进增强:设计页面时针对低版本浏览器,再针对高版本浏览器进行改进设计,实现更加的效果。
优雅降级:开发页面的时候不用考虑兼容性,在完成之后,某些低版本浏览器兼容不了时,再对低版本浏览器进行设计实现兼容。

五、reset.css和normalize.css分别是做什么的?为什么推荐使用 nomalize.css
?
Normalize.css是保留浏览器的原来样式并且做到每个浏览显示一致。 CSS Reset(兼容ie6)相反把浏览器的默认样式都重置了,就算一般默认的h1-h6,如果设置CSS Reset,则字体为浏览器默认大小,字体。
推荐使用nomalize.css的原因:
1、Reset通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果。相比之下,Normalize.css保持了许多默认的浏览器样式。
2、Normalize.css 修复了浏览器的bug
3、使用Reset在浏览器调试工具中有较多的继承链,而 Normalize.css 会有目的地对目标元素设置样式,不会让调试工具变的杂乱。
4、Normalize.css 是模块化的
5、Normalize.css的代码基于详细而全面的跨浏览器研究与测试,拥有详细的代码说明。
六、IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用
IE盒模型型是在ie6/ie7/ie8版本下,不加<!DOCTYPE html>的样式,即为怪异模式,则盒模型元素设置的width和height值为元素的占据位置,包括元素的大小,内边距,边框,外边距。

标准盒模型在ie6/ie7/ie8版本下,或者更高版本或者谷歌浏览器,加上<!DOCTYPE html>即为标准的W3C盒模型,即盒模型元素设置的width和height只仅仅是元素的大小,元素所占的位置要加上margin,border,padding。
在IE6,7,8版本下在html代码的头部加入<!DOCTYPE html>,即可使用标准盒模型。
box-sizing:border-box为元素设置了宽和高,即使盒子设定为IE盒模型,不是标准盒模型,设置的宽高包括元素自身的大小,padding,border,margin

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

推荐阅读更多精彩内容