日夜谈——浏览器那些事

task13.png

1.如何调试 IE 浏览器?

<li>IE7以上可以用开发者工具进行调试,而IE6可以使用加border的方式去调试。
<li>可以采用模拟器的方式去模拟不同版本的IE浏览器。例如:ietester或chrome的付费插件Test IE。
<li>可以采用安装虚拟机的方式,安装不同版本的IE浏览器以达到不同IE浏览器版本的调试目的。

</br>

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

CSS hack:由于不同浏览器或者不同浏览器版本的网页解析方式不同,因而导致CSS的输出效果不同,而这个时候就需要CSS hack来解决局部兼容问题,而这个过程就称之为CSS hack。

CSS hack:有三种方法:css属性前缀法、IE条件注释法和选择器前缀法

css属性前缀法:

.box{
color:red;/* for all browsers */
_color:red;/* for ie 6 */
*color:red;/*  for ie 6-7 */
color:red\9; /* for ie 6-10 */
}

选择器前缀法:

*body{
/* for ie 6 */
}
*+p{
/* for ie 7 */
@media screen\9{
/* for ie 6-7 */

IE条件注释:

<!--[if IE]>
这段文字只在IE显示
<![endif]-->
<!--[if IE 6]>
这段文字只在IE6显示
<![endif]-->
<!--[if gte IE 6]>
这段文字只在IE6或以上版本显示
<![endif]-->
<!--[if lte IE 6]>
这段文字只在IE6或一下版本显示
<![endif]-->
<!--[if !IE]>
这段文字在非IE浏览器上显示
<![endif]-->

<li>ie6 hack

css属性前缀法:
.box{
_color:red;
}
选择器前缀法:
*box{
color:red;
}
IE条件前缀法:
<!--[if IE 6]>
<div class="box">
<![endif]-->

<li>ie 7 hack

选择器前缀法:
*+body{
color:red;
}
IE条件前缀法:
<!--[if IE 7]>
<div class="box">
<![endif]-->

<li>ie6&ie7 hack

css属性前缀法:
.box{
*color:red;
}
选择器前缀法:
@media .box\9{
color:red;
}
IE条件注释法:
<!--[if lte 7]>
<div class="box">
<![endif]-->

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

<li>不同浏览器的标签默认的margin和padding不一,解决方案是*{margin:0 padding:0}
<li>低版本的IE浏览器不兼容inline-block属性
<li>不同浏览器的标签默认的外边距和内边距(margin和padding)不同;
<li>块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大;

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

兼容多浏览器的看法:
<li>首先看客户需求,分析需求,得出其是否有必要兼容,针对特定浏览器的用户,设计的人员,以及浏览器所占的市场份额。
<li>兼容程度,对于高级的浏览器,我们应该尽可能对页面的内容有高的展示要求,而低版本的浏览器,在能够正常展示的情况下,要求有所降低。
<li>总的来说,需要考虑成本和效益之间的问题。

渐进增强:针对低版本的浏览,先实现基本的页面功能,然后针对高版本的浏览器进行添加页面效果和交互等等功能,以达到更好的用户体验。
优雅降级:是基于高版本的浏览器实现各种功能之后,然后基于低版本的浏览器无法兼容高版本浏览器的功能,进行逐步的功能和页面效果退化,但在此过程中要保证基本的页面功能。

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

reset.css的目的是将所有浏览器的自带样式重置掉,这样更易于保持各浏览器渲染的一致性。
normalize.css是在保持浏览器本身样式的情况下,为不同浏览器提供通用样式的规范,即给定通用的样式,针对不同浏览器出现的兼容性问题分门别类的提供优化方案。

normalize.css的优势:
1.normalize.css是一个现代的,为HTML5准备的reset.css的替代品。它可以使元素的渲染在多个浏览器下都能保持一致并且符合规范。它所瞄准的,也都是些需要规范化的样式。
2.normalize.css保存了部分可用的默认样式。
3.normalize修复了一些常见的PC端及移动端的bug,这往往超出了reset的能力范围

借用一位知友的话说就是,reset是革命党,normalize是改良派。reset的方针就是都tm给我脱光光,老子今天要翻牌。什么豹纹,蕾丝,美颜相机统统给我拿掉,老子读书少,都别骗我。于是,一个个屌丝心中的女神都重拾了素颜,但回到本真又能怎样?那两厘米的粉底不都是为了你?于是,在旁边的normalize看不下去了。它主张生活不必处处追求真实,有时应该睁一只眼,闭一只眼。

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

IE盒子的宽度=padding+margin+content宽度(怪异模式下)
标准盒模型下盒子的宽度=内容宽度
通过添加doctype声明使IE678使用标准盒模型。

当设置了bor-sizing:border-box后,一个块级元素实际所占宽高度= 边界宽度(border-width) + 内边距(padding)+ 高度(height) / 宽度(width)

参考:
<a href="http://zehuiguan.github.io/2015/07/16/CSS%20hack%E6%96%B9%E5%BC%8F/">CSS hack方式</a>
<a href="http://blog.csdn.net/freshlover/article/details/12132801">史上最全的CSS hack方式一览</a>
<a href="http://www.cnblogs.com/myitm/archive/2011/05/17/2048850.html">
浏览器兼容问题整理</a>
<a href="https://www.w3ctech.com/topic/1804">normalize.css和reset.css的区别</a>
<a href="http://www.w3cfuns.com/notes/16799/70306b117ceaf74825b5099ac6687a50.html">关于css样式的重置:Reset.css和Normalize.css</a>

版权归饥人谷和饥人谷peter所有,若有转载,请注明来源

感谢吃瓜子观众:

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

推荐阅读更多精彩内容

  • 一、如何调试 IE 浏览器 IE7以上版本自带的开发者工具,IE6可以用border的方法;例:IE11的开发者工...
    __Qiao阅读 1,126评论 2 17
  • 前端离不开“浏览器”,要学好前端,我们就要学会调试IE浏览器,并且处理好浏览器兼容等有关浏览器的问题。 一、如何调...
    betterwlf阅读 729评论 10 4
  • 一、问答部分 1. 如何调试 IE 浏览器 IE7及以上版本有调试台,可以按F12启动。Paste_Image.p...
    _hello__world_阅读 464评论 0 1
  • 一、如何调试 IE 浏览器? IE调试的一般方法(css): 使用高版本IE控制台(对于IE7以上)IE11的开发...
    婷楼沐熙阅读 553评论 0 6
  • “我们选择和谁在一起,一定有这样一个意思——我想成为他那样的人,或者更准确的说法是,我想拥有他身上的某些品质。 ”...
    新月饭店大小姐阅读 144评论 0 0