名站导航为爱好css的朋友们提供相关的知识。
CSS教程 Sprites 技术分析
CSS教程 Sprites技术不新鲜,早在2005年 CSS教程 Zengarden 的园主 Dave Shea就在ALA发表对该技术的详细阐述。原先只在CSS教程玩家之间作为一种制作方法流传,后来出来个14 Rules for Faster-Loading Web Sites, 技术人员之间竞相传阅,其中第一条规则Make Fewer hTTP Requests就提到CSS教程 Sprites。于是这个小妖精就火了起来,甚至出现了在线生成工具,势不可挡也。近来国内很多blog都提到CSS教程 Sprites,最著名的例子莫过于 http://www.google.co.kr/ 下方的那几个动画。最新发布的YUI中,也是使用到CSS教程 Sprites,几乎都有的CSS教程装饰图都被一个40×2000的图包办。社交大站Facebook最近也使用了一个22×1150的图片承担了所有icon. 一时间,CSS教程 Sprites无处不在。
- 此篇文章具体介绍如下
问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外)
解决:写全单位如padding:0px;
2、水平居中
问题:div里的内容,ie默认为center,而ff默认left
解决:mairgin:0px auto;
3、高度问题
问题:如果设置了一个DIV的高度,当DIV里实际内容大于所设高度,ie会自动拉伸以适应DIV容器大小,ff会固定DIV的告诉,超过部分超出DIV底线以外,出现和下面的内容重叠的现象
解决:控制恰当的高度,或者不写,让浏览器自动调节高度,或者设置overflow:hidden;
4、clear:both;
问题:如果上面用float控制了n列DIV,下面ie会自动检测自动排列,ff则可能很不老实,到处乱动
解决:float结束后的下一个标签加clear:both;以结束float的控制
5、最大/小宽度问题
问题:min-width,max-width只是ff的命令,如何让ie实现同样的效果
解决:ie不认识min-和max-,实际ie认为min-width、max-width和width效果一样,可以用下面方法解决
#cctext{
min-width: 700px;
max-width: 1000px;
width:expression(document.body.clientWidth<700 ? "700px" : document.body.clientWidth>1000 ? "1000px" : "auto");
}
6、!important支持
问题:ff支持ie不支持
解决:无。ie会忽略。
7、游标状态
问题:cursor:hand;仅ie支持,显示手指状态
解决:使用cursor:pointer;ie和ff都支持
8、实际像素
IE/Opera:对象的实际宽度 = (margin-left) width (margin-right)
Firefox/Mozilla:对象的实际宽度= (margin-left) (border-left-width) (padding- left) width (padding-right) (border-right-width) (margin-right)
所以排列好及列的表格时ie和ff显示宽度稍有区别
关于css的相关的知识就说到这里希望能够可以帮助更多的朋友们。,IE,Firefox,css,差别pre 自动换行的问题