PlanABC - 怿飞’s Blog » HTML/CSS/XML/XSL

第4届D2前端技术论坛开始报名

怿飞 — Sat, 05 Dec 2009 09:24:04 +0000

2005年前端工程师的职位开始在中国出现，2007年第一届D2前端技术论坛在杭州举行，从此D2伴随着中国的前端一起成长，从此越来越多的互联网产品的背后有着职业前端工程师坚定的身影。

在D2上我们曾交流过某项具体的前端技术，也曾探讨过团队协作的方式，那些美妙的话题都深入到我们频繁敲键盘的指尖。回首我们过去四年的坚持和梦想，现在是时候分享我们的积累和成果了。当架构、安全、性能等等在前端的领域扎根的时候，我们自己也在悄然发生质变，而推动这些变化的人和事正是D2想告诉你的。

本届主题：蜕变·成长
论坛时间：2009年12月19日(星期六)
论坛地点：杭州市滨江区网商路699号, 阿里巴巴B2B园区（地图）
举办单位：阿里巴巴
特别致谢：CSDN、JavaEye、谋智网络、百度、豆瓣、华章图书、口碑网、蓝色理想、
　　　　　腾讯网、图灵教育、淘宝网、支付宝。
官网地址：d2forum.org
推广视频：http://v.youku.com/v_show/id_XMTM2NDI0MDU2.html
报名地址：http://www.d2forum.org/d2/4/sign_up.html（截止时间：2009.12.14 0:0:0）

日程安排：

时间	主题	嘉宾
08:45 – 09:15	入场
09:15 – 10:15	《模板语言与大前端》	金大为（百度）
10:30 – 11:30	《从YUI2到YUI3看前端的演变》	张克军（豆瓣）
11:30 – 13:00	午饭/休息/参观（阿里巴巴免费提供午餐）
13:00 – 14:00	《SilverlightQQ项目实践——Silverlight架构思考》	甄焱鲲（腾讯）
14:15 – 15:15	《前端安全概览及防范》	吕峰军（淘宝）
15:30 – 16:30	《前端性能优化与自动化》	鄢学鵾（口碑）
16:30 – 18:00	交流互动

注意：以上安排可能会根据具体情况进行一些补充与修改。

CSS Expression 的优化

怿飞 — Mon, 21 Sep 2009 08:41:08 +0000

IE 浏览器中 CSS Expression 特性的最大的问题：会反复执行，每秒钟可能执行了成百上千次，有严重的性能问题。

如何对 CSS Expression 进行优化呢？

至少：如果我们将 CSS Expression 在匹配的元素中仅执行一次，性能将会提升很大。

old9 在《CSS Expression Reloaded》一文中提供了一个解决方案：

在 CSS Expression 语句体里，将触发该 Expression 的 CSS 属性重置。

例如：

div {
    zoom: expression(function(el){el.style.zoom = "1"; alert(el.tagName);}(this));
}

补充几点：

CSS Expression 执行在任意一个匹配的元素上。
在 CSS expression 内， “this”关键字指向当前匹配的 HTML 元素。
CSS 属性选用一些不常用的属性来触发，触发完重置回默认值。

最近在 Ajaxian 的文章《Creating a querySelector for IE that runs at “native speed”》中看到作者 Dion Almaer 也提供了一个类似的解决方式：

div {
    -singlex: expression(this.singlex ? 0 : (function(t) { alert(t.tagName); t.singlex = 0; } )(this));
}

但此代码并没有完全解决 CSS Expression 最大的性能问题，因为每次触发还是要去执行 Expression 脚本。甚至你可以滚动下你鼠标的中间滚轮，意向不到的问题将会发生。

最后强调：仅是对 CSS Expression 做了优化，但并未说 CSS Expression 就不存在其他方面的问题。

如何在 IE 中使用 HTML5 元素

怿飞 — Sat, 13 Jun 2009 06:47:03 +0000

Sjoerd Visscher 发现了一个简洁的方法让样式在 IE 中作用到未知的元素上——仅需 JS 创建此未知元素即可：

document.createElement(elementName)

同理（对于 IE 来说 HTML5 元素即是未知元素），该方法也可顺延到 HTML5 的元素上（详细见：John Resig 写的《HTML5 Shiv》一文）：







Hello World!

在 IE 中，为了更方便使用 HTML5 元素，我们可以引入这样的脚本：

(function(){
    // from: http://dean.edwards.name/weblog/2007/03/sniff/
    if(!/*@cc_on!@*/0) return; 

    var html5 = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(',');
    for(var i = 0, len = html5.length; i < len; i++ ) {
        document.createElement(html5[i]);
    }
})();

详细具体应用的案例如下：

影响 reflow 的因素及其优化

怿飞 — Mon, 13 Apr 2009 10:25:09 +0000

如果对于 reflow 这个概念你还不太清楚或者不知道，请先阅读：

Yahoo! 性能工程师 Nicole Sullivan 在最新的文章《Reflows & Repaints: CSS Performance making your JavaScript slow?》中总结了导致 reflow 发生的一些因素：

调整窗口大小（Resizing the window）
改变字体（Changing the font）
增加或者移除样式表（Adding or removing a stylesheet）
内容变化，比如用户在input框中输入文字（Content changes, such as a user typing text in
an input box）
激活 CSS 伪类，比如 :hover (IE 中为兄弟结点伪类的激活)（Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)）
操作 class 属性（Manipulating the class attribute）
脚本操作 DOM（A script manipulating the DOM）
计算 offsetWidth 和 offsetHeight 属性（Calculating offsetWidth and offsetHeight）
设置 style 属性的值（Setting a property of the style attribute）

reflow 会引起开销，影响页面的性能，那如何才能做到合理的优化呢？Nicole Sullivan 也提供了部分建议：

如果想设定元素的样式，通过改变元素的 class 名 (尽可能在 DOM 树的最里层)（Change classes on the element you wish to style (as low in the dom tree as possible)）
避免设置多项内联样式（Avoid setting multiple inline styles）
应用元素的动画，使用 position 属性的 fixed 值或 absolute 值（Apply animations to elements that are position fixed or absolute）
权衡平滑和速度（Trade smoothness for speed）
避免使用 table 布局（Avoid tables for layout）
避免使用CSS的 JavaScript 表达式 (仅 IE 浏览器)（Avoid JavaScript expressions in the CSS (IE only)）

详细阅读：

《Reflows & Repaints: CSS Performance making your JavaScript slow?》

如何快速定位页面中复杂 CSS BUG 问题

怿飞 — Wed, 14 Jan 2009 03:40:02 +0000

相信大家对于常见 CSS BUG 的处理已经相对比较熟悉，例如：IE6 Three Pixel Gap、IE5/6 Doubled Float-Margin Bug 等等。但时常我们也会碰到复杂的 CSS BUG 问题，所谓“复杂”实质是指触发的条件很复杂，而“BUG” 也并非指一定是浏览器的 BUG 。对于此类问题，我们首先要解决的是如何定位到问题，只有快速的定位到问题，才能更好的解决问题。

对于快速定位，个人的经验处理一般如下（基本可以定位到我在淘宝遇到的 90% 以上的复杂 CSS BUG 问题）：

1、检查页面的标签是否闭合

不要小看这条，也许折腾了你两天都没有解决的 CSS BUG 问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。

快捷提示：可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。

2、样式排除法

有些复杂的页面也许加载了 N 个外链 CSS 文件，那么逐个删除 CSS 文件，找到 BUG 触发的具体 CSS 文件，缩小锁定的范围。

对于刚才锁定的问题 CSS 样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。

3、模块确认法

有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML 模块。

4、检查是否清除浮动

其实有不少的 CSS BUG 问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的，推荐使用无额外 HTML 标签的清除浮动的方法（尽量避免使用 overflow:hidden;zoom:1 的类似方法来清除浮动，会有太多的限制性）。

5、检查 IE 下是否触发 haslayout

很多的 IE 下复杂 CSS BUG 都与 IE 特有的 haslayout 息息相关。熟悉和理解 haslayout 对于处理复杂的 CSS BUG 会事半功倍。推荐阅读 old9 翻译的《On having layout》（如果无法翻越穿越伟大的 GFW，可阅读蓝色上的转帖）

快捷提示：如果触发了 haslayout，IE 的调试工具 IE Developer Toolbar 中的属性中将会显示 haslayout 值为 -1。

6、边框背景调试法

故名思议就是给元素设置显眼的边框或者背景（一般黑色或红色），进行调试。此方法是最常用的调试 CSS BUG 的方法之一，对于复杂 BUG 依旧适用。经济实惠还环保^^

最后想给大家强调一点的是，养成良好的书写习惯，减少额外标签，尽量语义，符合标准，其实可以为我们减少很多额外的复杂 CSS BUG，更多的时候其实是我们自己给自己制造了麻烦。希望大家远离 BUG ，生活越来越美好。

按钮在 IE 中两边被拉伸的 BUG

怿飞 — Wed, 12 Nov 2008 08:07:09 +0000

大家在写按钮（input、button）的时候会发现在 IE 下：

随着字数的增多，两边的间距也会越来越大。
在 WIN 的XP 风格下，当字数很多时，两边还会出现严重的锯齿。

到底是什么原因呢？

蓝色理想原 WEB标准化专栏的斑竹 zbm2001z 给出了一个答案：

1、IE 在按钮的 value 值每增加 4 个字节（汉字为 2 个）时，就会在按钮的两边产生总共一个字节的内边距宽度。
2、IE 的按钮（XP 风格）默认样式是一个固定尺寸的圆角矩形图片作背景，所以一旦按钮变宽变高后，这个固定尺寸的圆角矩形图片的边缘自然就会出现“拉毛”的现象了。

对于第二个问题我们暂时没办法去解决，除非 WIN 系统自己修复 BUG ，但对于第一个问题，我们还是可以修复的。

IE 下给按钮元素设置 overflow 属性的 visible 值（注：padding 值仅在设置了overflow:visible 属性后才有效），这个属性其实在上次写的《background-clip 与 background-origin 的一则运用》一文中已经使用。不过在今天阅读了《The stretched buttons problem in IE》后，发现原来还有一个小 BUG —— 如果将按钮置于表格单元格中，虽然按钮显示正确了，但是原先预留的宽度大小却没有改变，仍然占据着空间，需要在 IE6 中设置按钮的宽度（width）为 0（IE7同样也存在此 BUG，但暂时没有寻找到好的方式解决）。

最终的修复代码如下（Demo）：

input.button {
    padding: 0 .25em;
    width: auto;
    _width: 0;
    overflow:visible !ie;
}

可以给img元素设置背景图

怿飞 — Sat, 27 Sep 2008 14:45:35 +0000

惊叹于老外的发现《CSS Background image on html image element?》，自己从没关注过，也没想过如此的问题。

实现方法很简单：设置 img 元素为块元素（display:block;），并赋一个 padding 值。

例如（simple demo ）：

img {
    display:block;
    background:url('parallax.gif') no-repeat bottom left;
    padding:93px 100px 75px 100px;
}

根据上面的原理，举一反三，通过类似的方法，我们还可以给 img 元素设置双边：

img {
    display:block;
    padding:1px;
    background:red;
    border:1px solid black;
}

Google Chrome 浏览器支持的 CSS 选择器

怿飞 — Thu, 04 Sep 2008 05:14:50 +0000

Google Chrome 浏览器是基于 Safari 正在使用的 Webkit 引擎，使用的版本是 AppleWebKit/525.13 。不过 Safari3.1 使用的是最新版本：AppleWebKit/525.18。

那 Google Chrome 浏览器对 CSS 选择器的支持又如何呢？感谢 Engage 公司的女前端开发工程师 Estelle 测试整理的《Google Chrome Browser CSS Selector Support》：
http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/

position:relative 的使用限制

怿飞 — Wed, 13 Aug 2008 01:35:02 +0000

在 W3C 规范中 position 是可以使用在任何元素上的，但 position:relative 却有部分例外：

The effect of ‘position:relative’ on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

经测试，在浏览器（IE 除外）中给 table 定义 position:relative 属性是无效的。如果的确需要在表格中使用该属性，建议在单元格中嵌套一个 div 元素，再在其上设置 position:relative 属性来模拟。

XHTML1.1 Tags List

怿飞 — Thu, 31 Jul 2008 03:09:24 +0000

http://ore.to/htmllint/tagslist.cgi?HTMLVersion=XHTML11

line-height 属性的继承问题

怿飞 — Fri, 25 Jul 2008 05:19:53 +0000

淘宝商城的 detail 页面“产品详情”部分是商家自定义区块，曾出现这样一个问题：




    
        
            品牌：XZX

            市场价：145元

            颜色：黑色

            面料：棉

            尺码：S  M  L

            衣长：S 89  M 90   L 91

            肩宽：S 35  M 36   L 37

            胸围：S 88  M 92   L 96

            下摆：S 104 M 108  L 112

            袖长：S 17  M 17.5 L18

            由于测量方法不同，误差在2CM左右！

你会发现上面例子的文字会重叠在一起！这是什么原因呢？

由于.detail-content 中的 p 元素继承了默认设置的全局样式 line-height:17px，而自定义区块又是由商家自定义，其内字体被设置为了 font-size:30px;（可能为任意值），根据 Inline formatting model，得知该文字的 line-box 高为 17px，多出的字体部分上下溢出，所以会出现字体重叠的现象。

那这个问题如何解决呢？

解决方案：我们给 .mdse-detail 下的 p 元素设定样式属性 line-height:1.4。

为什么解决方案里的 1.4 不带单位？

元素的 line-height 属性值会继承父元素（或祖先元素）的 line-height 属性值，如果属性值有单位，则继承的值是换算后具体的 px 值而非原始的值（比如：em、%），而如果属性值没有单位，则浏览器会继承数值（无单位），然后根据该元素的 font-size 值重新解析得到新的 line-height 值。这个和 table 的 tr 设置 display 属性有一点点类似（tr.style.display = ”;，IE 显示 block，而 Firefox 等标准浏览器显示 table-row）。

还有另外一个相对低效的方法，但也不失为一个快捷的解决方案：

.mdse-detail p * {
    line-height:140%;
}

参考阅读：《Unitless line-heights》

如何给 legend 标签设定宽度

怿飞 — Thu, 24 Jul 2008 09:28:41 +0000

我们在做表单的时候经常会使用到这样的结构：


    哪些浏览器legend标签设定的宽度有效
    IE6
    IE7
    Firefox2
    Firefox3
    Opera9.0+
    Safari3.0+

当我们使用 CSS 给 legend 标签设定固定宽度时：

legend {
    background:red;
    width:500px;
}

在 IE6、IE7、Opera9.0+、Safari3.0+ 都正能常显示，而在 Firefox2 和 Firefox3 中宽度却失效。

在这里我们不去深究为什么，只探讨解决的方法：

我们可以通过在 legend 标签内添加一个标签，并给标签设定所需要的宽度，此宽度的单位不可为百分比（%）:

HTML 修改为：


    哪些浏览器legend标签设定的宽度有效
    IE6
    IE7
    Firefox2
    Firefox3
    Opera9.0+
    Safari3.0+

CSS 修改为：

legend span {
    background:red;
    width:500px;
    display:block;
}

可参考：《how to set width of LEGEND tags in FF》

正淳同时也提供了另外的一种解决方案，无需修改结构，仅修改样式即可：

legend {
    background:red;
    text-indent:-600px;
    padding-left:600px;

    /*IE下还原初始方式，只设定宽度*/
    *width:600px;
    *text-indent:0;
    *padding-left:0;
}

题外话：CSS 的兼容其实并不难，多尝试多实践就可以解决，最重要的是自己要去动手，只有动手了才会有更多的收获，才会有更深的印象。

如何跨浏览器使用连续字符的换行

怿飞 — Thu, 03 Jul 2008 12:33:22 +0000

由于连续的字符（字母、符号、数字）在默认情况下是不换行的，可能会破坏整个界面布局。

那如何解决这个问题呢？

在 IE 和 Safari 1.3+ 下相对比较容易解决，使用 CSS 属性 word-wrap: break-word;。有朋友会问为什么不是使用 word-break:break-all; ，因为有一个特殊的情况，该属性无法解决换行——连续的英文标点符号。

注：word-break 主要使用在 CJK 文本，即：中文（Chinese）、日文（Japanese）、韩文（Korean）。

而 Firefox 和 Opera 浏览器，无法识别 word-wrap: break-word; 和 word-break:break-all; 属性。可以通过脚本给连续字符的每个字符之间插入 \ u8203 的字符（该字符在非 IE 浏览下不占据空间），使连续变为了不连续，达到了换行的效果。

breakWord = function(dEl){
    var dWalker = document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, null, false);
    var node,s,c = String.fromCharCode('8203');
    while (dWalker.nextNode()){
        node = dWalker.currentNode;
        s = trim( node.nodeValue ) .split('').join(c);
        node.nodeValue = s;
    }
    return true;
}

详细的脚本，可参看 Hedger Wang 整理的脚本《Cross Browser Word Breaker》

对于 Firefox ，你还可以通过 XBL bindings 来实现此效果：《Emulating CSS word-wrap for Mozilla/Firefox》

两个不太常用的 CSS Hack

怿飞 — Thu, 26 Jun 2008 02:45:13 +0000

1、仅 Safari 和 Opera 识别的 Hack

@media all and (min-width: 0px) {
/* Safari and Opera  rules here */
}

或者

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Opera rules here */
}

注：这里所指代的 Safari 和 Opera 一般为最新版本。

2、仅 Firefox 3 和 IE7 识别的 Hack

selector, x:-moz-any-link, x:default {
/* Firefox 3  and IE7 rules here */
}

注：由于 Firefox 2 和 Firefox 3 共存，且两个版本对 CSS 的解析有部分不一致，或许用得着这个 Hack 。

针对 IE8 的 hack

怿飞 — Tue, 17 Jun 2008 15:11:50 +0000

前言：对于 Hack 的使用，一直以来不提倡，应该尽可能的知道为什么，从根本上去解决问题，而不要遇到问题就 Hack，我们应该对代码“不作恶”，尽少使用，甚至不用。

对于 IE8 beta1 可以尝试下面的 Hack：

/*/ selector { … } /**/

此规则仅 IE8 beta1 识别，而其他 A-grade 浏览器都不识别。

不过这个 Hack 也许会在 IE 的 beta2 版本或正式版中被修复，暂可作为 IE8 beta1 调试之用。

图片垂直居中的使用技巧

怿飞 — Mon, 26 May 2008 13:03:17 +0000

在曾经的淘宝UED 招聘中有这样一道题目：

“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

当然出题并不是随意，而是有其现实的原因，垂直居中是淘宝工作中最常遇到的一个问题，很有代表性。

题目的难点在于两点：

垂直居中；
图片是个置换元素，有些特殊的特性。

至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：

.box {
	/*非IE的主流浏览器识别的垂直居中的方法*/
	display: table-cell;
	vertical-align:middle;

	/*设置水平居中*/
	text-align:center;

	/* 针对IE的Hack */
	*display: block;
	*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
	*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/

	width:200px;
	height:200px;
	border: 1px solid #eee;
}
.box img {
	/*设置图片垂直居中*/
	vertical-align:middle;
}

当然还有其他的解决方法，在此不深究，有兴趣的可以阅读下：

《Vertical centering using CSS》
《Vertical centering using CSS》（标题和上同，内容不同）
《CSS List Grid Layout》

link 和 style 元素在 HTML 文档中的位置

怿飞 — Fri, 16 May 2008 09:51:15 +0000

对于 link 元素和 style 元素我相信大家都比较了解，但对于他们的出现位置可能有误解。

在淘宝的所有频道中出现这样一个问题：频道头部文件由于是统一支配的（为什么？历史原因！），所以我们无法在每个频道的 head 元素中以 link 或 style 方式加入各自的样式。最后选取了折中的方式，在主体内容中直接写入 style 元素，也就是说 style 元素置于了 body 元素中。

一切看着貌似很完美。其实不然，在 W3C 中对于 link 元素和 style 元素出现的位置有详细的说明：

HTML permits any number of STYLE elements in the HEAD section of a document.

The LINK element defines a link. Unlike A, it may only appear in the HEAD section of a document, although it may appear any number of times.

也就是说 link 元素和 style 元素必须出现在 head 元素中。

在下面的工作中，我们将会对页面中的这个错误进行优化，可能优化的进度不是理想中的速度（为什么？个人经验：历史原因的解决一向都不会很直接！）。

其实对于上面的问题，外国的开发人员有过相关讨论：

如果想温习一下样式的引入，可参读：《Style Sheets in HTML documents》

如有你想知道如何优化样式加载方式，可参读：《页面中 CSS 加载方式的优化》

详解CSS的优先权

怿飞 — Tue, 06 May 2008 13:34:05 +0000

发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？

CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。

Specificity 具体的计算规则：

元素的 style 样式属性，加 1,0,0,0。
每个 ID 选择符（#id），加 0,1,0,0。
每个 class 选择符（.class）、每个属性选择符（例 [attr=”"] ）、每个伪类（例 :hover），加 0,0,1,0。
每个元素或伪元素（例 :firstchild）等，加 0,0,0,1。
其他选择符（例全局选择符 *，子选择符 >），加 0,0,0,0。

最后逐位相加数字串，得到最终的 Specificity 值，按照从左到右的顺序逐位比较。

除了 Specificity 还有一些其他规则：

!important 声明的规则高于一切，如果 !important 声明冲突，则比较优先权。
如果优先权一样，则按源码中“后来者居上”的原则。
由继承而得到的样式属性不参与 specificity 的计算，低于一切其他规则（例全局选择符 * ）。

范例分析：

h1 {color: red;}
/* 只有一个普通元素加成，结果是 0,0,0,1 */
body h1 {color: green;}
/* 两个普通元素加成，结果是 0,0,0,2 */
/*0,0,0,1 小于 0,0,0,2 ，后者胜出*/

h2.grape {color: purple;}
/* 一个普通元素、一个class选择符加成，结果是 0,0,1,1*/
h2 {color: silver;}
/*一个普通元素，结果是 0,0,0,1 */
/*0,0,1,1 大于 0,0,0,1 ，前者胜出*/

html > body table tr[id=”totals”] td ul > li {color: maroon;}
/* 7个普通元素、一个属性选择符、两个其他选择符（子选择符 >），结果是0,0,1,7 */
li#answer {color: navy;}
/* 一个ID选择符，一个普通选择符，结果是0,1,0,1 */
/*0,0,1,7 小于 0,1,0,1，后者胜出*/

节选 old9 的《CSS的优先权》（无法穿越 GFW）

YUI Grids CSS 解读

怿飞 — Sun, 04 May 2008 13:26:38 +0000

YUI 中的 Grids CSS 主要有三个部分值得大家关注和学习：

1、布局的思想：使用 “负 margin（Negative Margins）” 技术

详细可参阅：《Creating Liquid Layouts with Negative Margins》

2、使用 em ：当用户改变字体大小时，宽度同时改变。

技巧：用 13 像素来平分宽度（保留小数到千分位），而 IE 浏览器用 13.333 。

/* 750 centered, and backward compatibility */
#doc {
	width:57.69em;
	*width:56.251em;
	min-width:750px;
}

57.69 = 750 / 13
56.251 = 750 / 13.333

注：《Setting Page Width with YUI Grids》一文中提到：IE 下的 em 是宽度除以 13 ，再乘以 .9759 得到。同解于为什么现在的 YUI 源码中 IE 下 750px 的宽度是：56.301em（750 / 13 * 0.9759）。

此算法将在 YUI 的下个版本中换为上面的新算法（IE 浏览器用 13.333 ）。

3、清除布局的浮动

针对非 IE 浏览器：

.yui-gf:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

而对于 IE 浏览器，使用了 zoom:1 来触发 haslayout。不过对于此 Nate Koechley 这样解释的：

Zoom is a non-valid attribute and so you’ll see warnings when you validate your CSS. I’m aware of that and think it is an acceptable tradeoff.

个人比较赞成他的想法：I think it is an acceptable tradeoff。

background-clip 与 background-origin 的一则运用

怿飞 — Mon, 14 Apr 2008 11:42:24 +0000

background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来确定背景的定位。

background-clip 用来判断 background 是否包含 border 区域。而 background-origin 用来决定 background-position 计算的参考位置。

语法为：

background-clip: [border | padding] [, [border | padding]]*
background-origin: [border | padding | content] [, [border | padding | content]]*

对于 background-clip：

如果是 padding 值，则 background 忽略 padding边缘，border 是透明的。如果是 border 值，则background 包括 border 区域。如果 background-image 图片有多个，对应的 background-clip 值之间用逗号分隔。

对于 background-origin：

如果是 padding 值，则 position 相对于 padding 边缘（”0 0″ 为 padding 边缘的左上角，而 “100% 100%” 为右下角）。如果是 border 值，则意味着相对 border 边缘。而 border 值则相对于内容边缘。与 background-clip 相同，多个值也用逗号分隔。如果 background-clip 是 padding 值，background-origin 是 border 值，并且 background-position 是 “top left”（默认初始值），则背景图左上角将会被截取掉部分。

这两个属性仅从 CSS3 才出现，在未使用该属性 background module 中的默认表现又如何呢？

background-clip 默认类似于 background-clip:border。

background-origin 默认类似于 background-origin:padding。

但 IE 又是特例（It sucks）。

在 IE6 、IE7 中，一般元素（button 等除外）的背景相当于：background-clip:border; background-origin:border;

而 hasLayout 的元素（加上 button 等）的背景则相当于：background-clip:padding; background-origin:padding;

这一对 CSS3 属性已在 Mozilla, Safari 3 和 Konqueror 等浏览器中实现，不过都是通过其私有属性的表达方式。

基本非 IE 的浏览器的私有属性一般都会以 -xxx- 这样开始，-o-就是以 Presto 为引擎的 Opera 私有的、-icab- 是 iCab 私有的，-khtml- 是以 KHTML 为引擎的浏览器（如 Konqueror Safari）、-moz- 就是以 Mozilla 的 Gecko 为引擎的浏览器（如Firefox，Mozilla）、-webkit- 就是以 Webkit 渲染引擎（是 KHTML 的衍生产品）的浏览器（如 Safari、Swift）。

即支持的私有属性分别为：

-moz-background-clip
-webkit-background-clip
-khtml-background-clip
-moz-background-origin
-webkit-background-origin
-khtml-background-origin

下面举个运用 background-origin 属性的简单例子，效果如下图：

HTML 部分：

CSS 部分（详细见注释）：

button {
	display:inline-block;/*触发hasLayout*/
	height:26px;
	padding:0 20px;
	cursor:pointer;
	*overflow:visible;/*消除IE按钮左右padding随字数长度变化的BUG*/

	border:3px double #95071b;/*用3px 双边来模拟设计图中的白线*/
	border-right-color:#650513;
	border-bottom-color:#650513;

	background-color:#95071b;

	/*设置背景裁切方式和参考线*/
	-moz-background-clip:padding;
	-webkit-background-clip:padding;
	-khtml-background-clip:padding;

	-moz-background-origin:padding;
	-webkit-background-origin:padding;
	-khtml-background-origin:padding;

	/*向前兼容*/
	background-clip:padding;
	background-origin:padding;

	color:#fff;
	font-size:12px;
	line-height:20px;

	/*修正IE6下高度问题*/
	_padding-top:2px;
	_line-height:14px;
}

不足之处：此效果在 Opera 下无法实现。

当然这只是一种对 HTML 代码有洁癖的解决方法（限于对 background-clip 和 background-origin 属性的学习和理解），当然也可尝试其他方法，也许会使 CSS 更简洁，至于各种方法的优缺点自己衡量。

扩展阅读：

《Background and Border》