关于CSS的reset问题

以前工作的时候 经常使用这样的代码来reset css

/* CSS globle */
*{margin:0; padding:0;}
ul,ol { list-style:none}
a,img{ border:none}
body{font:12px/1.5 tahoma, '\5b8b\4f53', sans-serif, 'Microsoft YaHei'; }
a{text-decoration:none; outline:none;}
a:hover{text-decoration:underline;}
a:focus{outline:none}
.none{display:none;}
.ht{overflow:hidden; text-indent:-9999px;}
 .c:after{ content:".";display:block;font-size:0;
line-height:0;height:0;clear:both;visibility:hidden;}
.c{display:inline-table;}
/* Hides from IE-mac \*/
* html .c {height: 1%;}
.c{display: block;}
/* End hide from IE-mac */
/* IE7 hack*/
*+html .c {min-height: 1% ;}

后来发现 YUI的css reset 不建议使用*通配。不知道是神马原因?
目前比较流行的有Eric Meyer的重置样式和YUI的重置样式。另有Condensed Meyer Reset简化Eric Meyer的样式。有趣的是,Eric的重置样式也是源于YUI的。而那份简化版又把Eric的样式简化回YUI的样式了 。但同时,糟糕的是,网上流传的比较广的(尤其是国内)都不是最新的版本。上面两个页面里直接看到的都不是最新的,Eric专门为有一个reset.css页面。而YUI当前版本(2.7.0)的reset.css实际地址里,比上面的页面中还多一些东西。此外,我们还可以基于一些常见的框架,比较著名的比如Blueprint或者Elements CSS Framework(这个的reset也是源自于Eric Meyer的)。OK,准备工作就差不多了。以上这些都可以作为参考资料来组织我们自己的reset。我这里主要采用YUI,兼带Eric的reset。
YUI的css reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}

Eric Meyer的CSS Reset V2.0|201101内容:

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6,
p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em,
img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,
dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption,
tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output,
ruby, section, summary,time, mark, audio, video {
margin: 0;padding: 0;border: 0;font-size: 100%;
font: inherit;vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, 
header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
阅读 3,372 评论 0 阅读全文

Javascript继承两种形式

Javascript本身是从Perl语言的语法演变而来的,本质上是脚本语言,随着版本的更新逐渐加入的对面向对象的模拟。我认为Js的面向对象模拟总 体上做得还是不错的,因为我们不能盲从任何一种理念,不能纯粹的为了OOP而OOP,我们需要抓住的是面向对象的好处到底是什么?为了这些优点去OOP, 才是最明智的选择,所以说Js做得还不错。 

Js的继承在很多书里面细致的分了很多种类型和实现方式,大体上就是两种:对象冒充、原型方式。这两种方式各有优点和缺陷,这里我先列举出来,再从底层分析区别: 

(一)对象冒充 

function A(name){ 
this.name = name; 
this.sayHello = function(){alert(this.name+” say Hello!”);}; 
} 
function B(name,id){ 
this.temp = A; 
this.temp(name);        //相当于new A(); 
    delete this.temp;        //防止在以后通过temp引用覆盖超类A的属性和方法 
     this.id = id; 
this.checkId = function(ID){alert(this.id==ID)}; 
} 

当构造对象B的时候,调用temp相当于启动A的构造函数,注意这里的上下文环境中的this对象是B的实例,所以在执行A构造函数脚本时,所有A的变量 和方法都会赋值给this所指的对象,即B的实例,这样子就达到B继承了A的属性方法的目的。之后删除临时引用temp,是防止维护B中对A的类对象(注 意不是实例对象)的引用更改,因为更改temp会直接导致类A(注意不是类A的对象)结构的变化。 

我们看到了,在Js版本更新的过程中,为了更方便的执行这种上下文this的切换以达到继承或者更加广义的目的,增加了call和apply函数。它们的 原理是一样的,只是参数不同的版本罢了(一个可变任意参数,一个必须传入数组作为参数集合)。这里就以call为例子,解释一下用call实现的对象冒充 继承。 

function Rect(width, height){ 
this.width = width; 
this.height = height; 
this.area = function(){return this.width*this.height;}; 
} 
function myRect(width, height, name){ 
Rect .call(this,width,height); 
this.name = name; 
this.show = function(){ 
alert(this.name+” with area:”+this.area()); 
} 
} 

关于Call方法,官方解释:调用一个对象的一个方法,以另一个对象替换当前对象。 
call (thisOb,arg1, arg2…) 

这也是一种对象冒充的继承,其实在call方法调用的时候发生的事情也是上下文环境变量this的替换,在myRect函数体中this肯定是指向类 myRect对象的实例了,然而用这个this作为上下文环境变量调用名字叫Rect方法,即类Rect的构造函数。于是此时调用Rect时候对this 的赋值属性和方法都实际上是对一个myRect的对象进行。所以说尽管call和apply并不是仅仅为了继承而新增的方法,但用它们可以模拟继承。 

对象冒充继承就是这么一回事,它可以实现多重继承,只要重复做这一套赋值的流程就可以了。不过目前真正大规模使用得并不多,为什么呢?因为它有一个明显的 性能缺陷,这就要说道OO的概念了,我们说对象是成员+成员方法的集合,构造对象实例的时候,这些实例只需要拥有各自的成员变量就可以了,成员方法只是一 段对变量操作的可执行文本区域而已,这段区域不用为每个实例而复制一份,所有的实例都可以共享。现在回到Js利用对象冒充模拟的继承里,所有的成员方法都 是针对this而创建的,也就是所所有的实例都会拥有一份成员方法的副本,这是对内存资源的一种极度浪费。其它的缺陷比如说对象冒充无法继承 prototype域的变量和方法就不用提了,笔者认为前一个致命缺陷就已经足够。不过,我们还是需要理解它,特别是父类的属性和方法是如何继承下来的原 理,对于理解Js继承很重要。 

(二)原型方式 
第二种继承方式是原型方式,所谓原型方式的继承,是指利用了prototype或者说以某种方式覆盖了prototype,从而达到属性方法复制的目的。 其实现方式有很多中,可能不同框架多少会有一点区别,但是我们把握住原理,就不会有任何不理解的地方了。看一个例子(某一种实现): 

function Person(){ 
this.name = “Mike”; 
this.sayGoodbye = function(){alert(“GoodBye!”);}; 
} 
Person.prototype.sayHello = function(){alert(”Hello!”);}; 
function Student(){} 
Student.prototype = new Person(); 
function Person(name){ 
this.name = name; 
} 
function Student(name,id){ 
this.id = id; 
} 
Student.prototype = new Person(this.name); 

关键是对最后一句Student原型属性赋值为Person类构造的对象,这里笔者解释一下父类的属性和方法是如何copy到子类上的。Js对象在读取某 个对象属性的时候,总是先查看自身域的属性列表,如果有就返回否则去读取prototype域(每个对象共享构造对象的类的prototype域所有属性 和方法),如果找到就返回,由于prototype可以指向别的对象,所以Js解释器会递归的去查找prototype域指向对象的prototype 域,直到prototype为本身,查找变成了一种循环,就停止,此时还没找到就成undefined了。 

这样看来,最后一句发生的效果就是将父类所有属性和方法连接到子类的prototype域上,这样子类就继承了父类所有的属性和方法,包括name、 sayGoodbye和sayHello。这里与其把最后一句看成一种赋值,不如理解成一种指向关系更好一点。这种原型继承的缺陷也相当明显,就是继承时 父类的构造函数时不能带参数,因为对子类prototype域的修改是在声明子类对象之后才能进行,用子类构造函数的参数去初始化父类属性是无法实现的, 如下所示: 

function Person(name){ 
this.name = name; 
} 
Person.prototype.sayHello = function(){alert(this.name+“say Hello!”);}; 
function Student(name,id){ 
Person.call(this,name); 
this.id = id; 
} 
Student.prototype = new Person(); 
Student.prototype.show = function(){ 
alert(“Name is:”+ this.name+” and Id is:”+this.id); 
} 

两种继承方式已经讲完了,如果我们理解了两种方式下子类如何把父类的属性和方法“抓取”下来,就可以自由组合各自的利弊,来实现真正合理的Js继承。下面是个人总结的一种综合方式: 

总结就是利用对象冒充机制的call方法把父类的属性给抓取下来,而成员方法尽量写进被所有对象实例共享的prototype域中,以防止方法副本重复创 建。然后子类继承父类prototype域来抓取下来所有的方法。如想彻底理清这些调用链的关系,推荐大家多关注Js中prototype的 constructor和对象的constructor属性,这里就不多说了。

阅读 4,093 评论 0 阅读全文

常见IE6兼容性

1. 强制浏览器是用Web标准解析
HTML的写法

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

或者XHTML的写法

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>


2、CSS选择器区分
IE6不支持子选择器;先针对IE6使用常规申明CSS选择器,然后再用子选择器针对IE7+及其他浏览器。

  1. .content {color:red;}
  2. div>p .content {color:blue;} –>


3、PNG的alph透明图片的问题
虽然可以通过JS等方式解决,但依然存在载入速度等问题,所以,这个在设计上能避免还是尽量避免为好。以达到网站最大优化。pngfix

4、IE6下的圆角
IE6不支持CSS3的圆角属性,性价比最高的解决方法就是用图片圆角来替代,或者放弃IE6的圆角。

5、IE6背景闪烁
如果你给链接、按钮用CSS sprites作为背景,你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存,每次触发hover的时候都会重新加载,可以用JavaScript设置IE6缓存这些图片:

  1. document.execCommand(“BackgroundImageCache”,false,true);


6、最小高度
IE6 不支持min-height属性,但它却认为height就是最小高度。解决方法:使用ie6不支持但其余浏览器支持的属性!important。

  1. #container {min-height:200px; height:auto !important; height:200px;}


7、最大高度
//直接使用ID来改变元素的最大高度

  1. var container = document.getElementByIdx_xx_x(‘container’);
  2. container.style.height = (container.scrollHeight > 199) ? “200px” : “auto”;
  3. //写成函数来运行
  4. function setMaxHeight(elementId, height){
  5. var container = document.getElementByIdx_xx_x(elementId);
  6. container.style.height = (container.scrollHeight > (height – 1)) ? height + “px” : “auto”;
  7. }
  8. //函数示例
  9. setMaxHeight(‘container1′, 200);
  10. setMaxHeight(‘container2′, 500);


8、100% 高度
在IE6下,如果要给元素定义100%高度,必须要明确定义它的父级元素的高度,如果你需要给元素定义满屏的高度,就得先给html和body定义 height:100%;。

9、最小宽度
同max-height和max-width一样,IE6也不支持min-width。

  1. //直接使用ID来改变元素的最小宽度
  2. var container = document.getElementByIdx_xx_x(‘container’);
  3. container.style.width = (container.clientWidth < width) ? “500px” : “auto”;
  4. //写成函数来运行
  5. function setMinWidth(elementId, width){
  6. var container = document.getElementByIdx_xx_x(elementId);
  7. container.style.width = (container.clientWidth < width) ? width + “px” : “auto”;
  8. }
  9. //函数示例
  10. setMinWidth(‘container1′, 200);
  11. setMinWidth(‘container2′, 500);


10、最大宽度
//直接使用ID来改变元素的最大宽度

  1. var container = document.getElementByIdx_xx_x(elementId);
  2. container.style.width = (container.clientWidth > (width – 1)) ? width + “px” : “auto”;
  3. //写成函数来运行
  4. function setMaxWidth(elementId, width){
  5. var container = document.getElementByIdx_xx_x(elementId);
  6. container.style.width = (container.clientWidth > (width – 1)) ? width + “px” : “auto”;
  7. }
  8. //函数示例
  9. setMaxWidth(‘container1′, 200);
  10. setMaxWidth(‘container2′, 500);


11、双边距Bug
当元素浮动时,IE6会错误的把浮动方向的margin值双倍计算。个人觉得较好解决方法是避免float和margin同时使用。

12、清除浮动
如果你想用div(或其他容器)包裹一个浮动的元素,你会发现必须给div(容器)定义明确的height、width、overflow之中一个属性(除了auto值)才能将浮动元素严实地包裹。

  1. #container {border:1px solid #333; overflow:auto; height:100%;}
  2. #floated1 {float:left; height:300px; width:200px; background:#00F;}
  3. #floated2 {float:right; height:400px; width:200px; background:#F0F;}


13、浮动层错位
当内容超出外包容器定义的宽度时,在IE6中容器会忽视定义的width值,宽度会错误地随内容宽度增长而增长。
浮动层错位问题在IE6下没有真正让人满意的解决方法,虽然可以使用overflow:hidden;或overflow:scroll;来修正,但hidden容易导致其他一些问题,scroll会破坏设计;JavaScript也没法很好地解决这个问题。所以建议是一定要在布局上避免这个问题发生,使用一个固定的布局或者控制好内容的宽度(给内层加width)。

14、躲猫猫bug
在IE6和IE7下,躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素,如果在他之后有不浮动的内容,并且有一些定义了:hover的链接,当鼠标移到那些链接上时,在IE6下就会触发躲猫猫。
解决方法很简单:

  1. 1.在(那个未浮动的)内容之后添加一个<span style=”clear: both;”> </span>
  2. 2.触发包含了这些链接的容器的hasLayout,一个简单的方法就是给其定义height:1%;


15、绝对定位元素的1像素间距bug
IE6下的这个错误是由于进位处理误差造成(IE7已修复),当绝对定位元素的父元素高或宽为奇数时,bottom和right会产生错误。唯一的解决办法就是给父元素定义明确的高宽值,但对于液态布局没有完美的解决方法。

16、3像素间距bug
在IE6中,当文本(或无浮动元素)跟在一个浮动的元素之后,文本和这个浮动元素之间会多出3像素的间隔。
给浮动层添加 display:inline 和 -3px 负值margin
给中间的内容层定义 margin-right 以纠正-3px

17、IE下z-index的bug
在IE浏览器中,定位元素的z-index层级是相对于各自的父级容器,所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z- index,有些情况下还需要定义position:relative。

18、Overflow Bug
在IE6/7中,overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上 position:relative;。

19、横向列表宽度bug
如果你使用float:left;把
横向摆列,并且
内包含的(或其他)触发了 hasLayout,在IE6下就会有错误的表现。解决方法很简单,只需要给定义同样的float:left;即可。

20、列表阶梯bug
列表阶梯bug通常会在给<li>的子元素<a>使用float:left;时触发,我们本意是要做一个横向的列表(通常是导航栏),但IE却可能呈现出垂直的或者阶梯状。解决办法就是给<li>定义float:left;而非子元素<a>,或者给<li>定义display:inline;也可以解决。

21、垂直列表间隙bug
当我们使用
包含一个块级子元素时,IE6(IE7也有可能)会错误地给每条列表元素(
)之间添加空隙。
解决方法:把<a>flaot并且清除float来解决这个问题;另外一个办法就是触发<a>的hasLayout(如定义高宽、使用zoom:1;);也可以给<li> 定义display:inline;来解决此问题;另外还有一个极有趣的方法,给包含的文本末尾添加一个空格。

22、IE6中的:hover
在IE6中,除了(需要有href属性)才能触发:hover行为,这妨碍了我们实现许多鼠标触碰效果,但还是有一些法子是可以解决它的。最好是不要用:hover来实现重要的功能,仅仅只用它来强化效果。

23、IE6调整窗口大小的 Bug
当把body居中放置,改变IE浏览器大小的时候,任何在body里面的相对定位元素都会固定不动了。解决办法:给body定义 position:relative;就行了。

24、文本重复Bug
在IE6中,一些隐藏的元素(如注释、display:none;的元素)被包含在一个浮动元素里,就有可能引发文本重复bug。解决办法:给浮动元素添加display:inline;。

25. Set Position: relative
给元素指定Position: relative能够解决很多奇怪的问题,比如对齐和显示不正确等。对于 Position的属性要小心设置,特别是设为absolute。

26. 给Float的元素加上inline属性避免双倍margin
这大概是最著名的一个bug了,IE6下对于浮动元素,会莫名其妙的双倍空白边,解决的方法也很莫名,设上display:inline属性就好了,对于float元素这个属性本身没有任何意义。

27、span标签的高度问题
这个在做图片圆角的时候很见,background-position会出现溢出,只要在span标签下加上 line-height:0;font-size:0;  就可以解决

28、IE6下行高失效line-height的bug

BUG症状:
当在一个容器里文字和img、input、textarea、select、object等元素相连的时候,对这个容器设置的line-height数值会失效;

受影响的浏览器:
Microsoft Internet Explorer 5.01 / Windows 
Microsoft Internet Explorer 5.5 / Windows 
Microsoft Internet Explorer 6 

解决方法:
对和文字相连接的img、input、textarea、select、object等元素加以一下CSS属性:
margin: (所属line-height-自身高度)/2px 0;  
vertical-align:middle;

29、针对IE的优化 
有些时候,你需要对IE浏览器的bug定义一些特别的规则,这里有太多的CSS技巧(hacks),我只使用其中的两种方法,不管微软在即将发布的IE7 beta版里是否更好的支持CSS,这两种方法都是最安全的。

1.注释的方法

(a)在IE中隐藏一个CSS定义,你可以使用子选择器(child selector): 
html>body p { 
/* 定义内容 */ 
}

(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏) 
* html p { 
/* declarations */ 
}

(c)还有些时候,你希望IE/Win有效而IE/Mac隐藏,你可以使用反斜线技巧: 
/* */ 
* html p { 
declarations 

/* */ 
2.条件注释(conditional comments)的方法

另外一种方法,我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式,而不影响主样式表的定义(强烈推荐)。就象这样:

<!–[if IE]> 
<link rel=stylesheet type=text/css href=ie.css /> 
<![endif]–>

阅读 4,253 评论 0 阅读全文

网站重构中ie6常见bug解决办法

1. 强制浏览器是用Web标准解析
译文出自:http://www.1x3x.net/blog/web-design/2009/03/10-fixes-for-ie6-problems.html

HTML的写法

1
2
 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” 
 “http://www.w3.org/TR/html4/strict.dtd“>
 

或者XHTML的写法

1
2
 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
 

2. Set Position: relative
给元素指定Position: relative能够解决很多奇怪的问题,比如对齐和显示不正确等。对于Position的属性要小心设置,特别是设为absolute。

3. 给Float的元素加上inline属性避免双倍margin
这大概是最著名的一个bug了,IE6下对于浮动元素,会莫名其妙的双倍空白边,解决的方法也很莫名,设上display:inline属性就好了,对于float元素这个属性本身没有任何意义。 (双边距bug)

4. 给特定元素加上hasLayout属性
很多IE6(甚至是IE7)的问题可以通过设置hasLayout这个ie only的内部属性来解决,比如让a这样的行级元素变成块级元素或者让元素应用透明效果。但这个属性并不能直接设置。最简单的让元素拥有hasLayout属性的方法是显式的为其设置高度或者宽度。有的时候,你不能显示的为其设定高度,可以使用设置高度为1%,而其父元素如果没有确定的高度时,该设置不会被应用到实际的高度上,但是hasLayout会被激活。

5. Fix字符重复bug
这是IE6上面一个非常奇怪的BUG,他的触发条件也是相当诡异,在浮动元素间如果有
<!– comment –> <!– comment –> <!– comment –>
这样的普通的HTML注释的话,会导致Float元素中的最后的字符会很诡异的出现在后面的clear元素中,具体的介绍大家可以看这里 positioniseverything 。

解决的方法也很奇怪
* 将所有的浮动元素设为 display:inline;
* 给最后的浮动元素设置 margin-right:-3px;
* 使用条件注释避免IE6下的问题 <!–[if !IE]>Put your commentary in here…<![endif]–>
* 在最后的容器内放入一个空的div (这种添加这种无语义的workaround并不是最理想的选择)

6. 需要悬浮效果的地方,尽量使用<a>标签
IE6中只能对<a>应用css hover效果,所以尽可能使用<a>标签来获取最大的兼容性。

7. 使用!important或者高级选择器来兼容IE6
使用!important和高级选择器来兼容IE6,可以避免使用那些通不过校验的非常规hack,比如所谓的_width这样的东西。我们来看个简单的例子。

1
2
3
4
5
 #element {
 min-height: 20em;
 height: auto !important; /* understood by all browsers */
 height: 20em; /* IE6 incorrectly uses this value /*
}
 

IE6是不能正确解读!important这个修饰符的,所以他会错误的使用height:20em这个属性来实现最小高度。(IE6下容器会自动扩展)

1
2
3
4
5
6
7
8
9
 #element {
 min-height: 20em;
 height: 20em;
}
 
/* ignored by IE6 */
#element[id] {
  height: auto;
}
 

或者使用高级选择器,同样也能实现该目的,这样代码既能保持合法性,也能很好的去兼容IE6这个诡异的产品。

8. 避免在IE6下使用百分比尺寸
1
2
3
4
 body {
 margin: 2% 0 !important;
 margin: 20px 0; /* IE6 only */
}
 

在IE6下是用百分比的尺寸是件非常让人头疼的事情,尽可能避免这样的使用,而是采用结合!important和精确尺寸来明确元素的大小。

9. 频繁测试,尽早测试
别忘记尽早测试,经常测试, 除非你的程度已经完成。不然,你可能花更多的时间来解决IE6的问题。一般情况下,如果你的网站能在IE6和firefox下良好表现,估计其他浏览器就不会有什么大问题了。

10. 重构你的代码
很多情况下,解决一个问题,可能比重构你的代码要花更多的时间。比如上一次给公司写一个频道页面的,没有一边制作,一边测试IE6的表现,导致最近有很多奇怪的问题,因为布局比较复杂。后来,干脆重构代码。用了2天。我想,如果是想解决方法,或许2天都搞不定

阅读 3,582 评论 0 阅读全文

浏览器内核知多少?

我们每天上网都离不开浏览器,但是你可能不会关心到浏览器内核的问题。浏览器的性能差异,与其使用的内核不无关系。今天,我们就来充实一下自己,了解了解有关浏览器内核的知识吧。      

浏览器内核是什么东西
      首先解释一下浏览器内核是什么东西。英文叫做:Rendering Engine,中文翻译很多,排版引擎、解释引擎、渲染引擎,现在流行称为浏览器内核,至于为什么流行这么称呼,请自行领悟。
      Rendering Engine,顾名思义,就是用来渲染网页内容的,将网页的代码转换为最终你看得见的页面。因为是排版,所以肯定会排版错位等问题。为什么会排版错位呢?有的是由于网站本身编写不规范,有的是由于浏览器本身的渲染不标准。 

      现在有几个主流的排版引擎,因为这些排版引擎都有其代表的浏览器,所以常常会把排版引擎的名称和浏览器的名称混用,比如常的说IE内核、Chrome内核。其实这样子是不太合理的,因为一个完整的浏览器不会只有一的排版引擎,还有自己的界面框架和其它的功能支撑,而排版引擎本身也不可能实现浏览器的所有功能。
      下面罗列一下几款主流的排版引擎和浏览器。
      1、Trident 内核(Windows)
      Trident 就是大名鼎鼎的 IE浏览器 所使用的内核,也是很多浏览器所使用的内核,通常被称为IE内核。基于Trident内核的浏览器非常多,这是因为Trident内核提供了丰富的调用接口。老的Trident内核(比如常说的IE6内核)一直是不遵循W3C标准的,但是由于当时IE6的市场份额最大,所以后果就是大量的网页专门为IE6等老Trident内核编写,在IE6下显示很正常,但其实这些网页的代码并不符合W3C标准,于是,完全依据W3C标准写的网页在老的Trident内核下面又出现偏差,这就是为什么很多人觉得后来的IE9的网页排版有时会乱了,而IE6则正常,其实不是浏览器兼容性差了,而是你访问的网页不符合新的标准。目前可供调用的最新版的Trident内核是IE9所用的内核,相较之前的版本对W3C标准的支持增强了很多。
 
IE浏览器使用Trident 内核
      Trident内核的常见浏览器有:       IE6、IE7、IE8(Trident 4.0)、IE9(Trident 5.0)、IE10(Trident 6.0); 

      世界之窗、 360安全浏览器、傲游;搜狗浏览器;腾讯TT;阿云浏览器(早期版本)、百度浏览器(早期版本)、瑞星安全浏览器、Slim Browser; GreenBrowser、爱帆浏览器(12 之前版本)、115浏览器、155浏览器; 闪游浏览器、N氧化碳浏览器、糖果浏览器、彩虹浏览器、瑞影浏览器、勇者无疆浏览器、114浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器;
      其中部分浏览器的新版本是“双核”甚至是“多核”,其中一个内核是Trident,然后再增加一个其他内核。国内的厂商一般把其他内核叫做“高速浏览模式”,而Trident则是“兼容浏览模式”,用户可以来回切换。 

      2、Gecko(跨平台) 

      Netscape6 启用的内核,现在主要由Mozilla基金会进行维护,是开源的浏览器内核,目前最主流的Gecko内核浏览器是Mozilla Firefox,所以也常常称之为火狐内核。因为Firefox的出现,IE的霸主地位逐步被削弱,Chrome的出现则是加速了这个进程。非Trident内核的兴起正在改变着整个互联网,最直接的就是推动了编码的标准化,也使得微软在竞争压力下不得不改进IE。不过比较可惜的是,虽然是开源的,也开发了这么多年,基于Gecko的浏览器并不多见,除了一些简单的改动(坑爹的X浏览器)或者是重新编译(绫川ayakawa、tete009),深度定制或者增强型外壳的还比较少见。另外就是有一些其它软件借用了Gecko内核,比如音乐管理软件SongBird。
      常见的Gecko内核的浏览器:Mozilla Firefox、Mozilla SeaMonkey、Epiphany(早期版本)、Flock(早期版本)、K-Meleon。
 
Gecko内核的浏览器:Mozilla Firefox
      3、KHTML(Linux)
      KDE开发的内核,速度快捷,容错度低。这个内核可能不见得很多人知道,但是后面再看下去你就明白了。常见的KHTML内核的浏览器:Konqueror。
      4、WebKit(跨平台) 

      由KHTML发展而来,也是苹果给开源世界的一大贡献。是目前最火热的浏览器内核,火热倒不是说市场份额,而是应用的面积和势头。因为是脱胎于KHTML,所以也是具有高速的特点,同样遵循W3C标准。从目前看来,WebKit 内核是最有潜力而且是已经有相当成绩的新兴内核,性能非常好,而且对W3C标准的支持很完善,本人非常看好它。 

      常见的WebKit内核的浏览器:Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器。

      5、Chromium(跨平台)

      其实 Chromium 就是 WebKit,维基百科里面并没有将Chromium从WebKit分出来,这个区分完全是基于我个人的恶趣味。记得以前看过一个大牛的博文说过,Chromium把WebKit的代码梳理得可读性提高很多,所以以前可能需要一天进行编译的代码,现在只要两个小时就能搞定。这个我自己也没有考究过,但是估计可信。这个也能解释为什么Gecko和WebKit出来了这么久,第三方编译、定制的版本并不多,但是由Chromium衍生出来的浏览器早就满坑满谷了。
      常见的Chromium内核的浏览器:Google Chrome、Chromium、SRWare Iron、Comodo Dragon。
Google Chrome浏览器内核是Chromium      

 6、Presto(跨平台)
      Opera 所采用的内核,准确地说,是Opera 7.0及以后版本的内核,Opera 3.5-6.1版本使用的内核叫做Elektra。不用说,Presto对W3C标准的支持也是很良好的。虽然我很喜欢Opera,但是我对Presto的渲染速度一直有保留态度。之前在OperaChina论坛看见有人说过,Presto优先解析文字,保证可阅读性,媒体资源的渲染放后。常见的Presto内核的浏览器:Opera。

阅读 3,139 评论 0 阅读全文

记录工作生活点滴。

返回
顶部