三列互适应等高且中列宽度自适应布局的几个方法 [翻译]寻找圣杯

利用box-sizing实现div仿框架 body标签class属性的妙用(Google Reader前端简单分析)

IE中查看js错误 常用CSS缩写语法总结 PDA 网站制作规范 Web前端开发必备工具更新为2010.02.03

下面留存几个相关网址，看完这些文章后，对sIFR的使用基本上就没有障碍。
sIFR官网 sIFR Generator OTF转换为TTF工具 谈谈sIFR - 可伸缩Inman Flash替换

整理书签的时候发现quirksmode上的一篇Clearing floats，有时候页面中不存在footer，在不增加额外代码的情况下，使用overflow来清除浮动算是最简便的方法，不过必须指定宽度或高度来触发IE下的hasLayout。nnBTW:今天收到edong的邮件，提示bunorte.cn将于下月到期。这次不想再续，在godaddy注册了一个bunorte.com，可能空间还是跟风之逸一起合租。尽管域名和空间都托管在国外，访问速度会影响一些，但是不管怎样总比被“鸡爱抚大步流”监管好，案也不备了。

在其他的浏览器方面，微软是一心一意进行自己的EOT技术，IEBlog上长篇大论的说的只是WEFT。Firefox 3.1开始新增对@font-face的支持，但是目前还没有发布正式版（不知道会不会跳票到明年），感兴趣的可以下载这个尝一下鲜。最新的chromium bulid5673 还不行。同样，最新的Opera也不支持。BTW：对于web开发者，尤其是iphone的网站开发，可以看看这里的文章。

CSS hack浏览器兼容一览表：http://www.w3cn.org/article/tips/2006/120.html

CSS 属性介绍、兼容性查找：http://reference.sitepoint.com/css/

1. min/max-width/height
IE5.5 & IE6：不支持
IE6在怪异模式下支持td，th，tr的min-height(via)
IE7，IE8：支持
Firefox 1.0+：支持
Opera 9.2+：支持
Opera 9.0(2007.03.28) 对图片max-width支持有bug Via Bug Download
Safari 1.3：部分支持，Safari 2+： 支持

2. ul标签在firefox中默认有左padding 40px,上下margin 16px的,而在IE中只有左margin 40px=30pt

3. overflow-x,overflow-y在opera中不支持 会同时出现水平和垂直滚动条 Via

4. clear属性在IE5.5,IE6,IE7下有Bug Via IE6 Peekaboo Bug IE7 Bug Report IE7 Bug

5. z-index属性在ie和ff下表现不同，在IE中，子元素无法突破父元素的限制，所以子元素与父元素的同级会出现按照既定顺序来排列的情况；在FF中，子元素可以突破限制，盖住父元素的同级。Via

上面的例子在Adobe的官方文档页可以找到详细的说明，具体是怎样实现最终的效果都有介绍。而我所关注的是范例是否与web标准冲突，考虑用户是否禁用js，是否禁用css，在各种情况下用户能不能看到最重要的内容。这个例子做的比较好，唯一有点不完美的就是HTML中掺杂了Spry数据代码，当用户禁用了js的时候，虽然可以看到默认的内容，但是多除了那些代码，可能会造成困扰。如果用js来生成可以更好，不过那又是一项繁复的工作了。

当然，也可以把strong的绝对坐标移到a之外也可以不出现残留，不过这里主要是考虑解决问题的方法。HP的这种嵌套形式值得借鉴,外层div相对，然后4个span绝对通过ID来确定不同位置,span里面a默认不设position，a:hover才相对span定位,最终strong默认不显示，移过a时才设定为绝对，同时都是对应各自的a,用得及其灵活，不过把热点做到背景图里后期修改就要麻烦设计师了，不过为了实现透明还是有必要的，采用png或者透明gif为background可能会需要多做点功夫。

Gmail Redesigned (via Stylish) 大幅改善了Gmail的视觉体验，就靠一个界面就能让人使用Gmail。严重期待Google Reader Redesigned和Google Docs Redesigned.

一篇对14条准则的中文翻译。n原文地址：如何提高网页的效率（上篇）——提高网页效率的14条准则

一篇主要谈Expires Header，Cache,ETag的。n原文地址：Config HTTP Header For Better Client Performance

一篇主要介绍YSlow的文章。n原文地址:如何提高网页的效率（下篇）——Use YSlow to know why your web Slow

我对blog进行的几条优化。

1. 在后台选项->阅读中开启Gzip,在不使用wordpress内置缓存或者其他cache插件的情况下，Gzip可以很有效的压缩网页大小。当然，也有人研究出wp-cache与Gzip共存的方法，这里就不讨论了。

2.还是那句老话，压缩CSS，将用到的背景图片做到一张图里，通过位置来控制显示哪个。我Blog上的这些小图标其实全部都是一张图片。淘宝好像是把所有用到的背景图片做到一张图里，真是有点BT。不过这个活是有点技术含量的，要考虑不同的情况，并不是全部堆到一起了事。

3.规则13 Configure ETags 我以前从来没听说过ETag这个词，不过根据上面第2篇文章里的介绍有了点了解，对于使用单服务器的网站来说，静态资源(主要是图片)的生命周期比较长，所以没什么必要通过检测ETag来处理是否同一资源而像客户端发送，所以直接关闭就可以。对于Apache，就是在httpd.conf或者.htaccess中加一行FileETag none，我是采用后者，直接把.htaccess文件放到theme的images目录里。

4.规则3 Expires header 同样参照上面第2篇文章，给图片设置一个月后过期，style.css.php代码参考这个来对CSS进行Gzip,顺便设置过期时间，我是设置的一天，因为CSS修改算比较频繁。另外还可以看看这篇文章，我的.htaccess代码就是根据它修改的。比较幸运的是，我的空间支持mod_expires。

大致上就是这4条，不过要利用YSlow进行检测，看得分如何，有什么提示。目前我的YSlow有93分，也因为没有在Blog里加任何统计代码，不调用js。因为统计用的代码都会拖慢速度，如果用别人提供的自己无法控制Expires header，装自己空间里会占用一定资源，mint的调用方法比较难设置Expires，我还没找到其他什么好用的php+mysql统计程序。

关于JPG,GIF以及PNG

网际网路上目前被广泛使用的图档格是大概就是这三种，而其中又以JPG以及GIF被使用的最为广泛，但是这三种档案格是彼此之间的差别，却会让初次接触网页设计的人不知作何选择。我们在切割网页用图档的时候该如何正确选择符合我们需求的格式？又该如何做最有效的图档最佳化？
在正式了解这些档案格式的特色及用途以前，我们必须先来谈谈何谓最佳化。

最佳化的目的，在於希望在尽量不影响网页设计的品质下，让图档最小化，为什要这样做？因为一个好的网页设计绝对不是弄一堆看起来很漂亮的图档就叫做设计，你还必须去考虑使用者的频宽以及使用者对於网站下载时间的容忍度。面对下载半天的网站，除非我们对他的内容以及图档是非要不可，不然大多数的情形我们就是直接关闭网站的瀏览视窗；因为网际网路的流览速率一直都是个十分现实的问题，所以网页使用的图档，都必须经过最佳化的程序。

最佳化跟图档格式有何关係？严格说来，如果选择了错误的档案格式来做最佳化的处理，档案不但没有办法如预期般的有效缩小，反而会比正确最佳化的档案还要大上许多倍，这样一来，反而造成品质不佳、速度更慢的悲剧。因此，正确的认识图档的格式是非常重要的一件事情。

以下是这三种不同图像档案格式的特色以及简单介绍：

●GIF图形交换格式
GIF(Graphics Interchange Format)是由CompuServe公司发展出来的网路图形交换格式，适合储存256色的影像，现在通用的是可以储存透明背景及动画效果的GIF 89a规格。GIF格式使用LZW技术缩减影像色彩至256色内并压缩，透过减色的方式来减少档案大小，因为可以储存的顏色较少，所以不适合用於全彩照片、渐层丰富的细腻影像储存，但很适合存取色块等形状不甚复杂的图形。

而通常在设定GIF最佳化的时候，会出现一个交错式的选项，所谓的交错显示(Interlacing)指得是图档出现的方式，一般而言，网页图形的显示是由上而下一条线一条线地依序显示，使用者必须要等到图形资料下载完后，才能看到完整的图形，如果图档太大，图档就必须花很长的时间才能完全显示出来。而交错显示则是以相隔八条线的方式跳著显示，所以图形的出现有如打开百叶窗一般(有些瀏览器处理的方式可能不同)，可以让瀏览者在图形未完全出现前，先对图案有个概念，但是档案相对也会比较大；附带一提的是，製作GIF动画时，就比较不适合使用交错显示，因为会有鬼影残留的现象。

附註：Unisys Corporation 拥有包含多项 GIF-LZW 压缩技术的专利，Microsoft Corporation 於 1996 年 9 月时取得 Unisys LZW 专利的使用权。然而 Microsoft 取得的使用权并未延伸至使用任何 Microsoft 工具、语言开发或作业系统產品的软体开发人员或协力厂商，来为他们的应用程式提供 GIF 读/写或任何其它 LZW 能力 (例如透过 DLL 和 API 的方式)。

如果您的商业应用程式使用了这些控制项 (也就是使用了 LZW 技术)，例如您也许是透过PHP程式码来產生JPEG的图形格式，您也许必须要考虑到专利使用权上的问题，如果想要取得关於该项专利的独立法律意见，可以联络 Unisys 美国网站 http://www.unisys.com/ 取得相关资讯。

●JPG静态影像压缩格式
JPEG(Joint Photographic Experts Group )图档，又称JPG档，是由CCITT&ISO的一群专业人员，於1987年正式推出的一种工业压缩标準，适用於储存24位元全彩影像，但不支援透明或动画。JPEG格式运用压缩运算法可以将影像资料压缩成数十分之一的大小，但压缩比愈高时影像的资料耗损程度会愈大，影像也会愈失真(为达到高度压缩，部份资料会被忽略)。多数的影像编辑软体可以调整JPEG的压缩比值，一般压缩比10左右比较无法分辨出与原先的差别。虽然JPEG档好用，但因是破坏性压缩，所以不宜重复压缩，过度的破坏会造成影像的品质愈来愈差。

JPEG格式又可分为标準JPEG、渐进式JPEG及JPEG 2000三种格式。

1. 标準JPEG格式：此类型图档在网页下载时只能由上而下依序显示图片，直到图片资料全部下载完毕，才能看到全貌。

2. 渐进式JPEG格式：渐进式JPG为标準JPG的改良格式，可以在网页下载时，先呈现出图片的粗略外观后，再慢慢地呈现出完整的内容(就像GIF格式的交错显示)，而且存成渐进式JPG格式的档案比存成标準JPG格式的档案要来得小，在这一点上面，与GIF的交错式设定略有不同，所以如果要在网页上使用图片，可以多用这种格式。

3. JPEG2000格式：新一代的影像压缩法，压缩品质更好，并可改善无线传输时常因讯号不稳造成马赛克及位置错乱的情况；此外，以往瀏览线上地图时总要花许多时间等待全图下载，JPEG2000格式具有Random Access的特性，可让瀏览者先从伺服器下载10%的图档资料，在模糊的全图中找到需要的部分后，再重新下载这部分资料即可，如此一来可以大幅缩短瀏览地图的时间。

●PNG可携式网路图像格式
PNG(Portable Network Graphics)格式与同是网路上流通的影像格式JPEG及GIF相较，有诸多优秀的特性：PNG压缩影像不失真，可储存 48 位元的彩色影像，比JPEG的24位元高，像素色彩也可有256种不同的透明度选择，可让图像在任何背景上，看不到接缝，改善了GIF格式像素色彩只能有透明或不透明两种选择，及GIF档描边不佳的问题(GIF档通常需要针对每种背景顏色採用不同的反毛边修饰)。此外，PNG格式跨平台的影像亮度控制，可让影像在不同的作业系统(Windows, Mac, linux)上显示出相同的效果，不像GIF档在不同的作业系统上显示出的画面会跟著不一样，所以PNG格式格外适合在网路环境流通。

虽然PNG格式"几乎"支援了 GIF 与 JPEG格式的所有功能，但是仍有缺点，缺点不能像GIF一样作为动画档的储存格式，另外，因为PNG使用的是非破坏性的压缩，所以PNG档通常比 JPEG档大。但是这两的缺点大概都不能算是PNG的致命伤，PNG之所以到现在依然无法快速流通的最主要问题，就是目前的瀏览器并没有办法支援它所有的功能，例如IE6.0就无法显示出PNG档背景透明的效果，就目前IE6的市佔率来看，这一点等於让现阶段的PNG自己回家吃自己，所以PNG格式虽然优异，但是支援的环境仍待加强，不过未来仍然是个令人期待的档案格式。

了解圖形格式，才能夠真正達到最佳化的目的，身為一個網頁設計師不應該只是在設計華而不實的網頁，而是必須從實用、視覺、維護性等多方面去考量，一個深思熟慮的設計師，才能夠讓網站成為行銷真正的武器。

从别人博客上看到这个软件，试用了一下免费版，发现它的功能类似于Firefox下的YSlow，主要是用来分析网页载入的元素，速度，对网站开发很有用。于是Google了一下，找到一个专业版的Lisence。比较郁闷的问题就是这个插件和微软的IE Developer Toolbar有冲突，2者只能运行一个。不知道能不能找到解决方法。目前已经可以和谐共处了，随便使用哪个都没问题。环境：WinXP SP2+IE6。

官方原版下载：http://httpwatch.com/download/
注册文件(By TEAM YAG)：HttpWatch Professional 5.1.23专业版 License

n

XML/HTML代码

n<ul>
n<li class="first">B</li>
n<li><a href="http://bj.xxx.com">北京</a></li>
n<li><a href="http://bd.xxx.com">保定</a></li>
n<li><a href="http://bx.xxx.com">本溪</a></li>
n<li><a href="http://bs.xxx.com">白山</a></li>
n<li><a href="http://bc.xxx.com">白城</a></li>
n<li><a href="http://bz.xxx.com">滨州</a></li>
n<li><a href="http://bb.xxx.com">蚌埠</a></li>
n<li><a href="http://hnbz.xxx.com">郴州</a></li>
n</ul>nn

上面是以B字母开头的城市，每一个都有链接,我想让Script做的事就是给每个城市的链接加上title.就是鼠标划过链接时会显示那个城市名。下面是Script,其中画了//的都是我写的时候做测试用的: 我想有时间还是要多练习。书一放下就什么都忘记了。

n<script type="text/javascript">
nvar lis = document.getElementsByTagName("li");
n//alert(lis.length);
nfor(var i=0;i<lis.length;i++)
n{
n//alert(lis[i].childNodes.length);
n//alert(lis[i].nodeType);
n//alert(lis[i].childNodes[0].nodeType);
nif(lis[i].childNodes[0].nodeType&nbsp;==&nbsp;1)
n{
n//alert(lis[i].childNodes[0].childNodes[0].nodeType);
nvar cityname = lis[i].childNodes[0].childNodes[0].nodeValue;
n//alert(cityname);
nlis[i].childNodes[0].setAttribute("title",cityname);
n}
n//alert(lis[i].childNodes[0].getAttribute("title"));
n}
n</script>n

以前做网页是，一个按钮的状态切换一般是通过设置不同背景图片来实现，但是这种方法存在一个问题：当浏览者的网速不那么快时，鼠标移动到按钮上，这时候要向服务器再请求另外一张背景图，某些情况下会出现中间卡壳的现象。根据千鸟的说法，把多种状态合并成一张图，再利用背景图技术模拟动态效果，这个就是标题里的“单图转滚”。
首先研究一下千鸟的ColorScheme Ratings，暂且先不去管不同评分时的背景不同，单说鼠标移上时5角星变色。左边是用到的背景图片，上中下分别3种颜色，高度分别都是12px。首先给a设置背景图片，position用0 -12px，然后设置hover的背景position为0 12px.就这么简单的2句来实现按钮的变化。

这个数值的计算方法如下：从背景图片的最左上角为(0,0)点，水平方向往右开始负数，垂直方向往下开始负数，可以把图片在水平或者垂直方向repeat.根据以上例子来说，默认(0,-12)很好理解，垂直往下12px，刚好越过第一个淡五角星(高度12)到达蓝色五角星，所以默认就是蓝色背景。然后Hover的设置是12px，这样的话就应该在上方重复一个，这样淡色五角星上面就应该是一个黄色五角星，它的高度是12px，那么就从黄色五角星的顶端开始往下，正好填充满高度。

上面说的都是垂直方向的计算，这个例子水平的方向上鼠标移上都是整颗星的填满，所以repeat-x可以完成，不用去管它。实际上我想说的是数值的计算方法，上面的例子中hover的位置为(0,12),其实用(0,-24)也是同样的效果。而-24 = 12 -36(整个背景图片的高度)。

OK,下面看一下 Navigation Matrix Reloaded里面的一张图片：

这里面的数值计算方法都在图片里面标注出来了，一目了然。我觉得按照这种方式计算更符合我的习惯。这个例子就不详细分析了，其实只要搞懂了方法就不难。

最后还想补充一种方法，是从David Lanham的网站看来的效果。 在一个固定宽度和高度的a 里面插入图片，图片的高度是a的2倍，所以图片下半部的内容就被遮盖起来。然后给a:hover的img增加属性，margin-top设置为负数，数值是a的高度，这样就把图片上半部隐藏起来，通过这种方法来实现鼠标滑到图片上时进行切换，实际上调用的都是同一张图片，这样就不会因为网络原因出现延迟。这是利用单图转滚的典型案例。

搜索到这个，里面有人说在《CSS Mastery Advanced Web Standards Solutions》书里有说到经典的注释bug：

IE 6 duplicate character bug: This bug manifests itself when you have multiple comments in between the first and last of a series of floated elements. The first two comments have no effect, but each subsequent comment causes two characters to be duplicated.

解决方法就是把html代码中那些连续float元素间的注释给删了，我是为了方便还是给那个元素加了clear:both 。