日期：2008-09-11 分类：CSS
Web标准是大趋势，越来越的网站采用XHTML+CSS编写或重构。由于CSS有很多优点，所以我们有理由选择CSS。
然后在制作过程中，常常会出现问题。其实CSS并不难学，难的是做浏览器的兼容。如果你掌握了CSS的基本语法以及盒子模型、浮动、定位、文档流，那么你所写的CSS代码在“理想的世界”里是完全没有问题的。这个“理想的世界”指的是完全符合标准的浏览器。然后这个“理想的世界”是不存在的（至少目前可以这么说），只有接近这个“理想的世界”。
虽然现在的世界不那么理想，换回具体的对象来说吧。虽然现在的浏览器不那么符合标准（当然有些还是很不错的，如：ff、opera），但有些市场占有率很高，在未来几年之内还不会淘汰（如IE6），所以我们不能放弃。我们不能改变它，那我们就了解它、适应它，也就是我们的主题：浏览器的兼容。
下面是一些常见的问题，希望对一些人有所帮助：
1、IE6双倍外边距（IE6双倍margin）；
2、
日期：2008-09-9 分类：未分类
9月3日Google发布了Chrome浏览器，试用了一下，觉得还不错：速度快，界面简洁，正是我喜欢的风格。不过这里不是介绍Chrome浏览器，而是介绍浏览器内核。
那内核是什么呢？内核只是一个通俗的说法，其英文名称为“Layout engine”，翻译过来就是“排版引擎”，也被称为“页面渲染引擎”（下文中各种说法通用）。它负责取得网页的内容（HTML、XML、图像等等）、整理信息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要排版引擎。
那浏览器的有哪些呢？事实上，有很多种（废话！），如果加上所有的几乎没有什么人在用的非商业的免费内核，那么可能大约有10款以上甚至更多，不过通常我们比较常见的大约只有以下四种，下面先简单介绍一下：
Trident：
这是微软开发的一种排版引擎。该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的IE7。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器涌现（如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等）。此外，为了方便也有很多人直接简称其为IE内核（当然也不排除有部分人是因为不知道内核名称而只好如此说）。自从发布后，Trident不断地被更新和完善：
Trident II（IE5）——增进对CSS1.0的支持及对CSS2重大的变更；
Trident III（IE5.5）——修正部分CSS的排版控制；
Trident IV（IE6）——修正了一部分box-model的错误以及增加了“兼容模式（Quirks Mode）”切换功能，以增加对文件类型描述（Document Type Definition，DTD）的支持；
Trident V（IE7）——修正许多CSS排版处理上的错误以及增加对PNG格式alpha通道（半透明）的支持。
Geckos：
Gecko是套开放源代码的、以C++编写的网页排版引擎。这软件原本是由网景通讯公司开发的，Netcape6开始采用该内核。后来的Mozilla FireFox也采用了改内核，Geckos的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。Geckos现在由Mozilla基金会维护。
Presto：
Presto是一个由Opera Software开发的浏览器排版引擎，该内核在2003年的Opera7中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，也是目前公认网页浏览速度最快的浏览器内核。
Webkit：
苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开发源代码。在安全方面不受IE、Firefox的制约，所以Safari浏览器在国内还是很安全的。
简单的总结一下：
使用Trident内核的浏览器：IE、Maxthon、TT；
使用Gecko内核的浏览器：Netcape6及以上版本、FireFox；
使用Presto内核的浏览器：Opera7及以上版本；
使用Webkit内核的浏览器：Safari、Chrome。
值得庆幸的是：Google的Chrome使用的内核并不是一个新的内核，而是苹果公司的Webkit内核，所以前端工作者的工作量没有加大。如果我们的网页在Safari中没有问题，那在Chrome里也是没有问题的。
日期：2008-09-9 分类：CSS
链接在被点击时会出现虚线框，即使松开了也仍然存在，在有的时候显得不美观。既然不好看，那就不要它。怎样去掉呢？
方法一 IE下可使用其私有的html属性：hideFoucs，在标签的结构中加入hidefocus="true"属性。即：
<a href="http://www.17css.com" hidefocus="true" title="17css-青色's Blog">17css-青色's Blog</a>
而在 Firfox 浏览器中则相对比较容易，直接给标签 a 定义样式 outline:none; 就可以了，即：
.HideFocus { outline:none; }
方法二 也可以使用CSS expression来控制，但不推荐使用，毕竟expression在性能上有问题。
.HideFocus {
hide-focus:expression(this.hideFocus=true); /* for ie 5+ */
outline:none; /* for firefox 1.5 + */
}
除链接外，该CSS同样适用于input和button标签。
方法三 将以下代码保存为link.htc文件：
<public:attach event="onfocus" onevent="hscfsy()"/>
<script type="text/javascript">
function hscfsy(){ this.blur(); }
</script>
链接样式中加入：
a { behavior:url(link.htc); }
IE中已经没有问题，但是在FF中虚线框依然存在。再增加一条样式定义来解决此问题：
a:focus { outline:0; }
这样IE、FF中虚线都不存在了。
日期：2008-09-6 分类：CSS
以下内容摘自《CSS禅意花园》一书，略有删减。
Levin Alexander想出了一个绝妙的注意：不再将文本置放于span中，而是将其从span中移出来，将文本和span一起放在父元素中，然后使用这个空白的span覆盖文本，并将背景图像应用到span之上。如果一切顺利的话，屏幕阅读器即可正常访问这段文本，切也充分考虑并解决了浏览器禁用图像后空白页面的可访问性问题了。但新的问题也随之出现，那就是图像不能是透明的，否则用户将会看到下面的文本。切这种方案所需要的CSS代码极为冗长，让人难以理解。
HTML代码：
CSS代码：
优点：屏幕阅读器可正常访问；解决浏览器禁用图片后空白页面的可访问性问题。
缺点：无法使用透明图像；CSS代码较为冗长。
浏览器支持：
Windows——IE 5.5及以上版本、Netscape 7、Opera 6及以上版本、FireFox；
苹果机——IE 5.2、Safari、FireFox。
点击这里查看其他图像替换方案。
日期：2008-09-6 分类：CSS
以下内容摘自《CSS禅意花园》一书，略有删减。
设计师Mike Rundle提出了一中使用负text-indent属性值的方法，将文本推到屏幕的左边缘之外，代码简洁优雅。
HTML代码：
CSS代码：
优点：屏幕阅读器可正常访问；没有多余的<span>；简洁优雅的CSS。
缺点：并没有解决浏览器禁用图像后空白页面的可访问性问题。
浏览器支持：
Windows——IE 5.5及以上版本、Netscape 7、Opera 6及以上版本、FireFox；
苹果机——IE 5.2、Safari、FireFox。
点击这里查看其他图像替换方案。
© Copyright 2010 一起CSS All Rights Reserved 
