命中注定总有一个浏览器作为复仇女神来到世界各地的开发者中，在web标准运动初期，这个角色是Netscape Navigator 4，垂死挣扎就是不肯死去，阻碍着现代标准的进程；今天这个角色被Internet Explorer 6这位邪恶的坏同学代替了。——Jeremy Keith

盒模型（The Box Model）

我这里把盒模型真正给丫立体化（特殊到正方体了怎么样）：

有一个正方体宝贝比如是传说中象征永恒的水晶，为了保护它需要一个精美的盒子。为了防止碰撞，在盒子和水晶之间预留了空间来放海绵。在盒子外面再加一层泡沫塑料，也是为了防止水晶磕磕碰碰。我们现在把这宝贝一边的宽度定位width:60px(可以假想为60cm)，盒子里面的海绵厚度padding:15px（也就是说海绵厚度为15cm），盒子的皮厚border:5px（包装够结实——5cm厚），那需要的盒子边长就是60+2*15+2*5=100px（盒子的边长是100cm），水晶盒子外面的泡沫塑料是margin:10px（外面再包10cm厚的泡沫，结实！盒模型的问题和它无关，先把他撕下来扔掉好了-__-）

对于标准的盒模型来说：他们的盒子是看到的实际的盒子，是包含了海绵和水晶的盒子。但是早期的IE看到的只是字面意思上的width。

解决方案：

在HTML页面里面加入完整的<!DOCTYPE>，IE6会切换到近似乎标准的模式，这样IE6就会正确的解释盒模型。如果你不这样做，也可以在定义了width的元素里面不用padding和border，在被封闭的元素里面随意的运用。

我一般解决这个问题的方法是，不在boxes里面用只在layout用.如果box里面有文字在

标签里，我会在p元素直接用padding，跳过这个问题，但是这是可行的。——css-tricks

双边距问题（Double-Margin）

几乎所有的有些经验但经验不足的同学都遇到过这个悲剧的现象，浮动div嵌套着用的不亦乐乎，margin-padding此起彼伏。定了个div想和外部的div保持距离，就在里面的div来个margin，这时候就产生了传说中丑名远播的双边距问题：

未修正代码：

#selector{
width:200px;
height:50px;
float:left;
margin:5px 20px;
border:#00a6cc;
}

修正代码：

#selector{
width:200px;
height:50px;
float:left;
margin:5px 20px;
border:#00a6cc;
      display:inline;/*hi,-___-kill the double margin bug*/
}

在做BI十周年的时候我在父元素用了padding，在IE6标准模式下这样做也是一种办法。

最小/大宽/高（min-width/max-width and min-height/max-height）

IE6不能解释最小最大宽高，其实我觉得这用的不太多。对图片在站点中的重要问题有很多不知道，以后会慢慢学习。很多时候缩略图都是生成的图片，大幅图片直接缩小感觉会比较糟糕。

但是IE6会像标准浏览器解释min-width（min-height）一样解释width（height），所以可以利用IE6不能识别的!important或者其他IE6不能识别的高级选择符来hack：

#selector{
min-width:100px;
width:auto !important;/*IE6区分无法识别*/
width:100;
}

#selector{
min-width:100px;
width:100;
}
html>body #slector{/*IE6区分无法识别-IE7?*/
height:auto;
}

因为IE6把width/height处理了min-width/min-height，所以max-width/max-height没办法这样做了，所幸IE有自己的私有属性expressions，但是这个东西严重影响浏览器性能，但是还是摘来看看：

/*写给 IE6 的max-width*/
* html div.max-width {
  width: expression(document.body.clientWidth > 499 ? "500px" : "auto");
}
/*写给标准浏览器的 max-width*/
div.max-width {
  max-width: 500px;
}

max-width

/*写给 IE6 的max-height*/
* html div.max-height {
  height: expression(this.scrollHeight > 499 ? "500px" : "auto");
}
/*写给标准浏览器的 max-height*/
div.max-height {
  max-height: 500px;
}

max-height

高级选择符可参考之前的一些文章

• CSS选择符之一属性选择符
• CSS选择符之二子对象选择符

清除浮动

首先我们来看看什么时候会遇到这个问题，来看初始的html结构和css（下面的测试将会在Firefox3.5以及IETester中的IE6和win系统版IE8/IE7兼容模式进行）：

body{
color:#da444f;/*为了让字变色*/
}
*{
margin:0;
padding:0;/*一个小小的cssReset*/
}
.wrap{
border:1px solid #da444f;
background:#e4faff;
width:350px;/*添加不添加这个宽度呢，先填上*/
padding:10px;/*添加这个是为了边框和内容有点点距离*/
}
.column-left{
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}
.column-right{
margin-left:10px;
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}

column-left
column-right

此时的显示无差异，均如下图所示：

不清楚浮动是怎么样的情况：

这个样子显然不是设计所需要的，两栏布局应该是一左一右并排才是。这时候不得不添加float:left;。在添加浮动我想多做一下测试，到底会有什么不同？单在左栏添加、单在右栏添加、两栏同时添加。

先看单在左栏添加的状况，此时左栏样式添加了float:left：

.column-left{
        float:left;
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}

这时候IE6显示如下：

IE7显示如下：

IE8和FF3.5显示和相同，如下：

可以看出IE67那抽风的样子，完全不可理喻，其他结论先不提。
下面再测试单在右栏添加float:left;：

.column-right{
        float:left;
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}

这次IE6显示如下：

（这里插播一则国际新闻：这个刚才为什么为什么这个和下面的不一样，包括刚才那个，其实呢，这个也是前文提到的双边距bug，这里只要在column-right加上display:inline;就可以解决了）
IE7显示：

IE8和FF3.5显示相同（实际上文字的字母的距离以及IE文字毛茸茸的样子是因为IE对字体进行了特殊的处理），如下

下面将测试左右栏都添加float:left;的情况：

IE6/7显示相同为：

IE8/FF显示为：

———————-休息一下，来个分割线———————-

有同学好奇的发现：在没有添加任何清除浮动的情况下，IE6/7显示的是正确的！只有FF3.5/IE8才有问题！这是因为另外一个应该被人知道的微软私有属性hasLayout搞的鬼。这里简单的介绍下：IE67支持这个东西，这个属性会被一些诸如width:*px的属性激活，激活这个东西IE会突然听话很多，更多介绍先推荐一篇翻译文章[译文]On having layout，其他的请看参考文章。这个属性到IE8就不支持了，所以上边最后的测试显示IE8,FF得到了我们预料的悲剧。我开始为了截图方便在.wrap添加了width:350px的属性。

下面再来看看没有这个width:350px的时候，左右都不添加浮动的情况，样式如下：

body{
color:#da444f;/*为了让字变色*/
}
*{
margin:0;
padding:0;/*一个小小的cssReset*/
}
.wrap{
border:1px solid #da444f;
background:#e4faff;
/*此处去掉width:350px*/
padding:10px;
}
.column-left{
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}
.column-right{
margin-left:10px;
border:1px solid #00a6cc;
background:#ffdddf;
width:150px;
height:100px;
}

浏览器均显示为：

此时右栏在IE6并没有出现双边距问题，因为它不是浮动元素，其他单栏测试省略。
再来测试双栏添加float:left;wrap不设宽度，浏览器均如下所示：

再来测试双栏添加float:left;不设wrap宽度不设wrap内边距：（这样对比下，更直观）

说了这么多，自己越来越清晰，但不知道这样能不能讲明白，但是测试浮动会出很多状况。所以，传说浮动会产生一堆变态问题，那绝对是个事实！这个时候就会遇到怎么处理这些浮动的问题了。

解决方案——怎么清除浮动：

清除之后如图所示：

附加标签

W3C推荐的方法就是这个方法，这个方法在浮动元素末尾添加一个空标签：

或者div之类的也可以

这样添加额外的结构，如果不介意有些多余的结构也不会有任何问题。

clearfix

将下面代码写入css，在包含content的div加入clearfix：

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix { display: inline-table; }

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix { display: block; }
/* End hide from IE-mac */

像下面这样

column-left
column-right

参考文章

• 10 Fixes That Solve IE6 Problems
• Solving 5 Common CSS Headaches
• 9 Most Common IE Bugs and How to Fix Them
• Definitive Guide to Taming the IE6 Beast
• Min-Height Fast Hack
• Lessons Learned Concerning the Clearfix CSS Hack
• Clearing a float container without source markup

Modernizr

如果你使用高级CSS属性，Modernizr 将是一个非常有用小型JavaScript。它为你的页面html标签添加一些类（class），来测试浏览器是否支持一些特定的CSS属性，像：

* @font-face
* rgba()
* hsla()
* border-image
* border-radius
* box-shadow
* Multiple backgrounds
* opacity
* CSS animations
* CSS columns
* CSS gradients
* CSS reflections
* CSS 2-D transforms
* CSS 3-D transforms
* CSS transitions

比如border-image，当一个页面加载到的浏览器支持它，将会返回borderimage，如果浏览器不支持将返回no-borderimage。

Modernizr 不会使不支持这些属性的浏览器变的支持，但是给出的重要信息（在表单里的类）是可以用在样式表里面——引用独立选择符和属性到元素。

IE-7.js

IE-7.js使得IE5+的行为像IE8,支持更多的高级选择符并修复了部分渲染bug，这里有部分来自creator’s websitee的摘录：

添加了高级选择符的支持：

 >, + and ~; attribute selectors; :hover, :active, :focus for all elements; :first-child, :last-child,   nly-child, :nth-child, :nth-last-child; :checked, :disabled, :enabled; :empty, :not; :before, :after, :content; :lang

使用标准盒模型。

支持 min- 和 max-width 还有 -height.

支持PNG alpha透明（但是没解决PNG背景重复和背景定位时的问题）。

缺点是这个技术需要可运行javascript的环境，这是不幸的。所以，小心给那些设置js不可用的用户可接受的站点版本，特别是一些脚本不能执行，或者最坏的情况是，缺少JavaScript将破坏站点的设计。

实例

常言道，说起来容易做起来难。所以，我们用一些优秀的例子将刚才提到这些新东西付诸实践。这是一些我们访问的在不同浏览器渲染结果不同的网站。在某些情况下，差别显而易见，但是开发人员选择接受这些不同。

Twitter

Twitter – Firefox

Twitter – IE6

WordPress

WordPress – Firefox
WordPress – IE6

WWF

WWF – Firefox

WWF – IE6

总结

记得写这篇文章的初衷是想教大家怎么样hack IE还有处理它的缺陷甚至如何利用JavaScript实现效果。（现在）恰恰相反，这是篇解释设计建立站点需要知道的跨浏览器差异。

你没有看到过用户因为看到Twitter或者WordPress没有圆角而引起的暴动吧；他们甚至没有感到失落，因为那些差异
基本没有破坏站点。人民仍然可以使用站点获得良好体验。大多数情况下，他们甚至没注意到这些！

所有我们需要做的是客气但严谨的向客户解释，这样就是不断进化的web的贡献。

目录

• 在IE主流时代诗意地编码（一）
• 在IE主流时代诗意地编码（二）
• 在IE主流时代诗意地编码（三）
• 在IE主流时代诗意地编码（四）
• 本文译自 Smashing Magazin [ 英文原文 ]

伪类

伪类是通过对象的特征对其进行格式化的，而不是通过它们的标识符、属性或者内容。

伪类：first-child将匹配一个元素的第一个子对象。假如你打算让新闻的第一段更具有视觉效果。如果新闻出现在类名（class）为news的<div>元素中，下面的规则将格式化每篇新闻的第一个<p>元素：

div.news p:first-child {

font-weight: bold;

}

<div class=“news“>

<p>Hi, 认识圣斗士吗? </p>

<p>星矢穿着神圣衣进入哈迪斯的神殿后面的事情怎么样了?</p>

</div>

动态伪类（dynamic pseudo-class ）是伪类的一个子集。它们指那些有某些动态特征的伪类。运用它们，能够根据站点访问者的特定行为来格式化对象。

：focus将应用于那些获得焦点的对象。例如，当访问者点击了一个表单或者一个标签页中的输入框的时候：

input[type=text] : focus {

color: #f00;

background-color:#666;

}

用伪类：lang可以格式化特定语言（或许与文档主体不同的语言）内容中的对象。例如，下面的规则将一个迷你国旗放在任何汉语<blockquote>上：

blockquote:lang(cn) {

padding-right : 30px;

background: url(images/cn.png) no-repeat right top;
}

<blockquote lang=”cn”>

<p>哈尔很帅，黄头发时候最帅。冈田秒子长大的样子好丑，真的很丑的，奇怪，怎么可以那么丑，笑的就更丑了。</p>

</blockquote>

伪对象

伪对象同样能格式化那些不能作为DOM节点的文档部分。

伪对象：first-line将以段落的第一行作为目标。任何第一行中的字数将会随着文字在浏览器中的大小而改变。

下面的规则应用于页面中所有段落的第一行：

p:first-line {

font-style: italic:

}

伪对象：first-letter能够将元素的第一个字母或者数字作为目标。接下来的规则将用到类名为introduction的<p>元素中的第一个字符：

p.introduction:first-letter {

font-weight: bold:

font-size:400%;

}

h2 + p {

font-size: 20px;

border-bottom: 1px solid #666;

}

将上面的规则应用到下面这个例子中时，它只会影响第一段的内容

<h2>Hi, guy.</h2>

<p>preview on lost.</p>

<p>preview on prison break.</p>

提示? -_- -！连接符（Combinator）分隔组合选择符中的两个或更多个选择符。可用的连接符包括空格，> ，+，逗号，分号。（当然都是半角咯#_#）

下面的例子规则将设置所有属于<div>元素子对象的链接的样式：

div > a {

text-indent: 200px;

}

这个规则仅影响那些直属于<div>元素的子对象（不是其他自对象的子对象）<a>元素。如果其他元素出现在<div>和链接之间——例如<ul>元素——选择符将不会与之匹配，text-indent格式也会失效。

<div>

<a href=”http://www.5ivedanc.com”>yunsi me</a>

<ul><li><a href=”http://www.5ivedanc.com”>yunsi me</a></li></ul>

</div>

属性选择符异常强大，通过它们可以基于一个元素是否有属性名称，例如href, 或是是属性值，如http://www.xx.com 来对这个元素设计样式。

在下面的例子中，所有包含alt属性的图像都将会有一个灰色的色框：

img[alt] {

border: 1px dotted #999;

}

<img src=”../img/5ve.jpg“ alt=”ID: Milo Xing” />

所有包含title属性的链接将是红色：

a[title] {

color: #f00;

}

<a href=”../blog/index.php” title=”5ivedance blog“>blog me</a>

同样能够基于属性的内容来格式化一个元素：

p[class="rant"] {

font-weight: bold;

text-transform: uppercase;

}

<p class=”rant“>

Hi, I’m 5ivedance.</p>

同样，

div[id="main"] {

float=left;

}

<div id=”main“><p>Hi, I’m 5ivedance.</p></div>

【也许你会觉得上面这两个列子不是纯属费事吗，恩，其实我也是这么觉得开始，只是多默念一下这句话吧：基于元素部分的属性设置元素的样式。】

运用模式匹配（pattern matching), 你能够基于元素部分的属性设置元素样式。在下面的例子用到引言（<q>）的引用（cite）属性中的URL:

q[cite*=http://www.5ivedance.com/] {

background: #f00;

}

<q cite=”http://www.5ivedance.com/?134/“>Hi, I … I …  I miss u.</q>