翻译：onestab [2004.03.09]
原文：mezzoblue CSS Crib Sheet

在使用CSS建站时，您肯定遇到过形形色色的布局问题，最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易，当您遇到困难时为您提供快速参考。

如果您有所补充，请在这里发表您的意见.

本文的其他语言版：法语, 德语, 西班牙语 和 匈牙利语。 欢迎提供其他翻译。

有疑问，先验证

在调试时，先对您的代码进行验证往往能省去不少麻烦事。格式不正确的XHTML/CSS 会导致许多布局上的错误。

在其他浏览器中进行测试之前，请先在最先进的浏览器中撰写和测试CSS代码，而不是相反。

如果您在破旧的浏览器中编写和测试，你的代码就不得不依赖那个破旧浏览器的糟糕的显示，然后在符合标准的浏览器中进行测试，看到显示结果“不正常”时，你会很沮丧的。相反，您应该先将您的代码完善，然后再设法为较低级的浏览器打算。这样从一开始您的代码就是符合标准的，你不必再为支持其他浏览器而劳心费神。当然了，目前遵从标准的浏览器无疑就是 Mozilla, Safari 或 Opera。

确保您想要的效果真的存在

许多特定的浏览器专有的CSS扩展在正式标准中并不存在。 如果您对 filter(滤镜) 或滚动条指定样式，您用的就是私有代码，除了IE之外，在别的浏览器中毫无作用。如果验证器告诉您代码没有定义，极有可能您用了私有样式，别指望在不同的浏览器中得到一致的效果。

如果布局中一定要用浮动对象，别忘了适时使用清除（clear）属性。

浮动元素似易实难，而且难以驾驭。如果您发现浮动对象伸出了容器的边界，或者不像您所期望的那样显示，请检查您的期望是否正确。关于这个问题请看Eric Meyer 的教程

边距的合并：可用padding 或 border 来避免。

您可能被多余的(或者想要却不出现的)空白搞得焦头烂额。如果您用了 margins，边距的合并可能就是问题的根源。 Andy Budd 对此的解释也许能为你解惑。

避免将 padding/border 和固定宽度同时应用到同一元素。

IE5 错误的区块模型是罪魁祸首，是它把事情弄得乱七八糟。虽然有补救方案，不过最好是绕过这个问题，当子元素的宽度固定时，为其父元素指定padding。

避免IE下未指定样式内容的闪烁。

如果您用 @import 来输入外部样式表，早晚会发现IE有“闪烁”的毛病。在应用CSS样式之前，未格式化的HTML文本会短暂地出现。这是可以避免的.

别指望 min-width 在IE中有用。

IE不支持它，但是它将 width 当作 min-width，所以通过一些 IE 的过滤技巧(filtering)，可以实现同样的最终效果。

走投无路时，试一试减少宽度

由于舍入误差，有时 50% 加上 50% 等于 100.1%，破坏某些浏览器中的布局。不妨试试将 50% 减到 49%，甚至 49.9%。

IE 中显示不正常？

可能是 Peekaboo 臭虫在作怪，尤其是当鼠标经过超链接时能显示正常。修补方法见Position is Everything。

如果使用了锚点，在应用超链接样式时要特别小心。

如果您在代码中使用了传统的锚点(<a name="anchor">)，您会注意到 :hover 和 :active伪类也会作用于它。要避免这种情形，你可以使用 id，或者使用鲜为人知的语法: :link:hover, :link:active

记住“LoVe/HAte”（爱/恨）链接规则

要以下面的顺序指定超链接伪类：Link, Visited, Hover, Acitve。任何其他顺序都不妥当。假如用了 :focus，次序应为 LVHFA(“Lord Vader's Handle Formerly Anakin”，Matt Haughey这样建议)。

请记住“TRouBLED”（麻烦的）边框。

边框(border)、边距(margin)和补白(padding)的简写次序为：顺时针方向从上开始，即 Top, Right, Bottom, Left。比如 margin: 0 1px 3px 5px;表示上边距为零，右边距为1px，依此类推。

非零值要指明单位。

在用CSS指定字体、边距或大小时，必须指明所用的单位（唯一的例外是 line-height，很奇怪，它不需要单位）。某些浏览器对未指明单位的处理方法不足为凭。零就是零，不管是 px 还是 em。其他的非零值都要明确指定单位。例如： padding: 0 2px 0 1em;

测试不同的字体大小。

像 Mozilla 和 Opera 这样的高级浏览器都允许你改变字体大小，不管你用什么字体单位。某些用户的默认字体大小肯定和你的不同，尽最大努力去满足他们。

测试时用嵌入式样式，发布时再改为外部输入。

将样式表嵌入在你的 HTML 源代码中，在测试时可以消除许多缓存引起的错误，尤其是某些 Mac 下的浏览器。但在发布前，一定要记住将样式表移到外部文件，用 @import 或 <link>引入。

加上明显的边框有助于布局调试。

像 div {border: solid 1px #f00;} 之类的全局规则可以暂时为你查出布局问题。为特定的元素加上边框可帮您找到难以发觉的重叠或空白问题。

图片路径不要用单引号。

当设置背景图片时，要坚持用双引号。尽管看起来好像多此一举，但是如果不这么做，IE5/Mac 会噎住。

不要为将来的样式表（比如手持式设备或打印用样式表）“占位子”。

Mac IE5 对空的样式表比较感冒，会增加页面的装入时间。建议样式表中至少应该有一条规则（哪怕是注释也好），免得 MacIE噎住。

还有一些建议虽然不针对某些功能，但是在开发过程中值得注意：

好好组织您的CSS文件

恰当地成块注释CSS，将相似的CSS选择符编为一组，养成一致的命名习惯和空白格式（为跨平台考虑，建议用空白字符而不是tab。）以及适当的次序。

以功能（而不是外观）为类和ID命名

假如您创建了一个 .smallblue 类，后来打算将文字改大，颜色变为红色，这个类名就不再有任何意义了。相反，您可以用更有描述性的名字如 .copyright 和 .pullquote。

组合选择符

保持CSS短小对减少下载时间非常重要。请尽量为选择符分组、 利用继承(inheritance)以及使用简写(shorthand)来减少冗余。

使用图片替换技术时要考虑亲和力

已经发现传统的FIR在屏幕阅读器，以及关闭图片显示[的浏览器]中会出问题。 对此有其他解决办法，要根据具体情况，慎重使用。

如果用表格布局，Internet Explorer 的表现和别的浏览器并无二致。但是如果用 CSS 来定位时， IE 表现得相当怪异。其中之一就是他对浮动的处理方式。

IE 到底如何与众不同？

要理解浮动模型，首先要弄清当浮动元素后面紧跟有非浮动元素时的行为。如浮动理论所说，紧跟在浮动元素之后的区块元素会无视该浮动元素的存在，显示在与浮动元素完全相同的位置上。浮动元素蒙在区块元素之上，该区块元素（假设没有指定其宽度）将横跨整个浏览器的视区或所在的容器宽度。

为了使元素显示在浮动元素的旁边，浮动元素必须在这些元素的前面。如果浮动元素紧跟在非浮动元素之后，它将出现在这些非浮动元素的正下方。

当这种情况出现时（浮动元素后面紧跟区块元素），W3C的标准中说，区块元素必须显示在容器的顶部。现代浏览器对此都能正确执行。如图所示：

浅棕色的 div 紧跟在顶部，前面的绿色浮动块蒙在它的上面。按照标准，以深蓝色条纹表示的的行不允许出现在浮动块的背后。

<div style="float:left; width:30%;">
浮动区块内容。
</div>

<p>段落</p>

请留意，之后的区块元素会伸展到整个容器的宽度，浮动元素只是覆盖在其上面。 W3C 标准规定，每行（包括文本和图片）必须显示在段落内未被浮动元素遮住的区域。同样，现代浏览器也符合这个标准。

一切都很正常，但是如果为区块元素指定了 width (或 height)，情况就大不一样了。一旦指定了尺寸，IE 处理浮动元素的方式就发生了巨大的变化。

错在哪里

我们不妨为区块元素指定 {width: 100%;} 。 在大多数的现代浏览器中，结果不会有什么变化，因为 "100%" 指的是整个容器的宽度。不幸的是 IE 可不这么想。

在 IE 中， {width: 100%;} 被重新解释为 浮动元素侧面所剩余的宽度，而不是标准中所说的整个容器的宽度。此外， 如果左边有浮动元素，则区块元素从它的右面 开始显示，如果右面有浮动元素，则区块元素从它的左边开始显示。而标准规定，无论是否存在浮动元素， dvi 都应该从视区的最左边开始显示。

总之，任何紧跟在浮动元素后面的区块元素，如果指定了它的高度或宽度， 在 IE 中观看时就会成这样。下图就是 IE 的显示，请与上图标准所要求的效果对照。

<div style="float:left; width:30%;">
浮动区块内容。</div>

<p>段落</p>
 
<p style="width:100%;">Paragraph</p>

还记得，浮动元素背后的文本行应该被移出来。如果浮动元素比区块元素高，很难看出 IE 中没有把浮动元素盖在区块元素之上。如果区块元素没有边框和背景色，更难以察觉到这个变化。

如果浮动元素不是图片，则在 IE 下，两个元素之间会有 3 个像素的间隙，不过这个 IE 独有的问题将另文讨论。

IE 本身也不一致

如果说有浮动元素存在时，IE 对已指定尺寸的段落的宽度计算有误的话，更为难以想象的是 只要没有浮动元素，它却将同一页面内的另一个段落的宽度计算成整个容器的宽度。

图中显示的是IE 中一个浮动元素之后紧接两个 {width:100%;} 的段落，唯一的区别就是第一个段落在浮动元素的旁边，而第二个却不。所以即使不考虑它的错误，我们也无法指望 IE 的行为前后一致。

确实令人心烦。如果宽度不是100%，或者用其他单位来指定区块的宽度，情况更为糟糕。

现实的问题

OK，假如一个新手想用浮动来实现两个分栏的布局，他想要的就是两个简单、分离的栏目直到页低，这不算过分吧。在 Netscape 4 下的一个可行方案是为左边的栏目指定 {float:left;} 的样式，后面的区块从浮动块的右边直落下去。

假定浮动块的样式为 {width:50%;} ，为了将两个分栏垂直对齐，并将边框和背景区分开来，他将非浮动的分栏的左边距(left margin)设置为 "60%"，右边距大概为 "5%"。浮动分栏也有一个左边距，离开左边一些。该代码的确可以创建两个简洁的肩并肩的分栏（见图）。

<div style="float:left; width:50%; margin-left:5%;">
Content in float.
</div>

<p style="margin-left:60%; margin-right:5%;">
Paragraph
</p>

在 IE 下没有问题。但通常情况下，新手会为区块元素指定一个宽度。不幸的是，只有将后面的段落的width 设定为 70%左右，才能在 IE 中看起来舒服一些。浮动分栏不但需要左边距，而且还要有右边距（或者为右边分栏指定一个左边距），将右边的分栏推开一些。

现在这个新手终于高兴地得到了两个分栏。怎么不会呢？这种效果很容易实现，他所见到的就是他想要的。 不过他高兴得太早了。

如果在一个真正遵守标准的浏览器（不是IE）观看这个布局，区块元素（根据标准）会从视区的左边开始，并且宽度只有 70%，在右边留下了 30% 的空白。真是糟糕，如果区块元素仅比浮动元素宽一点，浮动区块旁边蓝色条纹所表示的文本就会被挤得更短。而浮动区块的左边距又使得文本变得更短。如此一来，这些极短的行就使行数增加，从而增加了区块元素的高度，文字就会显示在浮动元素的下方，填满这个总宽度为70%的分栏，完全破坏了在非IE浏览器下的外观。令人怀疑这就是微软的用意？

如果浮动元素和区块元素的宽度相同或者更宽，则文字根本不会显示在旁边，而是全部被推倒了浮动元素的下方。这根本不是所希望的结果。

IE6 的新变化

现在我们已经知道，IE 6甚至连这个糟糕的浮动模型也不再遵守了。所以我们以上所说的目前只针对IE 5.x/win 而不是 IE 6。IE6 和 IE5.x 一样，仍然错误地计算浮动区块旁边的段落起始位置，可是它正确地将 {width: 100%;} 看成是外部容器的整个宽度，这一点和其他遵守标准的浏览器一致。

让我们来设想一下。一个段落的宽度是100%，但是从一个浮动元素的后面开始。 100% 加上浮动元素的宽度会略大于容器的宽度！如果容器是 body 元素，就会出现水平滚动条。

可以肯定的是，如果有人没有在 IE 浏览器下设计种浮动布局（指定区块元素的宽度），而在 IE 下观看时这种布局很容易错乱，在我看来这并不奇怪。如果倒过来，情况反而会更糟。

运用浮动的一些建议

对紧跟在浮动元素后面的元素不要制定宽度或高度。当然这意味着如果想实现独立的分栏，必须为区块元素指定一个左边距。很不幸者这又带来了 IE 下另一个缺憾。还记得我以前提到过的IE中 "3个像素" 的 bug吗？就是它。

结论

人们很容易注意到区块模型问题，而且最后得以修正。但是这个问题也同样严重。没有迹象表明微软会关注它，甚至根本不愿承认这个问题。 何苦呢？实际上根本没有人知道这个问题！

采用 CSS 定位非常有利于减少下载时间、简化网站设计更新和改进站点的亲和力，但是作为最广泛使用的浏览器， Internet Explorer 使之变得非常困难。但愿这种违背标准的行为总有个尽头。

Holly 'n John   e-mail ©positioniseverything
最后更新：January 18, 2004
写于 July 21, 2003
中文翻译：onestab Jan 30, 2004

今天有一好友MSN上突然问我这个话题,突然想到其实在论坛里面,关于DIV和TABLE表格的使用疑问有不少人发过贴子问过,这里我想整理一下我的思路!

关于表格

使用WEB标准之后,并不是说排除表格的使用,表格并不是鸡肋,而正好相反是一道大餐, 之所以在很多关于CSS布局的文章中常提到"为什么使用表格排版是不明智的"这句话,可能是大家对他的理解有误,这里注意一点"使用表格排版"是"不明智"的.指的是我们使用了很多年的,用表格来排版是不明智的,表格归根截底是一种显示"数据"的方式,大家可以想象一下EXCEL,表格就是起这个使用的,有的时候信息使用表格显示让我们能清晰易读,所以才使用表格,比如公司员工联系表,产品与型号对应表等.

那么所谓表格大餐呢,其实意见上升到了一个层次,也就是说你如果能像专业市场分析公司那样,灵活使用表格来显示客户数据和调查数据等消息的时候,那才是真正利用了表格的优势.

所以,关于那句使用以久的话,应该改为"使用表格作为网页排版, 布局页面元素是不合理的,表格是用来显示数据的"。

关于其它元素

我这里按我的使用经验,把XHTML标准中的一些元素,分为三大类:

• 第一类是我称之为辅助布局设计元素:
  这里我指的是DIV,SPAN等,这类元素的主要功能是用来布局整个页面的,灵活使用这些元素的各种属性,可以让你的页面表现丰富多彩.
• 第二类我称为结构化元素或叫信息元素
  这里指的是TABLE,UL,PRE,CODE类元素是一种信息显示与整理方式,比如TABLE很明显就是用来显示表格信息的,UL是用来显示列化信息的,当需要用表格或列表的时候,用这二种方式来显示是明智的。
• 第三类指的是 这样的,完全是为了实现一些功能,如填上关键字的META keyword,还有做链接的A。

那么正确的符合标准的设计思路是:

• 使用DIV等布局元素来制作页面的设计布局,定位,色块,图片等
• 使用TABLE,UL等这样的元素来显示页面中需要展示数据

当然,DIV也起整理数据的作用,使用DIV的ID属性可以很方便的将一个DIV作为一个你名命的数据块。

所以使用WEB标准来制作网站,实际是一个信息合理化整合的一个过程,什么地方该用什么元素还是照用不误,别把表格当布局工具就行。

颜色

16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸

通常有下面四种书写方法:

• property:value1; 表示所有边都是一个值value1；
• property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
• property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
• property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;

边框(border)

边框的属性如下：

• border-width:1px;
• border-style:solid;
• border-color:#000;

可以缩写为一句：border:1px solid #000;

语法是border:width style color;

背景(Backgrounds)

背景的属性如下：

• background-color:#f00;
• background-image:url(background.gif);
• background-repeat:no-repeat;
• background-attachment:fixed;
• background-position:0 0;

可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：

• color: transparent
• image: none
• repeat: repeat
• attachment: scroll
• position: 0% 0%

字体(fonts)

字体的属性如下：

• font-style:italic;
• font-variant:small-caps;
• font-weight:bold;
• font-size:1em;
• line-height:140%;
• font-family:"Lucida Grande",sans-serif;

可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

列表(lists)

取消默认的圆点和序号可以这样写list-style:none;,

list的属性如下:

• list-style-type:square;
• list-style-position:inside;
• list-style-image:url(image.gif);

可以缩写为一句：list-style:square inside url(image.gif);

议题二：怎么做是应用了web standards？
1、对心爱的HTML语言说Bye bye!你的新欢是XHTML。
        A、为什么要使用XHMTL？
            a)XHTML是当前用来代替HTML4置标语言的标准；
            b)XHTML是XML的一个分支，天生可以与其它XML数据进行良好的交互；
            c)XHTML比HTML有更好的一致性，因为它是汲取HTML不一致教训后的产物；
            d)XHTML是发展趋势。（好弱的一句话）
            e)老的浏览器能像HTML一样适应XHTML；
            f)XHTML能很好的在无线设备、屏幕阅读器上工作，就像运行在桌面浏览器上一样。所以，良

好的设计后，你的网站可以不需要WAP版本就能满足手机访客的需求。
            g)它是web standards的一员
            h)可以帮助你表现和数据写在一起的习惯
        B、从HTML到XHTML要怎么做？
            a)用DOCTYPE和Namespace。XHTML要这个东西做它的DTD，因为以上我们说了，XHTML是XML的后代。不同的DOCTYPE，定义不同的标准，直接影响浏览器对页面代码的解析。现在我们有三种DTD：
                    Strict---不能使用任何表现层的标记和属性，包括width;
                    Frameset---适应框架页面;
                    Transitional---过滤型的标准，很大程度上容忍你一直以来的坏毛病。其实这个东西是我们最熟悉的，打开一个你用VS.net生成的asp.net页面生成的代码，你会看到这样的一个头

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
    <HEAD>
              ..

这个头就是我现在编辑本文所用的博客园的页面生成的（偷懒一下）。我们可以看到Transitional这个关键字，所以，VS.net IDE在默认情况下让我们使用过滤型的标准。不过可惜的是，VS.net 2002生成的代码是不完整的，就是说，并没有真正使浏览器应用XHTML标准

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
    <head>

不过，真正保险的是到http://www.webstandards.org/learn/templates/xhtml10t.html这个页面去拷，因为不管怎样，它都没有帮你把Namespcace加上去。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Conforming XHTML 1.0 Transitional Template</title>

</head>

<body>


</body>
</html>

            b)用小写字母书写所有的标签；
            c)给所有的属性值加上引号，属性中的单引号和又引号用&apos;和&quot;来代替，属性之间必须

要有空格分开；
            d)所有的属性都要有值，例如：<td nowrap = "nowrap"> <input ...... checked= "checked" />;
            e)所有的标签都需要关闭，例如：<p>一定要有</p>,甚至<br />,<img /><input />(注意/前要有一个空格)
            f)不要在注释的内容中使用"--",它只能用于注释的开始和结尾；
            g)< = &lt; & = &amp; > = &gl;
2、意识到<center><font><embed>等标记是非法的，而<br />是不意义的。正确的使用CSS控制字体、颜色、空白等。
3、尽量少使用表格来控制布局，通过CSS来避免表格的多层嵌套。并应用结构化标签来代替表格。
        很沮丧的是，我以前也一直用表格来做控制布局的事，甚至我在写一个页面之初都习惯先table一下，但是问题是表格并不能表达所以有数据结构，比如一下Menu，其实用<ul><li>Menu1</li><li>Menu2</li></ul>更能体现其数据的组织结构，而且，合理使用CSS样式，我们一样可以做出各种炫目的效果。再比如，以前我用表格来控制文本之间的间隔，用透明的小GIF图片来达到边续空白的效果，是的，这些代码确实方便的达到了我想要的效果，不过，这些代码本身不能代表什么意义，它只是使你的页面代码混乱无章，臃肿宠大。现在，我们可以考虑定义好合理的P,H1,H2等等段落的样式，就能达到一样的显示效果，同时，你的页面中的数据的结构清晰明了，文件也瘦身不少----对了，这叫做结构化无素代替数据与表示混杂。如果这些结构化元素不能满足你的要求，那你就用DIV吧，用float属性来控件DIV之间相互的排列关系，这样做最显著的效果就是你要改变两个“块”的位置时，非常方便，不用迷失在一个个嵌套的表格中，爽啊！还有，给你的每个元素命上有意义又很简短的ID，“有意义”的意义，地球人都知道，简短还是为了节省带宽，给你的老板省钱，然后，你就可以在CSS中用#yourelementid{... ...}来精确的定义一个元素的样式了。最后，提醒大家，不要过多使用DIV和CSSCLASS。（终于可以不用Fireworks做图片切片了，笑！）
4、使用基于DOM的ECMAScript精确的控件页面对象，可惜的是，如果你要适应Navigator4.0这个还有些人在用的老东西，可能还是要写代码分支，因为它不支持DOM。
5、可访问性。（在有法律规定网站必须要照顾盲人访问之前，我可能还是不会为这一点做一些工作）

议题三：CSS的一些细节。
1、能用CSS的地方，就不用JS（因为，这样做符合抽离表现代码的原则）,如：

<img src='a.gif' onmouseover="this.src='b.gif'" onmouseout="this.src='a.gif'" onclick="window.location='xx.htm'" />

改成

<a href='xx.htm' id="mya">&nbsp;</a><style>a #mya {}{width:100px;height:25px;background: url("a.gif"); background-repeat: no-repeat;;}a#mya:hover{}{background: url("b.gif"); background-repeat: no-repeat;}</style>

2、不同版本的浏览器对CSS的支持程度是不一样的，我们可以用外联和导入做一个分级。
 因为外联的方式，只要浏览器支持CSS，就会支持，所以，把一般的CSS效果放在外联样式表中，供所有的浏览器使用，把一些要高版本的浏览器才支持的CSS效果写在导入样式表中。代码如下：

<link rel="stylesheet" href="/allstyles.css" type="text/css" media="all" />
<style type="text/css" media="all">@import "/advstyles.css";</style>

3、盒模型（像TABLE这样的像一个盒子一样的页面块）BUG
IE5.X/WINDOW和我们大部分的人都有这样的一个BUG，我们在考虑如何往一个大盒子里装很多的小盒子时，我们只关心每个盒子的大小，不关心盒子里的东西的大小，这本没有错，不过在CSS标准中，这是一个BUG，因为，在CSS中width指的是盒子的内容的宽度！！！就是说，你指定一个DIV的WIDTH是100PX，这个DIV的BORDER宽是1PX，MARGIN和PADDING都为0的话，这个DIV在IE5/WIN下的最终占的地方的宽度是100px而在其它如IE6/WIN,IE5/Macintosh,NS6、7,Mozilla,Safari,Opera5、6、7上它最终占地宽度是102px,这下你晕了吧，解决办法就是，这样写你的CSS表：

div.boxclass1{
 border:20px solid;
 padding:30px;
 background:#ffc;
 width:400px; /* False value for IE4-5.*/Win */
 voice-family:"\"}"\"";
 voice-family:inherit;
 width:300px;/* Actual value for conformant browsers */
}
html>body.boxclass1{
 width:300px; /* Be nice to Opera */
}

原理是：IE4-5.*/win和Opera7读到声音属性时不能理解，所以停止读下去，使width值被设成400px，但Opera对盒模型的理解和CSS标准双是相符的，所以，后面的那一段专门针对它设值为300px。
4、IE/WIN的空格BUG
在IE/WIN环境下，
<td><img src="a.gif" /></td>
和
<td>
 <img src="a.gif" />
</td>
产生的效果是不一样的，第二段XHTML代码会生成多余的空白。解决的办法很简单，把多余的空格去掉！
5、IE6/WIN上的float BUG
应用float属性排版的块在IE6/WIN下会出现计算高度错误，如果块中的内容过高，IE6会删减减其中的内容，滚动条也会消失，要按两次F11才能恢复滚动条。可以用以下这段JS修复：

if(document.all && window.attachEvent)
 window.attachEvent("onload",fixWinIE);
function fixWinIE()
{
 if(document.body.scrollHeight < document.all.YOURFLOATBOX.offsetHeight)
 {
  document.all.YOURFLOATBOX.style.display='block';
 }
}

不过最好是不用float,试试

position:absolute;left:0

组合
6、CSS2中的相对设值

p+p{}{
 text-indent:2em;
}
img+h3{}{
 margin-top:15px;
}

什么意思呢，P后面再加的P的第一行缩进2个字，图后的H3上留15px的空白。
7、滑动门技术
http://www.alistapart.com/articles/slidingdoors/

议题四：其它
嵌入多媒体对象
 W3C提倡用<object>不过我们却习惯用着<img><embed>。<embed>到现在都不是有效的HTML和XHTML标准标签。XHTML标准的flash语法是

<object type="application/x-shockwave-flash" data="movie.swf" width="400" height="300">
    <param name="movie" value="movie.swf" />
</object>

可惜这个符合标准的写法在IE/WIN下有不能连续播放的问题，于是，又有了以下标准和正常使用折中的办法：

<script type="text/javascript">
//<![CDATA[
if(navigator.mineTypes && navigator.mimeTypes["application/x-shockwave-flash"])
{
 document.write('<embed src="movie.swf"