DIV+CSS基础培训教程.ppt

优秀课件，精彩无限！ 优秀课件，精彩无限！ 三、CSS的高级应用 1.2） CSS强制换行 （IE浏览器）连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行； 例如： .wrap{ word-break:break-all; width:50px; word-wrap:break-word; width:50px; } div class=wrapAbcdefghijklmnabcdefghijklmnabcdtrtyrtyrt/div 第三章：CSS 高级应用及调试 优秀课件，精彩无限！ 一、CSS的高级应用 1.2） CSS强制换行 （Fixefox浏览器）连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者给容器添加滚动条。 例如： .wrap{ word-break:break-all; width:50px; overflow:hidden; } div class=wrapghijklmnabcdefghijklmn111111111fggdf/div 注意：定义强制换行属性，必须定义容器的宽度，否则定义没有任何意义。 第三章：CSS 高级应用及调试 优秀课件，精彩无限！ 一、CSS的高级应用 1.3） CSS Hack CSS hack是指我们为了兼容各浏览器，而使用的特别的CSS定义技巧。针对不同浏览器兼容性问题(比如:对BOX模型解释不一致导致相差2px)，以下是几种常用CSS Hack写法： 区别IE6与FF： 　　background:orange; *background:blue; 区别IE6与IE7： 　　background:green !important; background:blue; 区别IE7与FF： 　　background:orange; *background:green; 区别FF，IE7，IE6： 　　background:orange; *background:green;_background:blue; 　　background:orange;*background:green !important;*background:blue; 第三章：CSS 高级应用及调试 优秀课件，精彩无限！ 一、CSS的高级应用 1.3） CSS Hack IE都能识别*;标准浏览器(如FF)不能识别*； 　　IE6能识别*，但不能识别 !important, 　　IE7能识别*，也能识别!important，还有# 　　FF不能识别*，但能识别!important; IE6 IE7 FF 　　* √ √ × 　　!important × √ √ 另外还有一个，下划线_,IE6支持下划线，IE7、IE8和Firefox、Opera、Safari均不支持下划线。 注意：书写的顺序都是FireFox的写在最前面，IE7的写在中间，IE6的写在最后面。 第三章：CSS 高级应用及调试 优秀课件，精彩无限！ 三、CSS的高级应用 3.3） CSS Hack 数商Z+平台参考写法： margin-top: 0px;/*firefox*/ #margin-top: -20px;/*IE7以上*/ _margin-top: -20px;/*IE6以下*/ 让IE8浏览器使用IE7的strict模式来工作 meta http-equiv=X-UA-Compatible content=IE=EmulateIE7 / 第三章：CSS 高级应用及调试 优秀课件，精彩无限！ 二、CSS的调试 2.1） FireBug Firebug 是网页浏览器 Mozilla Firefox 下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。例如 Yahoo! 的网页速度优化建议工具 YSlow。 　　 Firebug 也是一个除错工具。用户可以利用它除错、编辑、甚至删改任何网站的 CSS、HTML、DOM、与