内容太多，copy过来也没意思，决定留个链接，以后忘了随时再跳过去阅读。好文总是让人受益匪浅的！由衷地感谢原文作者——Henri Sivonen。

　　原文：Activating Browser Modes with Doctype

　　译文：用doctype激活浏览器模式 – 感谢秦歌的翻译。

　　主流浏览器的引擎：Names of Browser Engines

　　下节准备补习：javascript事件中IE与火狐的不同之处

正常盒模型：

实际显示宽度 = 设置的width或height + 边框 + 填充

IE 5.x及更前的版本：

实际显示宽度 = 设置的width或height(边框和填充被包含在里面)

怪异模式的IE8以下版本将使用IE5的盒模型，这点很重要，要记清了！

　　盒子宽度未定义且是静态(没有浮动)或者相对定位的，宽度为100%，边框和填充会向内推动，而不是向外扩展。若明确设置宽度为100%，那么则相反。

　　绝对定位盒子，没设置宽度，宽度则跟随内容自动缩放，只受相对定位的外层元素的宽度影响而换行，切记body是一个相对定位的盒子。

　　浮动盒子，没设置宽度，与绝对定位的盒子相似。不同点是受外层元素的宽度影响而换行（该元素不需要设置相对定位）。

　　块级元素，上下边界会重合，以数值较大一方为基准。浮动的块级元素不会有此问题。块级元素不能为内联元素的子元素。

　　内联元素，行与行之间的距离不受边界和填充的影响。不过，内联元素也是盒子，也有边距、填充、边框，只是变现得有点“反常”。

　　边界值可为负，填充值不可为负。

　　下节准备补习：浏览器模式(怪癖模式、标准模式、准标准模式)

做个笔记，具体实现效果看下面图片，偶不知如何用语言来描述了。具体原理偶也说不清了，反正能解决了问题就是王道。

具体数值是随行内缩进的距离变动的，上图的距离需要12pt，距离越远数值也就跟随着越大，反之，亦然。

利用li配合list-style-type的decimal来实现固然简单，但是如果需要复制文字再粘贴后保留前面数值，那么就…

3款字体在浏览器下的表现，测试用的是IE8，IE6下有不同

微软雅黑这款字体的设计具有个性独特、结体优美、识别性强、块状效果好、显示清晰等优点。好多的设计师都喜欢使用这款字体，其确实漂亮，大方得体，不过在网页里使用还是有点小问题要提的。由于该字体并不是人人电脑都有，那么系统没有微软雅黑字体的时候，就肯定需要后续字体来做殿后工作，如果没设置后续字体则默认是“宋体”，有些朋友可能不满足于“宋体”来殿后，会选择使用“黑体”，问题在这里有浮出水面了！

黑体，加粗后，笔画太粗，聚成一堆，可读性很差，字体>30px后问题逐渐减轻，随着数值的增加得到改善。宋体，不会出现类似问题。

这样我们得出一个结论：当添加“粗体”属性时，后续字体使用“宋体”；那么相反，无“粗体”属性时，后续字体可以使用“黑体”。

这样就比较简单的避免了黑体后续加粗难看的问题了！

这样的导航看起来挺复杂，做起来其实挺简单，只是IE6要用到滤镜来确保PNG的透明。万恶的IE6啊！

这里还用到inline-block，IE不支持inline-block，hack给inline，IE6下给定zoom也能解决，再利用负方向的margin值将透明部位重叠。

关键css:

预览效果：不规则的导航条

下载文件：点击下载

前段时间将Dreamweaver升级了一下，只是升级到CS3的版本。用起来没觉得有明显的变化，操作习惯还能继续维持。

有一点，让我苦恼了好几天。就在关于代码缩进的问题，我的习惯一直是以Tab作为缩进，但是当我在写代码时敲回车就会将后面一行的缩进变为空格，虽然距离是一样的，看上去相同，但是心里总是不爽，想找出问题的究竟，一开始还真没找到，后来突然在“首选参数”项里找到了相应的设置选项。终于得以解决。

解决办法：“编辑” -> “首选参数” -> “代码格式” -> “缩进”

顺便说句，本人目前还是认为写代码最快最便捷的工具就是Dreamweaver。EditPlus虽然打开速度很快，但是其他方面是远不如她的，EditPlus用于编写JS和代码的修改还是不错的选择。搜狗拼音输入法经常导致Dreamweaver崩溃，原因不清楚，还在忍耐中，哪天不爽了卸掉它，装谷歌家的。

工作上极少用到Flash，之前略懂一点简单动画制作。最近才接触ActionScript3，落伍了~。方才知已有很大改变，许多以前掌握的老方法都不灵了。

最简单的鼠标事件，都改变了。AS走上了一个更高的台阶，功能强大且性能好。

以下笔记部分：

元件上不能写代码，代码须写在帧上。因此一个按钮元件，鼠标事件将有很大差异。以下做个鼠标点击是示例：

AS2:

AS3:

先上PP，容易明白此文内容。

不需要用到脚本(js)，仅css中transform属性(firefox文档, safari文档)，适当设置“值”，就能实现很酷的3d效果。

浏览器支持：Safari 3.2+, Google Chrome, Firefox 3.5+

基本是个华而无实的效果了，呵呵！玩玩还是不错的！

html：

css：

看个例子：

3d演示文档 – 注意：Safari 3.2+, Google Chrome, Firefox 3.5+才能显示正确效果

本来出处：http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/