Java一直标榜一句老话叫“编写一次，到处运行(Write Once,Run Anywhere)”，CSS也差一点点做到了。但就是为了差的一点点往往需要大量的工作，虽然这并不是CSS的错。基本上别妄想兼容所有的解析器了，仅仅是为了让网页在YUI中列举的A级浏览器呈现一致就不是一件特别容易的事情。虽然通过精心的组织HTML结构加上使用最合适最通用的CSS代码可能实现多浏览器呈现一致，但当在视觉的过度设计、精确到像素的规定和前端快速实现的要求的前提下，可能你不得不为不同的浏览器写不同的CSS代码，这就是CSS Hacks了。我们的目标是保持CSS简洁和没有CSS Hacks，但即使多年以前就呼吁Keep CSS simple的PPK也不得不在他的网站中使用CSS Hacks，即便如此其站点在所有的A级浏览器中也无法保持一致的呈现。所以，下面这个我常用的CSS Hacks列表或许有些用：

阅读全文 »

今天是Firefox3的2008下载日(貌似北京时间是6.18的凌晨1:00)，这就意味着Firefox3正式发布了。Firefox3有众多的改进和新功能，我最关注的功能之一是“全页面缩放（Full page zoom）”。这就意味着Firefox3和Opera以及IE7+都可以让用户“完全控制显示内容的大小同时自动调整页面布局和结构”，说白了就是可以让整个页面直接放大或缩小却不会乱掉。这就意味着我们不用再考虑为了可访问性而整个页面是基于字体大小（em）的设计了。

阅读全文 »

大概在2004年初的时候，我第一次买了一本很厚的书，名字或许叫《Dreamweaver MX从入门到精通》，很认真看着书并实践操作大约三分之二后，就感觉自己不错了，利用Dreamweaver加上表格套表格可以把视觉精确的转化成静态页面，在那年底我完成了随网之舞的第一版。也就是在那个时候“WEB标准”这个新名词闯入了我的视线，《网站重构》这本书和w3cn.org吸引了我。2005年初，当我在广东茂名实习的时候，我第一次利用当时理解的标准，准确来说就是利用XHTML1.0加上利用CSS布局做了两个能同时兼容IE5.0+和Firefox的站点。毕业后，看到到处言必称标准，开发时强调XHTML1.0的语法规范（标准貌似被很多人认为就是XHTML1.0+CSS），检查时强调W3C的验证器（比如为了通过验证利用Javascript实现弹窗），招聘是强调会DIV+CSS（这是标准的另一个称呼，甚至到现在偶尔还有人给我一个链接对我说：”看我按标准做的网页，全部是DIV，一个TABLE都没有。”），那个时候似乎陷入了对基础语法（通过验证）和对CSS技能（hack技术）的追求上去了。后来，当我了解HTML的历史时，我才注意到HTML众多版本的标准，意识到HTML本质是用语义结构化文档和构建WWW的超链接。

阅读全文 »

HTML文档与CSS的关联常见有4种方式：

1. 使用link标记

   <link rel="stylesheet" type="text/css" href="sheet.css" />

2. 使用style元素

   <style type="text/css">
   body{background:#fff;}
   h1{font-size:2em;}
   </style>

3. 使用@import指令

   <style type="text/css">
   @import url(sheet1.css);
   @import "sheet2.css";
   </style>

4. 使用style属性的内联样式(inline style)

   <p style="color:#f00;">这是红色的字</p>

在实际应用中，使用style属性的内联样式是不推荐使用的，XHTML1.1已经将其标准为不建议使用，原因很简单这种方式不比font标记强多少，削弱了CSS集中控制整个文档外观的优点。前3种方式利用了link标记和style标记，在IE(包括IE6、IE7和IE8 beta1)中有如下限制：

阅读全文 »

每个浏览器都有自己的默认样式，这是一段预定义的CSS，用以简单地呈现网页。在Firefox中的地址栏中输入resource://gre/res/html.css即可以看到该浏览器的默认样式。在Firebug 1.2 Alphas的styles中就可以看到默认样式对页面定义样式的影响。毫无疑问，理解和学习浏览器的默认样式能更好的理解浏览器对解析样式和呈现页面。Firefox3和Firefox2相比，默认样式仅有8处不同，但这些改变也可以让我们感觉到Firefox3在样式上的改进：

阅读全文 »

CSS的display有属性值inline-block{display:inline-block;}，下面是应用其来实现用图片替代文字的两个例子：

请看例一。

Markup：

<i class="arrow-1 replacement">箭头1</i>
<a href="http://dancewithnet.com" class="arrow-2 replacement">箭头2</a>
<p class="arrow-3 replacement">箭头3</p>

CSS：

阅读全文 »

在Firefox2中某些情况下输入框虽然可以输入，但在获取焦点时没有文本输入光标的显示，这个是非常恶心的bug，非常容易让表单使用者有一种不能输入的错觉，即使后来尝试知道可以输入，但也无法判断光标定位在哪儿。虽然庆幸的是Firefox3中解决了这个bug，但Firefox3还在beta阶段，取代Firefox2还是需要一些时间的，下面就来仔细说一下这个问题：

阅读全文 »

2002年W3C推出CSS2.1规范时，给元素的display属性增加了inline-block值。其作用是“这个值导致一个元素产生一个块状盒模型（block box），而本身作为单一的内联盒模型（inline box）流动排列（flow），类似一个被替代的元素。Display值为inline-block的元素内部形成一个块状盒模型，而本身形成类似一个内联的被替代元素”^[1]。即display为inline-block的元素既可以像块状元素一样定义高度宽度，又可以和内联元素（比如文字）排列在一行。

这个效果在页面设计的时候，很多地方都可以带来便利，最常见的莫过于设计导航时，既可以像inline元素那样实现居中，又可以设置像block元素那样设置单个菜单大小，还可以通过text-indent来隐藏文字显示背景图片。请看 演示实例>>>>

阅读全文 »

1. MIME^[1]类型（MIME Types）
2. 解析（Parsing）
3. 语法（Syntax）
4. 标记（Markup）
5. 字符编码（Character Encoding）
6. 脚本（Scripts）
7. 样式表（Stylesheets）

请注意以下信息是基于(X)HTML5的当前规范，某些技术上问题并不适用于HTML的早先版本。

虽然HTML和XHTML看起来在语法上类似，但在很多方面显著的不同。

阅读全文 »

在IE6中设置display:block的空容器一个较小高度时，如<p style="height:1px;"></p>，会发现其高度不能小于某个值，比如在字体大小为12px时这个值是15px，在浏览器默认字体大小时这个值为19px，如演示1，你可以通过调整IE6中的“查看>字体大小”来观看这个高度的变化。解决方案：

阅读全文 »