今天发现一个关于CSS的东东,解决了我很多疑问

今天在W3CSCHOOL里看到的:

Z-index 仅能在定位元素上奏效（例如 position:absolute;）

发现有时候真得多看看书,以前一直纳闷为什么有时候可以,有时候不可以,原来是这个原因.

页面中某DIV使用了position:relative;他的外层用overflow:auto/scroll滚动这些DIV。在IE7 和IE6中该DIV不会随鼠标滚动而滚动,必须设置这个外层包含的元素position:relative;

代码示例:

<!DOCTYPE>
<html>
<head>
<title>Overflow Auto && Position Relative</title>
<style type="text/css">
ul {margin:0; padding:0;}
li {list-style:none;}
#test{overflow:auto;height:200px; widows:200px; border:1px solid #000;position:relative; }/*不设置IE6&7通不过*/
#test li {position:relative;}
</style>
</head>
<body>
<div id="test">
    <ul>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
      <li>测试</li>
    </ul>
</div>
</body>
</html>

用CSS取消链接上的虚线

a{
     -moz-outline:none;
     outline:none;
    ie-dummy:expression(this.hideFocus=true);
}

如下CODE:

</ul>

css code:

ul li{
float:left;
}

会发现图片与DIV下面有3PX的空格,解决办法:

ul li div img{

　　　vertical-align:top;

}

如果DIV里为文字

ul li div{

　　　vertical-align:top;

}

在firefox 中下面的写法是没有效果的,

background-position:-42px right ;

要修改为

background-position:right -42px ;

在firefox中才有效,让人郁闷..

表5.1 通用字体集名称

通用字体集名称	说明	示例
serif	有边饰字体
sans-serif	无边饰字体
cursive	卷曲字体
fantasy	花哨字体
monospace	独占位字体

其中这些关键字本身并不是某种确定字体的名称，例如serif有边饰字体就包括Times New Roman、Georgia等多种字体，sans-serif就包括Verdana、Arial等字体，因此浏览器在遇到字体集名称的时候，会自动从系统中寻找与之匹配的字体进行显示。

表5.2列举了与字体集相对应的字体。

表5.2 与字体集相对应的字体

字体名称	所属通用字体集	示例
Georgia	serif
Verdana	sans-serif
Monotype Corsiva	Cursive
Pristina	Fantasy
Courier New	monospace