新窗口打开下图

Download HTML 5 Visual Cheat Sheet

命中注定总有一个浏览器作为复仇女神来到世界各地的开发者中，在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 [ 英文原文 ]

这将面临的问题是最好不管那些不支持（新技术的）的浏览器，因为即便缺乏支持对用户浏览内容毫无影响。

这样主要会用到一些新CSS3属性，比如 border-radius， text-shadow 还有border-image。

Border-radius

这是设计师在不考虑IE以为学习到的第一个CSS3属性，因为它明确的美化属性。用border-radius的时候，最好不要试图在IE里复制相同的效果，让它随意吧。



Gowalla在他们网站运用了border-radius，但是IE用户看不到这个效果。

哪些浏览器不支持？所以的IE，Opera也是。

Font-face

在IE里面可以使用Font-face，但是你需要利用Microsoft’s Web Embedding Fonts tool来转换你的字体。

如果想让的站点包含字体和格式工具，CSS应该添加以下结构：

@font-face {
	  font-family: "Delicious";
	  src: url("Delicious-Roman.eot");
	  src: local("Delicious"), url("Delicious-Roman.otf") format("opentype");
}

通常，浏览器不能渲染一堆字体中的第一个字体时，不应该破坏页面或任何方面出现阻挠用户浏览内容的问题。所以，这里推荐仔细考虑想让用户看到的那些字体，如果浏览器不支持font-face，应该依赖那些在样式表中声明的字体。

如果浏览器不支持font-face直接显示下一个可用的字体

多栏（Multiple Columns）

与其建立额外的浮动DIV来组织你的文字到分栏，不如利用CSS3的多栏属性自动建立分栏。但这意味着一些浏览器将会看不到。

多栏被很好的用于文字，而不是设计。如果在站点使用它们，最坏的情况是用户将看到一行很长的文字。

如果你只是处理简短的文字，为什么不直接在两分钟内用它搞定呢？但是如果减损可读内容
，你最好的选择是坚持用常规的DIV来建立分栏。


这里，引导文字是用了CSS multiple columns。IE用户将会看到常规的单栏文字。

哪些浏览器不支持？IE和Opera.

RGBa and Opacity

RGBa颜色是福祉般的恩惠。与其努力的为背景更新PNG文件，可以用CSS3创建相同的透明效果。但是IE做不到。IE6甚至不知道PNGs为何物。

安全的方案是，这些透明层不可以经常在覆盖着重要内容的元素上使用；在这种情况下，首先保证内容不可以被其他元素遮挡。

所以，当使用RGBa颜色时，确保在RGBs前面包含一个常规颜色，这样当浏览器不能读出它时仍然有备用颜色：

div {
	background-color:  #FFFFFF;
	background-color: rgba(255,255,255,.5);
}

透明在IE可以用Opacity滤镜实现，但是IE滤镜只在设计的元素上可用：

div {
	filter: alpha(opacity = 50);
}

另外，注意Opacity比RGBa颜色工作更复杂：所以这个DIV包含的元素将会“被透明化”。

24ways狠狠的用了RGBa颜色和alpha透明，尽管IE不能渲染透明。

那些浏览器不支持？所有浏览器支持opacity,条件是提供滤镜。IE不支持RGBa颜色。

Text-shadow

一个简单的要求：忽略它。假定文字仍然具有可读性，相对CSS而已试图用其他任何方法建立文字阴影（text-shadow）都是一项巨大的工程。所以除非失去阴影会影响大面积文字（或者一小部分，可以用图片代替）的清晰度，不用它是良好的选择。（译者没读懂这部分意思，大大们来看看This is an easy call: ignore it. Assuming that the text is still readable, trying to recreate text-shadow any other way than with CSS is a Herculean task. So, unless missing text-shadow would seriously reduce the clarity of a large amount of text, or a small amount (in which case you could use image replacement), you’re better off without it.）


在IE下，Broker Direct站点白色文字阴影是看不到的

那些浏览器不支持？IE。

边框图片Border-image

border-image属性给我们一种为元素添加漂亮边框的简单方法，否则那将是噩梦般的事情（这也是大多数情况我们可能不选择这样做）。

因为这个属性几乎总是用来美化，最佳的选择是为不支持该属性的浏览器包含一个备选——普通边框属性，并且在这之后为其他浏览器添加附加样式。

SpoonGraphics使用了border-image，但是IE不可见。

哪些浏览器不支持？相反的回答更简单：到现在为止，只有Safari和Firefox支持这个属性。

多背景图（Multiple Backgrounds）

这个属性的使用在于站点的设计，但大多数情况，缺乏第二甚至第三个背景不会影响可读性。

CSS的多背景图（Multiple Backgrounds）解决了一大堆因使用不同html hooks和嵌套元素来完成相同效果所产生的头疼问题。所以，如果你选择使用多背景图，你已经选择哪个浏览器可以显示结果。

如果让所有的用户都看到背景图很重要的话，使用旧办法——为不同的元素添加不同的背景吧。

如果也不这样，最好的措施是给那些不支持的浏览器以备选方案：选择你认为最重要的或者最适合全局设计的背景图，在多背景（Multiple Backgrounds）属性前面添加旧属性。不支持的浏览器会忽略第二个属性。

哪些浏览器不支持？IE，Opera，Firefox3.6+。

目录

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

如你所知，所以的浏览器对各种html元素都具有不同的默认属性。这是为什么使用重置样式文件（Reset style sheet）是一个明智选择，这样我们就可以在“一张白纸”（去掉了众多浏览器默认属性，可以让你自己的属性更好的工作）上面开始工作了。

众多充斥互联网的重置样式文件各有优劣。Eric Meyer的重置文件被广泛的认为标准并被经常使用，还有其他一些演化的版本。(如果不能看到这个页面，可以直接下载这个文件css-reset.txt)

随着HTML5的出现，在CSS重置文件（Reset style sheet）中包含新HTML元素也是个好主意。html5doctor为Eric的重置文件提供了一个很好的升级版本，你可以在你的项目里面免费使用它。

在使用CSS reset的时候，既可以嵌入你自己的CSS文件头部也可以从外部引入——如果你有代码洁癖：

@import url(reset.css);

不同的CSS可能破坏你的布局

如果你觉得使用Universal IE6 CSS，你刚省去了很多头疼的事情。但是不要被IE7、8那个鲜亮的logo迷惑了你：如果你打算用最新的CSS技术，还要为它们做很多事情。

IE6 和PNG支持

大家都知道IE6不能正确显示alpha通道透明PNG图片（也就是那个好看的i.e. the good-looking ones——我又囧了），看到过精心制作的logo出现那个讨厌的淡蓝色背景。

你可以在一些为了是IE6显示PNG而做的变通方法中做个选择。每个方法都相当容易实施，并且在整体设计中做到不相同？（这句不知道怎么翻，大大们帮忙下——Each is fairly quick to implement and does make a difference in the overall design.）

这里是一些解决这个问题的优秀脚步和技术：

• DD_belatedPNG
• Supersleight jQuery Plugin
• PNG 8-bit technique (Fireworks)
• Clever PNG Optimization Techniques
• PNG Optimization Guide: More Clever Techniques

值得注意的是当前越来越多的网页设计选择不去为IE6解决PNG问题：

最新改版的31three没有用任何方法为IE6解决PNG问题

高级选择符

这些选择符几乎是他们自己开发的最优雅的CSS，因为他们才拥有CSS真正的力量——可以使得作为开发者的我们，人生变的更简单（我们的预算也会显著降低！）。

是否决定让它们在IE工作，主要取决于我们在哪里用到它们。

比如，如果利用它们来添加更多的细节到设计中，像代表文件类型的精致图标，如果有些浏览器不显示他们不会带来很大的区别。站点的访客不会知道他们错过了什么，链接任然完整可用。

这些选择符也被广泛的运用到提升排版细节，缺少对它们的支持不会给你的设计带来很大的问题。

Hicksdesign在导航菜单的项目号码里面使用了高级选择符，对IE6用户而言它们是不可见的

哪些浏览器不支持这个？实际上IE6看不到样式文件提交的任何高级选择符。它仅能理解简单的父子层级的类（classes）和ID选择符。多个类提交到同一个元素（HTML标签）甚至会冲突！不能信任IE6。

IE7忽略 :lang 选择符和伪元素（pseudo-elements），比如 :first-line ，:first-letter， :before，还有 :after 。但是可以理解所以的属性选择符。

另外，迄今为止发布的所有IE（作为译者的我：就是IE8和IE8-）版本都不支持伪类 :target ，UI元素声明伪类（:enabled， :disabled，等），结构伪类（像 :nth-child :nth-of-type还有 :first-child）或者负伪元素。

盒模型规则

盒规则允许为一个元素设置任何需要的宽和高（盒规则允许你告诉你浏览器你期望的元素宽和高）。

比如，可以设置 box-sizing 属性为 border-box，这时设置的宽度和高度将会减去内边距（padding）和边宽（border），而不是加上它们（上面所述是W3C的标准盒模型-standard box model说明）。

这样使控制元素大小变的容易，同时使得垮浏览器大小表现一致。

如果确信站点在IE里以缺陷的盒模型渲染（quirks mode）（以不标准的盒模型渲染-and therefore renders with the non-standard box model），你或许想在样式表里用这个属性使得所有的浏览器统一。

确保添加标准属性和浏览器专有属性：

div {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

哪些浏览器不支持这个东东？如果站点在怪异模型（quirks mode）渲染，IE6将会用不标准的盒模型渲染，所以就算有 border-box的属性也会被渲染。可以强制IE6以怪异模型渲染（译者觉得这里应该是标准模型吧？）。有一些可选的方法，其中一个是在HTML页面doctype声明前添加HTML 注释。（译者很难过的：这一段好悲剧，没看懂或许作者没说清，这个强制的办法到底怎么做到呢。以下是英文原作Which browsers don’t support this? If the website is rendered in quirks mode, IE6 will render using the non-standard box model, so it will already be rendering as if it had the “border-box” property on. You can force IE6 to render in quirks mode. There are a few ways of doing this; one way is by adding an HTML comment before the doctype declaration of your HTML pages.）

多媒体问题

大多数浏览器不能完全的支持多媒体，IE根本就不支持。

然而，手持设备总是需要演化的样式，比如iPhone，事实上与主题毫无相干。

如果只是为了iPhone而是用媒体，事实上其他的浏览器不支持，任何方法都一样，鼓励更多的使用。

如果利用媒体建立更加灵活可用的站点，窗口大小之类的变化，现在只有Safari，Firefox和Opera支持（部分的）。

哪些浏览器不支持？IE，一些时候是Safari和Firefox。

目录

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

我们在实际开发过程中是怎么做的呢？在开发网站中我们怎样做到即利用最新的编码技术又可以保证Internet Explorer的用户的正常访问呢？

在这篇文章中，我们将见到既可以保证IE用户良好的用户体验又可以保证技术前进的措施。我们将集中在CSS部分，但是会提供一些处理其他问题（overall markup）的小技巧。

可以斟酌我们之前的文字：

• Taming Advanced CSS Selectors
• Take Your Design To The Next Level With CSS3
• Push Your Web Design Into The Future With CSS3
  

内容最重要

杰弗里-泽尔德曼（Jeffrey Zeldman，Web 标准项目小组的负责人）曾经说，“内容要先于设计。缺少内容的设计不是设计，是装饰。” 事实上，在我们网站上最重要的是内容。无论他们使用什么样的浏览器，这才是他们需要得到的东西。

使用CSS3不是要忽略过时的浏览器，把访客拒之门外 。我们应该在老浏览器甚至是IE5、IE5.5里面测试我们的网站，保证每个用户可以看到内容。

这也不是说我们要退出消灭IE6的战争。我们仍然可以学习以下网站的例子，比如Twitter和YouTube，添加一个平易近人（dd visible but not dead-end）的升级提示。

Twitter和Youtobe的给IE6用户的提示信息

记住：每个专业人员有责任教育那些对他们专业不熟悉的人。我们应该解释这些原理给我们的客户，但不能颐指气使地说教。毕竟他们的工作不是搞清楚这些事。

首先是最基本的：“三层”分立（HTML, CSS 和 JavaScript）

当我们一步一步建立一个新站点的时候。首先，是HTML。我们将尽可能使用语义化的标签来标记我们的内容：标题应该用heading，列表用list，等等。内容完美的可读性和仅仅完成这部分代码就拥有可理解的结构是最低限度。内容应该有理有据，我们必须时刻记得这“层”（HTML）是我们开发其他剩余项目的基石。

其次，我们添加CSS样式。这一步，我们为站点添加视觉元素，使站点个性化。同时我们应该保证在没有第三层（JavaScript）的时候，内容的可读性。

最后，第三层JavaScript，行为层。这里我们给站点加入交互元素。用像tabs、sliders、lightboxes等工具丰富站点的体验。

将这些过程铭记心中，任何浏览器都可以访问我们的内容。保证过时的浏览器只得到基本的内容，而忽略那些妨碍用户浏览的复杂代码。

为老浏览器添加基本样式

这样我们语义化标记做完了。我们知道一些浏览器不能正确渲染CSS或者根本不能渲染，像那些Netscape 4.o或者Internet Explorer 4.0之前的浏览器，显示裸内容——无样式版——是最佳的选择。

一些同学认为时至今日没有必要这样做。但是如果你想确保那些使用老浏览器的同学不会陷入困境，那么用link 链接基本版本的CSS，然后用@import链接更高级CSS文件吧，如下：

也可以跳过link全部标签，留给老浏览器一个只有文字的网站版本：

拥抱差异

现在让我们来处理这个常用浏览器中的害群之马：Internet Explorer 6。
你有两个选择：

1.如果在你站点的访客中只有很少比例的人在用它（IE6），你只需要为IE6建立一个基本的样式。

2.接受你的设计在IE6中将得到不一致的表现，并且决定该舍弃什么：哪些IE6问题需要纠正那些该放弃。

如果你选择提供给IE6一个基本的样式，最好的办法是利用Universal IE6 CSS。实际上你的网站没有设计，但是这个样式表确保网页有个可读的宽度，合理的标题大小，并且内容也有一些适当的留白。

在HTML文档里，应该添加一些条件注释到样式链接上，为IE6屏蔽其他样式文件：

在第一个注释里面，为除IE66以外的浏览器引入了主要的样式文件（因为这个“!”）。在第二个注释里面我们直接从Google文件库引入Universal IE6样式表（还可以节约带宽！作为译者的我忍不住：囧一个）。

Make Photoshop Faster 这个网站就为IE6使用了Universal style sheet

如果你更看好第二路线，你必须做好面对浏览器渲染不一致的心理准备。知道在IE6、甚至IE7和IE8，一些设计的细节将看不到或者不能被完美的渲染。别因为这个悲剧感到不爽哦。

目录

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

折腾了个Tab.折腾一晚上- -,又改样式玩,最后又加了Ghibli V1.0…-.,-!  以下-源：

shiningghibli.css
shiningghibli.js

ShiningGhibli -Tab(Demo)

demo

不知道别人是否遇到类似问题，可能这只是我自己遇到的再别人看来无足轻重的也我未必哈，不过这几天好像就这个头疼，可能我对定位的理解还是太浅薄了， 唉。例如：<h1>标题<span>更多</span></h1>，其中span用float:right;右浮动，会出现换行右浮的现现象，此时在IE7,FF中给span加position:relative;top:-1em;既可以解决问题，可是IE6中开始留下的占位行会被留下来，最后自己找到的解决办法是：在h1加position:relative;再span加position:absolute;right:0;其实发现当初理解定位的时候是理解了relative是按照“自然流”为基点进行的定位，可是理解absolute一直有以为是以屏幕为基准的定位的误区。然后也解决了搜索框因为上述问题加剧的变态问题。用hacks解决了但是最后去掉了所有hacks，表单不一定都要form,说的这些都是自我感觉，可当胡说。

另外，自我感觉下一些处理较大项目代码公用的有待商榷的结论：项目较大，css再不是一个两个，可能是几十个的问题，我们现在的做法是类似全局字体，表单，链接，按钮（项目按钮多再像之前的切图或者单个编写已经不能容忍了），可以的话再加上一些清除浮动的的代码、固定字体大小的例如h2 h3小标题的字号、再就是…想起来再添加。还要一个css文件呢，放公用的代码块，比如公用的头部，底部，侧栏块代码，以及公用的出错提示，JS弹出框代码，这些部分定位尽量不要浮动不要限定固定大小，因为不同位置调用会出现不可预知的麻烦。还要的就是子板块栏目的代码，为了不会重名以及难以分辨，可能的话命名签加一个板块的字母，不过现在并没有做，命名之前用过驼峰，后来乱用，后来是下划线，比如：post_view等，但是看了不少国外的写法是post-view.又不是JS，用驼峰怪怪的- -.最近因为组内赶工，“欲速而没达”，翻工翻的厉害，好在是我翻别人的不是别人翻我的，虽然辛苦下可是还是得到了一些认可。

p { font：italic small-caps bold 12px/150% verdana,arial,sans-serif ;}

background: #f3f3f3 url(lalalal.gif) right top no-repeat ;

[ LoVe HAte ]

a:link {}

a:vistited {}

a:hover {}

a:active {}

善于clear:right/left ; 返回自然元素流。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<style type=”text/css”>
<!–
* {margin:0;padding:0}
div {
width:500px;
height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px
}
–>
</style>
<div><p><img src=”http://www.google.com/intl/en/images/logo.gif” /></p></div>

这始终是个hack（为兼容地域IE6的浏览器），无论如何也算不上完美。

body {

text-align: center;

}

#container {

margin-left: auto;

margin-right: auto;

width:200px;

text-align:left;

}

负外边距解决方案

Entomology用到的代码：

#container｛

background: #ffc;

position: absolute;

left: 50%;

width: 760px;

margin-left: -380px;

}

没任何hack!适用性极广——Netscape 4.x中都没问题，不是首选，但是想得到广泛浏览器支持，这是最好的选择。