更具亲和力的文字隐藏方法
日期：2008-09-26 | 分类：CSS
文字隐藏应用广泛，但常用的方法没有什么亲和力。
常用文字隐藏方法的缺陷：
1、display:none
这种方法搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略；
屏幕阅读器会忽略被隐藏的文字。
2、visibility: hidden
这种方法隐藏了文字却仍然占据物理空间。
更好的方法：
overflow:hidden
display:block;/*统一转化为块级元素*/
width:0;
height:0;
overflow:hidden;
}
从代码似乎就可以看出更具亲和力，因为它是自动隐藏，而不是强制隐藏。
相关链接
http://www.mattcutts.com/blog/seo-mistakes-unwise-comments/
http://sonspring.com/journal/accessible-display-none
http://www.456bereastreet.com/archive/200510/google_seo_and_using_css_to_hide_text/
web设计辅助利器——FF必备插件
日期：2008-09-25 | 分类：未分类
可以说是FF最强大的插件之一，无论是查看DOM结构、调节样式、调试JavaScript，Firebug都无愧是“拿莫温（NO.1）”。
仅次于Firebug的网页开发设计者工具。功能众多而且强劲。看着这令人眼花缭乱的插件设置窗口，就能一窥它的强大。推荐网页开发者和网页设计者使用，能够帮助你方便的对页面进行调整和完善。
也是一个很强的CSS查看插件。
4、Aardvark
可以查看网页上鼠标出的元素的类型，id和应用的class。
网页取色工具。
javascript调试工具，在这方面比FireBug更强大些。
7、JSView
可以查看当前页面的外部js和css，对开发者来说很有有帮助。
web标准的开始——DOCTYPE
日期：2008-09-22 | 分类：未分类
今天在论坛上解决一个问题时，又看到他的网页没有加上DOCTYPE，于是在回复里加了一句提醒。
我们浏览的大多数网站，或者用Dreamweaver创建一个新的网页文档时，源码的顶部都会有DOCTYPE声明，但是很多人没有注意它，甚至在创作时候直接将它删掉，其实这往往就是噩梦的开始，很有可能会引发一系列的问题。我在制作过程中就遇到很多因为没有加DOCTYPE声明而引发的奇怪问题，这些问题说都说不清楚。就拿行内元素来说，在加有DOCTYPE声明的文档中，它是没有高度和宽度的（这个是正确的），但不加DOCTYPE声明，给它定义高度和宽度是有效的。
不加上DOCTYPE声明，那么各个浏览器会以各自默认的DOCTYPE解释文档，这就出现了差异，不兼容。所以DOCTYPE声明是很重要的。下面具体认识一下DOCTYPE：
从IE 5开始，有了IE条件注释。既然是“IE”条件注释，所以只有IE中才有效果。
IE条件注释是用来判断IE浏览器版本的。其基本结构和HTML的注释(<!-- -->)是一样的，因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们，而IE则会根据条件显示。所以IE条件注释常用于CSS hank。
IE条件注释的基本语法是：
这里的内容IE浏览器才显示
< ![endif]-->
<!--[if IE]>和< ![endif]-->之间的内容在IE浏览器中能显示，而其他浏览器则会把它当作注释忽略。
IE条件注释还可以加上浏览器版本：
这里的内容IE 5才显示
< ![endif]-->
<!--[if IE 5.5]>
这里的内容IE 5.5才显示
< ![endif]-->
<!--[if IE 6]>
这里的内容IE 6才显示
< ![endif]-->
<!--[if IE 7]>
这里的内容IE 7才显示
< ![endif]-->
IE条件注释还有几个特殊语法：
1、lte Less than or equal to的简写，也就是小于或等于的意思；
2、lt Less than的简写，也就是小于的意思；
3、gte Greater than or equal to的简写，也就是大于或等于的意思；
4、gt Greater than的简写，也就是大于的意思；
5、! 不等于的意思，跟javascript里的不等于判断符相同。
举个例子：
lte的意思是小于或等于，所以这里面的内容只有IE 6及以下版本的IE浏览器能显示
< ![endif]-->
有一点需要注意的是：IE条件注释只适用于HTML，对CSS则没有用。不过我们可以换一个思路解决这个问题：
<style type="text/css">
这里的CSS语法只在IE浏览器里有效
</style>
< ![endif]-->
这个方法就可以使需要的CSS只在IE里有效果。
举一个综合的例子：
XHTML代码：
<p class="p1">你的浏览器是IE浏览器，并且这段文字是红色的。</p>
<![endif]-->
<p>如果你使用的是IE浏览器，那么你会看到上面还有一行红色的文字；如果你使用的不是IE浏览器，那么你只能看到这段蓝色的文字。</p>
CSS代码：
p{
color:#00f;
}
</style>
<!--[if ie]>
<style type="text/css">
.p1{
color:#f00;
}
</style>
<![endif]-->
结果正如上面XHTML代码第二段所说。你可以点击这里查看结果。
IE6双倍margin bug
日期：2008-09-15 | 分类：前端技术
IE6双倍margin bug也就是IE6双倍外边距bug是 IE6 最著名的bug之一。它出现条件是：父元素与子元素之间，子元素同时设置了浮动和外边距属性，子元素会出现此bug，兄弟元素之间则不会。看实际例子能更好的理解：
XHTML代码：
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
CSS代码：
margin:0;
padding:0;
}
#box{
width:500px;
height:500px;
margin-left:20px;
background:#ff0000;
float:left;
}
#left{
width:200px;
height:400px;
background:#CCCCCC;
float:left;
margin-left:20px;
}
#right{
width:200px;
height:400px;
background:#3366CC;
float:left;
margin-left:20px;
}
#footer{
clear:both;
margin-left:20px;
background:#00FF00;
}
查看效果（用 IE6 查看）
解决的办法是给给子元素加上 display:inline 属性。如上例子给#left加上 display:inline 属性。
