深山老林

2006-01-21IE条件注释参考

仅ie5.0以上版本支持

仅IE可见

代码演示：http://www.rexsong.com/blog/attachments/200512/29_231623_ie_standalones_code.htm

转自一葉の千鳥's Blog - RexSong.com

2006-01-13UltraEdit的上百种语法高亮文件下载(推荐)

Wordfiles

2006-01-09重构几点需注意

重构几点需注意(转于bencen.blogcup.com) 

1.零值后需要跟%
在使用RGB百分率值，甚至当值为零时也要带%，在其他CSS情况里则不需要带单位符号。

    2.不指定背景的颜色,只指定颜色是不够的,反之亦然.,Netscape 4.X在很多地方把透明理解成黑色,如果你用background : inherit;颜色将呈现为黑绿,那是因为Netscape 4不能识别inherit字符串,即使很明显,它不是十六进制值,也将其强制转为十六进制分析(IE/Windows4.0以前的版本也会出现这样的情况).也许你会认为,背景的颜色默认值都为transparent,如果你的网站用户是用Netscape 4,那你就头痛

    3.注意多重名称字体("Lucida Grande")必须直接用ASCII引号框起来,逗号要在后面的那个引号之后而不是在它之前.
td{
    font-family:"Lucida Grande",Verdana,Arial,Sans-serif;
}

    4.Netscape 4忽略继承,但能理解群选择器.(Netscape 4不是惟一不支持继承的老版本浏览器)
body{
      font-family:Verdana,Sans-serif;
}

p,td,ol,ul,li,dl,dt,dd{
     font-family:Verdana,Sans-serif;
}
如果你不希望每个子元素都继承被指定为Verdana、Sans-serif字体，如，你要用Times字体显示段落，怎么办？你可以为P创建一个更详细的定义。
body{
         font-family:Verdana,Sans-serif;
}

td,ul,ol,li,dl,dt,dd{
       font-family:Verdana,Sans-serif;
}

p{
   font-family:Times,"Times New Roman",serif;
}

    5.@import只在5.0及以上的版本上有效，所以可以用@import对4.0浏览器隐藏样式表。

   6.Opera字体使用边框距而不是边距来设置页槽。所以才把边框距定义为0来适应它。

   7.块级元素存在其自身的“盒”中，后面跟一个暗藏的回车，内联元素是流的一部分，后面不跟回车。块级元素如段落就是，而标签就是内联元素。

  8.左对齐问题，为什么要指定文本的对齐位置为左对齐，因为IE/windows 的bug就会使文档居中，IE5/windows上不会发生这样的错误，其他浏览器也不会，这种行为是随机的。很多在CSS里并没有说明左对齐的元素在IE6/windows里也能正确地显示为左对齐，但有些则不能，你不知道哪些会正确显示而哪些不会，所以一律把它们指定为左对齐，从而避免出现这样的问题。

  以上是个人的读书笔记，还没有完整写出，有待完善，如有出错，请指正，想更仔细了解网站重构者，请购买《网站重构》本书。

2006-01-07[原]修正IE6的3像素BUG

在IE6中使用浮动之后，在浮动对象的后面会出现3像素的间隔，在网上找到两种方法，不过原理还没弄懂，下面是例子：
一，CSSPLaY上的例子，主要是文字的：

------------------------CSS代码----------------------------
.holder {
   border: 1px solid #000000;
   display: block;
   height: 150px;
   margin: 2em auto 0 auto;
   width: 300px;
}
.float {
   background: #E09222;
   color: #FFFFFF;
   float: left;
   height: 60px;
   text-align: center;
   width: 100px;
}
.error {
   display: block;
   margin-left: 100px;
   padding-left: 5px;
   text-align: left;
}
.correct {
   display: block;
   margin-left: 100px;
   padding-left: 5px;
   text-align: left;
}
* html .correct {
   display: inline-block; /*将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内*/
   padding-left: 2px;
}
---------------------------------------------------------------
------------------------HTML代码----------------------------
<div class="holder">
<div class="float">ERROR</div>
<div class="error">|||||||||||||||||||||||<br />|||||||||||||||||||||||<br />|||||||||||||||||||||||<br />|||||||||||||||||||||||
<br />|||||||||||||||||||||||<br />|||||||||||||||||||||||
</div>
</div>
<p class="bold">IE6的3像素BUG</p>

<div class="holder">
<div class="float">FIXED</div>
<div class="correct">|||||||||||||||||||||||<br />|||||||||||||||||||||||<br />|||||||||||||||||||||||<br />|||||||||||||||||||||||
<br />|||||||||||||||||||||||<br />|||||||||||||||||||||||
</div>
</div>
<p class="bold">修正后效果</p>
---------------------------------------------------------------

二，另一个例子是E库技术学院上的，有提到了层的解决方案：

------------------------CSS代码----------------------------
 *{
  padding: 0;
  margin: 0;
 }
 #layout{
 background: #F1F1F1;
 width: 400px;
 float: left;
 }
 #floatbox {
 float: left;
 width: 100px;
 height: 50px;
 background: #6d6;
 }
 p {
 margin: 0 0 0 100px;
 background: #dd9;
 }
 * html #floatbox {
 margin-right: -3px;
 }
 * html p {
 height: 1%;
 margin-left: 0;
 }
---------------------------------------------------------------
------------------------HTML代码----------------------------
<div id="layout"><div id="floatbox">floatbox</div><p>现在没有3px了</p><p>现在没有3px了</p></div>

2006-01-06一个不错的图片浏览效果

哈哈，又有好东东了，在CSSPLaY淘到一个不错的图片浏览效果，代码我已经加了注解，没有什么特别的代码。
原文章及效果演示
---------------------------CSS代码---------------------------------
#gallery {
  padding:0; /* 清除内补丁 */
  margin:0; /* 清除外补丁 */
  list-style-type:none; /* 隐藏链接样式 */
  overflow:hidden; /* 隐藏超出的部分 */
  width:320px; /* 定义总宽度 */
  height:425px; /* 定义总高度 */
  border:1px solid #888; /* 定义边框 */
  background:#fff url(windows/win_back.gif); /* 定义背景 */
  }
#gallery li {
  float:left;/* 清除li间距 */
  }
#gallery li a {
  display:block; /* 定义成块 */
  height:30px; /* 定义微缩图高度 */
  width:320px; /* 定义微缩图宽度 */
  float:left; /* 清除间距 */
  text-decoration:none; /* 清除文字样式 */
  border-bottom:1px solid #fff; /* 添加底部边框 */
  cursor:default; /* 定义鼠标样式 */
  }
#gallery li a img {
  width:320px; /* 图片宽度 */
  height:30px; /* 图片高度 */
  border:0; /* 去除边框 */
  }
#gallery li a:hover {
  background:#eee; /* 鼠标经过时li的背景 */
  height:239px; /* 鼠标经过时li的高度 */
  }
#gallery li a:hover img {
  height:239px; /* 鼠标经过时图片的高度 */
  }
----------------------------------------------------------------------
---------------------------HTML代码---------------------------------
<ul id="gallery">
<li><a href="#nogo">
<img src="windows/win7.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#nogo">
<img src="windows/win8.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#nogo">
<img src="windows/win9.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#nogo">
<img src="windows/win10.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#nogo">
<img src="windows/win11.jpg" alt="#5" title="#5" /></a></li>
<li><a href="#nogo">
<img src="windows/win12.jpg" alt="#6" title="#6" /></a></li>
<li><a href="#nogo">
<img src="windows/win13.jpg" alt="#7" title="#7" /></a></li>
</ul>
------------------------------------------------------------------------
兼容IE5＋和FF，Opera就不清楚了，没试过。