今天发现一个关于CSS的东东,解决了我很多疑问
2010-10-23 21:52
239 查看
今天在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>
<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有边饰字体就包括Times New Roman、Georgia等多种字体,sans-serif就包括Verdana、Arial等字体,因此浏览器在遇到字体集名称的时候,会自动从系统中寻找与之匹配的字体进行显示。
表5.2列举了与字体集相对应的字体。
表5.2 与字体集相对应的字体
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>
<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 | 独占位字体 |
表5.2列举了与字体集相对应的字体。
表5.2 与字体集相对应的字体
字体名称 | 所属通用字体集 | 示 例 |
Georgia | serif | |
Verdana | sans-serif | |
Monotype Corsiva | Cursive | |
Pristina | Fantasy | |
Courier New | monospace |
相关文章推荐
- 一个关于CSS Z-index 的东东,解决了我很多疑问
- 今天发现一个非常奇怪的VSIDE BUG,经过1个小时的研究解决
- 今天遇到一个关于Hibernate程序的异常!请高手帮我解决下!!
- 不知道大家知道不知道,iOS开发,web页面的链接的active属性无效,但是今天发现一个hack办法可以让Css的active有效
- 今天发现一个隐蔽的条件编译BUG,不容易发现,编译不会出错。是否可以用断言来解决?
- 关于"如何让应用程序只有一个实例在运行"的孟宪会的解决方法的疑问
- 今天看StarterKit.Communities中的关于获取路径部分,发现一个问题?难道老外也会不仔细看MSDN,还是?
- 今天非常高兴,解决了一个关于java类转json时有关联对象而且困扰我很久的BUG
- 20151224今天发现到的两篇关于CSS架构、可复用可维护CSS和CSS学习提升能有改变思想观念意识的文章 分别是CSS架构目标和说说CSS学习中的瓶颈
- 今天发现一个Java的关于java.io.File在处理com1到com9为文件名的Bug.
- 今天解决的一个关于spfile的小问题
- 今天在使用iscroll4 做一个简单触屏滚动demo,发现上下拖动的时候总是会回弹,不能看到下面的内容.这个问题苦恼了很久,终于解决
- 今天发现了css中的一个顺序问题
- 今天做Delphi控件包安装的时候发现一个问题Never-build package 解决方法
- 今天发现猎豹浏览器的一个大坑 Request.IsAuthenticated 一直为 false;另外附加原因以及临时的解决方法
- 今天发现了JBuilder 2006 一个BUG,关于资源文件重构后的BUG
- 今天才发现,网上误人子弟的事还很多----关于做不规窗体
- VS2013报错 error MSB8031解决方法 今天跑了一个mfc的程序,发现报错:error MSB8031: Building an MFC project for a non-U
- 今天碰到一个poi解析excel文件的时候报错, 后来发现是这个excel文件单元格里面有公式。删除公式问题解决!
- 【silverlight开发中关于dataGrid的一个疑问】