今天在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>
-moz-outline:none;
outline:none;
ie-dummy:expression(this.hideFocus=true);
}
如下CODE:
<ul><li>
<div class="selecttips">
<a href=""><img src="../image/blogstyle/formsetclass/1_3.png"/></a>
</div>
</li>
</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 |