切换注释的部分，还可以看出 border 和 outline 的区别—outline 不占空间。另一个区别是 outline 可以不是矩形的，但我还没想通。

</p> <style> <p>//div {outline:solid 5px #333;}</p> <p>div {border:solid 5px #333;}</p> </style> <div style="display:table;width:300px;"> <div style="display:table-row"> <div style="display:table-cell;;">1111</div> <div style="display:table-cell;width:30%;">1111</div> </p></div> <div style="display:table-row"> <div style="display:table-cell;;">1111</div> <div style="display:table-cell;width:30%;">1111</div> </p></div> </div> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

CSS真好玩，参考 W3C的说明 写了一些有意思的代码例子，这下就容易看懂了。请用支持css2的浏览器（firefox mozilla netscape opera etc.就是甭用IE）

</p> <style> <p>P.note:before { content:open-quote ;color:red;font-size:18px;}</p> <p>P.note:after { content:close-quote ;color:red;font-size:18px;}</p> <p>P.note { border: solid 1px #eee }</p> </style> <p class="note">aaaaaa a a aa a a a a aa a a a aa aaa</p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</p> <style> <p>body:after {content: "The End"; display: block; margin-top: 1em; text-align: center;}</p> </style> <p>aaaaaa a a aa a a a a aa a a a aa aaaa a a aa a a a a aa a a a aa aaaa a a aa a a a a aa a a a aa aaaa a a aa a a a a aa a a a aa aaaa a a aa a a a a aa a a a aa aaaa a a aa a a a a aa a a a aa </p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</p> <style> <p>P.note:before { content:url(smile/04.gif);vertical-align:middle;margin-right:6px;}</p> </style> <p class="note">你能选中或者下载这个图片吗？</p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</p> <style> <p>a {text-decoration:none;}</p> <p>a:after { content: attr(target);color:#ccc;}</p> </style> <p><a href="##" target="new">链接的目标？</a></p> <p><a href="##" target="_blank">链接的目标？</a></p> <p><a href="##">链接的目标？</a></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</p> <p><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></p> <style> <p>h5:before { display: block; content: "firefoxAoperaAmozilla"}</p> </style> <h5>都是不错的浏览器。但这个效果只有 opera 的显示是正确的，firefox 把 A 当成空格了，：（</h5> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

下面这两个要对比着看（后者opera 8的显示是正确的,firefox 1.0+是错误的）

</p> <p><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></p> <style> <p>h3,p { display: inline }</p> <p>h3:after { content: ": " }</p> <p>P:before { content: "... " }</p> </style> <h3>第一句话</h3> <p>这句是否跟着前一句</p> <p>第三句</p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</p> <p><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></p> <style> <p>h3 { display: run-in }</p> <p>h3:after { content: ": " }</p> <p>P:before { content: "... " }</p> </style> <h3>第一句话</h3> <p>这句是否跟着前一句</p> <p>第三句</p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</p> <p><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></p> <style> <p>p:before { content: open-quote }</p> <p>p:after { content: close-quote }</p> </style> <p lang="en">This is english.</p> <p lang="zh">而这是中文</p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</p> <p><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></p> <style> <p>p:lang(en) { quotes: "<-" "->” }</p> <p>p:lang(zh) { quotes: “<<" ">>” }</p> <p>p:before { content: open-quote }</p> <p>p:after { content: close-quote }</p> </style> <p lang="en">This is english.</p> <p lang="zh">而这是中文</p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</p> <p><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></p> <style> <p>h1:before {</p> <p> content: "Chapter " counter(chapter) ". ";</p> <p> counter-increment: chapter; /* Add 1 to chapter */</p> <p> counter-reset: section; /* Set section to 0 */</p> <p>}</p> <p>h2:before {</p> <p> content: counter(chapter) "." counter(section) " ";</p> <p> counter-increment: section;</p> <p>}</p> <p>h2 {text-indent:2em;}</p> </style> <p>这段代码 opera 8显示正确，firefox 1.0+ 不对。</p> <h1>title </h1> <h2>subtitle </h2> <h2>subtitle </h2> <h2>subtitle </h2> <h1>title </h1> <h2>subtitle </h2> <h2>subtitle </h2> <h2>subtitle </h2> <h2>subtitle </h2> <h1>title </h1> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

关于 counter 还有很多用法，看得我头晕。不管怎么说，这把本来属于后台的东西，抓到了前台来处理，反正现在的电脑这么快，矗立这点小问题应该不在话下，也可以为可怜的服务器们节约一点CPU资源。详细内容还是看官方说明吧：

http://www.w3.org/TR/REC-CSS2/generate.html

BTW:W3C 推荐 Amaya 似乎还不如 opera 对css 2 的支持完善，那干嘛 W3C 要推荐它？不是说连 css3 都支持的嘛？￥#……—%—

查看资料，原来人家主要是所见即所得的网页编辑器而不是专门的浏览器，：（学业不精啊…

前几天遇到这两个问题：

http://forums.mozillazine.org/viewtopic.php?t=227336

http://forums.mozillazine.org/viewtopic.php?t=223084

到最后都证明是 firefox 的bug。

https://bugzilla.mozilla.org/show_bug.cgi?id=67127

https://bugzilla.mozilla.org/show_bug.cgi?id=255627

还有以前的那个脚本控制 overflow 的问题（找不到链接了，找到后贴过来）。看来 firefox 的确还有很多事情要做。不过 firefox 的改进工作已经很快了，iframe处理的问题，显示 xml 的问题等，都悄悄地加了进去，因为我经常下载 firefox nightly 版本，所以记不清到底是什么版本的改进。

firefox（Gecko）中的引用方式

</p> <p><object data="uploadimg/20049251041392012.swf" </p> <p>pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"</p> <p> type="application/x-shockwave-flash"</p> <p> width="120"</p> <p> height="120"</p> <p> loop="true"</p> <p> quality="best"</p> <p> bgcolor="#003399"></p> <p></object></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

IE的引用方式

</p> <p><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"</p> <p> width="120"</p> <p> height="120"><param name="movie" value="uploadimg/20049251041392012.swf"><param name="menu" value="false"><param name="quality" value="high"><param name="bgcolor" value="#003399"></object></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

第三种就是使用 embed 标签（代码略）。

下面是 macromedia Dreamweaver中使用的嵌入方式，其实是给firefox使用了 embed 方法。embed 虽然过时了，但是代码简单而且兼容性最好，这真是…

</p> <p><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" height="120" width="120"><param name="movie" value="uploadimg/20049251041392012.swf"><param name="quality" value="high"><param name="wmode" value="transparent"><embed src="uploadimg/20049251041392012.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" height="120 width="120"></object></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

原文在：

http://www.html4.com/mime/markup/php/accessibility_en/other_alternates_en/other_alternates_3.php

如果你嫌站点中 flash 太耗资源的话。关掉当前页面的所有 object 控件显示（这其中包括Flash），把这个链接拖到 bookmark 栏即可。我一般都会建立一个 tools 的 bookmark folder，放一些常用的 javscript 如强制字体为 verdana，收录到社会书签等。随便一写，有错误请留言。

而IE rules 取的是第几个选择器。以前发过一个说明 document.styleSheets[0].rules 与 cssRules 讲了这个问题。

以前也干过这样的王八蛋事情，样式表的最后一条不能改，还在里面加了个 ！！式的说明，：（对样式表的外部引用，我一直心怀不满，我个人喜欢 inline 方式，找错误非常直观。虽然有人说过，在项目完成的时候才把 inline 或者头部说明改成外部引用。但问题是：有那种一次完成，不需要不断修改的项目吗？也许任何技术都会有利有弊吧。