软件工程文档编制

Size: px

Start display at page:

Download "软件工程文档编制"

蝠钊邸
5 years ago
Views:

1 各种浏览器兼容篡位的 css 样式写法 /* 针对谷歌浏览器内核支持的 CSS 样式 screen and (-webkit-min-device-pixel-ratio:0) { 样式 /* 针对 IE6 特制识别的 CSS 样式 */ *HTML.SearchBox { 样式针对 Firefox 浏览器的内核 CSS 写法 url-prefix() {.font1 {color:red IE8 就是自己来调试了调试一个浏览器, 有不合适的地方可以在该内核 css 中重写对应的方法, 只需把不合适的样式重写即可实现 *HTML 中则例外, 需要每重写一个都要加 *HTML 单独处理针对样式名如果只让 ie6 看见用 *html.head{color:#000; 如果只让 ie7 看见用 *+html.head{color:#000; 如果只让 ff 看见用 :root body.head{color:#000; 如果只让 ff IE8 看见用 html>/**/body.head{color:#000; 如果只是不让 ie6 看见用 html>body.head{color:#000; 即对 IE 6 无效如果只是不让 ff IE8 看见用 *body.head{color:#000; 即对 ff IE8 无效针对具体属性如果只让 ie6 看见用 _.head{_color:#000; 如果只让 ie7 看见用 + 与 _ 结合的方法 :.head{+color:#f00;!;_color:#000; IE8 正式版 hack \9 例 : margin:0px auto\9;. 这里的 \9 可以区别所有 IE8 和 FireFox. * IE6 IE7 可以识别.IE8 FireFox 不能. _ IE6 可以识别 _,IE7 IE8 FireFox 不能. 如 :.a {color:#f00; color:#f60\9; +color:#00ff00; _color:#0000ff; 从左到右分别对应 FF,IE8 IE7 IE6 还有写 css 样式一定要记住顺序 : 第 1 页, 共 14 页

2 以下为引用的内容 : #1 { color: #333; /* Moz */ * html #1 { color: #666; /* IE6 */ *+html #1 { color: #999; /* IE7 */ 顺序很重要针对各种浏览器 css 不兼容的写法 /* 针对谷歌浏览器内核支持的 CSS 样式 screen and (-webkit-min-device-pixel-ratio:0) { 样式 /* 针对 IE6 特制识别的 CSS 样式 */ *HTML.SearchBox { 样式针对 Firefox 浏览器的内核 CSS 写法 url-prefix() {.font1 {color:red IE8 就是自己来调试了调试一个浏览器, 有不合适的地方可以在该内核 css 中重写对应的方法, 只需把不合适的样式重写即可实现 *HTML 中则例外, 需要每重写一个都要加 *HTML 单独处理针对样式名如果只让 ie6 看见用 *html.head{color:#000; 如果只让 ie7 看见用 *+html.head{color:#000; 如果只让 ff 看见用 :root body.head{color:#000; 如果只让 ff IE8 看见用 html>/**/body.head{color:#000; 如果只是不让 ie6 看见用 html>body.head{color:#000; 即对 IE 6 无效如果只是不让 ff IE8 看见用 *body.head{color:#000; 即对 ff IE8 无效针对具体属性第 2 页, 共 14 页

3 如果只让 ie6 看见用 _.head{_color:#000; 如果只让 ie7 看见用 + 与 _ 结合的方法 :.head{+color:#f00;!;_color:#000; IE8 正式版 hack \9 例 : margin:0px auto\9;. 这里的 \9 可以区别所有 IE8 和 FireFox. * IE6 IE7 可以识别.IE8 FireFox 不能. _ IE6 可以识别 _,IE7 IE8 FireFox 不能. 如 :.a {color:#f00; color:#f60\9; +color:#00ff00; _color:#0000ff; 从左到右分别对应 FF,IE8 IE7 IE6 ============================= P{+color:#f00; 支持 IE7 IE6 不支持 FF IE8b P{_color:#f00; 支持 ie6 不支持 FF P{color:#f00;!important; P{color:#f00; 支持 IE6 IE7 IE8b FF P{color:#00f!important;color:#f00; 支持 IE7 IE8b FF 不支持 IE6 head:first-child+body p{color:#f00; 支持 IE7 IE8b FF 不支持 IE6 /*\*//*/ /**/ 支持 IE8b 不支持 IE6 IE7 FF html*{color:#f00 支持 IE6 IE7 不支持 IE8b FF body>p{color:#f00 支持 IE7 IE8b FF 不支持 IE6 html[xmlns] p {color:#f00 支持 IE7 IE8b FF 不支持 url("style.css") 支持 IE6 IE7 IE8b FF P{/*/*color:#f00;/* */ 支持 IE6 IE7 FF 不支持 IE8b CSS 浏览器兼容问题 CSS 对浏览器的兼容性有时让人很头疼, 或许当你了解当中的技巧跟原理, 就会觉得也不是难事, 从网上收集了 IE7,6 与 Fireofx 的兼容性处理方法并整理了一下. 对于 web2.0 的过度, 请尽量用 xhtml 格式写代码, 而且 DOCTYPE 影响 CSS 处理, 作为 W3C 的标准, 一定要加 DOCTYPE 声名. CSS 技巧第 3 页, 共 14 页

4 1.div 的垂直居中问题 vertical-align:middle; 将行距增加到和整个 DIV 一样高 line-height:200px; 然后插入文字, 就垂直居中了缺点是要控制内容不要换行 2. margin 加倍的问题设置为 float 的 div 在 ie 下设置的 margin 会加倍这是一个 ie6 都存在的 bug 解决方案是在这个 div 里面加上 display:inline; 例如 : <#div id= imfloat > 相应的 css 为 #IamFloat{ float:left; margin:5px;/*ie 下理解为 10px*/ display:inline;/*ie 下再理解为 5px*/ 3. 浮动 ie 产生的双倍距离 #box{ float:left; width:100px; margin: px; // 这种情况之下 IE 会产生 200px 的距离 display:inline; // 使浮动忽略这里细说一下 block 与 inline 两个元素 :block 元素的特点是, 总是在新行上开始, 高度, 宽度, 行高, 边距都可以控制 ( 块元素 );Inline 元素的特点是, 和其他元素在同一行上, 不可控制 ( 内嵌元素 ); #box{ display:block; // 可以为内嵌元素模拟为块元素 display:inline; // 实现同一行排列的效果 diplay:table; 4 IE 与宽度和高度的问题 IE 不认得 min- 这个定义, 但实际上它把正常的 width 和 height 当作有 min 的情况来使这样问题就大了, 如果只用宽度和高度, 正常的浏览器里这两个值就不会变, 如果只用 min-width 和 min-height 的话,IE 下面根本等于没有设置宽度和高度比如要设置背景图片, 这个宽度是比较重要的要解决这个问题, 可以这样 : #box{ width: 80px; height: 35px;html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px; 5. 页面的最小宽度 min -width 是个非常方便的 CSS 命令, 它可以指定元素最小也不能小于某个宽度, 这样就能保证排版一直正确但 IE 不认得这个, 而它实际上把 width 当做最小宽度来使为了让这一命令在 IE 上也能用, 可以把一个 <div> 放到 <body> 标签下, 然后为 div 指定一个类, 然后 CSS 这样设计 : #container{ min-width: 600px; width:expression(document.body.clientwidth < 600? "600px": "auto" ); 第一个 min-width 是正常的 ; 但第 2 行的 width 使用了 Javascript, 这只有 IE 才认得, 这也会让你的 HTML 文档不太正规它实际上通过 Javascript 的判断来实现最小宽度 6.DIV 浮动 IE 文本产生 3 象素的 bug 左边对象浮动, 右边采用外补丁的左边距来定位, 右边对象内的文本会离左边有 3px 的间距. #box{ float:left; width:800px; #left{ float:left; width:50%; #right{ width:50%; *html #left{ margin-right:-3px; // 这句是关键 <div id="box"> <div id="left"></div> <div id="right"></div> </div> 7.IE 捉迷藏的问题当 div 应用复杂的时候每个栏中又有一些链接,DIV 等这个时候容易发生捉迷藏的问题有些内容显示不出来, 当鼠标选择这个区域是发现内容确实在页面解决办法 : 对 #layout 使用 line-height 属性或者给 #layout 使用固定高和宽页面结构尽量简单 8.float 的 div 闭合 ; 清除浮动 ; 自适应高度 ; 1 例如 :<#div id= floata ><#div id= floatb ><#div id= NOTfloatC > 这里的 NOTfloatC 并不希望继续平移, 而是希望往下排 ( 其中 floata floatb 的属性已经设置为第 4 页, 共 14 页

5 float:left;) 这段代码在 IE 中毫无问题, 问题出在 FF 原因是 NOTfloatC 并非 float 标签, 必须将 float 标签闭合在 <#div class= floatb > <#div class= NOTfloatC > 之间加上 < #div class= clear > 这个 div 一定要注意位置, 而且必须与两个具有 float 属性的 div 同级, 之间不能存在嵌套关系, 否则会产生异常并且将 clear 这种样式定义为为如下即可 :.clear{ clear:both; 2 作为外部 wrapper 的 div 不要定死高度, 为了让高度能自动适应, 要在 wrapper 里面加上 overflow:hidden; 当包含 float 的 box 的时候, 高度自动适应在 IE 下无效, 这时候应该触发 IE 的 layout 私有属性 ( 万恶的 IE 啊!) 用 zoom:1; 可以做到, 这样就达到了兼容例如某一个 wrapper 如下定义 :.colwrapper{ overflow:hidden; zoom:1; margin:5px auto; 3 对于排版, 我们用得最多的 css 描述可能就是 float:left. 有的时候我们需要在 n 栏的 float div 后面做一个统一的背景, 譬如 : <div id= page > <div id= left ></div> <div id= center ></div> <div id= right ></div> </div> 比如我们要将 page 的背景设置成蓝色, 以达到所有三栏的背景颜色是蓝色的目的, 但是我们会发现随着 left center right 的向下拉长, 而 page 居然保存高度不变, 问题来了, 原因在于 page 不是 float 属性, 而我们的 page 由于要居中, 不能设置成 float, 所以我们应该这样解决 <div id= page > <div id= bg style= float:left;width:100% > <div id= left ></div> <div id= center ></div> <div id= right ></div> </div> </div> 再嵌入一个 float left 而宽度是 100% 的 DIV 解决之 4 万能 float 闭合 ( 非常重要!) 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup], 将以下代码加入 Global CSS 中, 给需要闭合的 div 加上 class="clearfix" 即可, 屡试不爽. /* Clear Fix */.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden;.clearfix { display:inline-block; /* Hide from IE Mac */.clearfix {display:block; /* End hide from IE Mac */ /* end of clearfix */ 或者这样设置 :.hackbox{ display:table; // 将对象作为块元素级的表格显示 11. 高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节, 特别是当内层对象使用 margin 或 paddign 时例 : #box {background-color:#eee; #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; <div id="box"> <p>p 对象中的内容 </p> </div> 解决方法 : 在 P 对象上下各加 2 个空的 div 对象 CSS 代码 :.1{height:0px;overflow:hidden; 或者为 DIV 加上 border 属性 12.IE6 下为什么图片下有空隙产生解决这个 BUG 的方法也有很多, 可以是改变 html 的排版, 或者设置 img 为 display:block 或者设置 vertical-align 属性为 vertical-align:top bottom middle text-bottom 都可以解决. 13. 如何对齐文本与文本输入框加上 vertical-align:middle; <style type="text/css">  </style> 14.web 标准中定义 id 与 class 有什么区别吗一.web 标准中是不容许重复 ID 的, 比如 div id="aa" 不容许重复 2 次, 而 class 定义的是类, 理论上可以无限重复, 这样需要多次引用的定义便可以使用他. 二. 属性的优先级问题 ID 的优先级要高于 class, 看上面的例子三. 方便 JS 等客户端脚本, 如果在页面中要对某个对象进行脚本操作, 那么可以给他定义一个 ID, 否则第 5 页, 共 14 页

6 只能利用遍历页面元素加上指定特定属性来找到它, 这是相对浪费时间资源, 远远不如一个 ID 来得简单. 15. LI 中内容超过长度后以省略号显示的方法此方法适用与 IE 与 OP 浏览器 <style type="text/css">  </style> 16. 为什么 web 标准中 IE 无法设置滚动条颜色了解决办法是将 body 换成 html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <style type="text/css">  </style> 17. 为什么无法定义 1px 左右高度的容器 IE6 下这个问题是因为默认的行高造成的, 解决的方法也有很多, 例如 :overflow:hidden zoom:0.08 line-height:1px 18. 怎么样才能让层显示在 FLASH 之上呢解决的办法是给 FLASH 设置透明 <param name="wmode" value="transparent" /> 19. 怎样使一个层垂直居中于浏览器中这里我们使用百分比绝对定位, 与外补丁负值的方法, 负值的大小为其自身宽度高度除以二 <style type="text/css">  </style> FF 与 IE 1. Div 居中问题 div 设置 margin-left, margin-right 为 auto 时已经居中,IE 不行,IE 需要设定 body 居中, 首先在父级元素定义 text-algin: center; 这个的意思就是在父级元素内的内容居中 2. 链接 (a 标签 ) 的边框与背景 a 链接加边框和背景色, 需设置 display: block, 同时设置 float: left 保证不换行参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格 3. 超链接访问过后 hover 样式就不出现的问题被点击访问过的超链接样式不在具有 hover 和 active 了, 很多人应该都遇到过这个问题, 解决方法是改变 CSS 属性的排列顺序 : L-V-H-A Code: <style type="text/css">  </style> 4. 游标手指 cursor cursor: pointer 可以同时在 IE FF 中显示游标手指状,hand 仅 IE 可以第 6 页, 共 14 页

7 5.UL 的 padding 与 margin ul 标签在 FF 中默认是有 padding 值的, 而在 IE 中只有 margin 默认有值, 所以先定义 ul{margin:0;padding:0; 就能解决大部分问题 6. FORM 标签这个标签在 IE 中, 将会自动 margin 一些边距, 而在 FF 中 margin 则是 0, 因此, 如果想显示一致, 所以最好在 css 中指定 margin 和 padding, 针对上面两个问题, 我的 css 中一般首先都使用这样的样式 ul,form{margin:0;padding:0; 给定义死了, 所以后面就不会为这个头疼了. 7. BOX 模型解释不一致问题在 FF 和 IE 中的 BOX 模型解释不一致导致相差 2px 解决方法 :div{margin:30px!important;margin:28px; 注意这两个 margin 的顺序一定不能写反, important 这个属性 IE 不能识别, 但别的浏览器可以识别所以在 IE 下其实解释成这样 :div {maring:30px;margin:28px 重复定义的话按照最后一个来执行, 所以不可以只写 margin:xx px!important; #box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0 #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie 属性选择器 ( 这个不能算是兼容, 是隐藏 css 的一个 bug) p[id]{div[id]{ 这个对于 IE6.0 和 IE6.0 以下的版本都隐藏,FF 和 OPera 作用. 属性选择器和子选择器还是有区别的, 子选择器的范围从形式来说缩小了, 属性选择器的范围比较大, 如 p[id] 中, 所有 p 标签中有 id 的都是同样式的. 9. 最狠的手段 -!important; 如果实在没有办法解决一些细节问题, 可以用这个方法.FF 对于!important 会自动优先解析, 然而 IE 则会忽略. 如下.tabd1{ background:url(/res/images/up/tab1.gif) no-repeat 0px 0px!important; /*Style for FF*/ background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */ 值得注意的是, 一定要将 xxxx!important 这句放置在另一句之上, 上面已经提过 10.IE,FF 的默认值问题或许你一直在抱怨为什么要专门为 IE 和 FF 写不同的 CSS, 为什么 IE 这样让人头疼, 然后一边写 css, 一边咒骂那个可恶的 M$ IE. 其实对于 css 的标准支持方面,IE 并没有我们想象的那么可恶, 关键在于 IE 和 FF 的默认值不一样而已, 掌握了这个技巧, 你会发现写出兼容 FF 和 IE 的 css 并不是那么困难, 或许对于简单的 css, 你完全可以不用!important 这个东西了我们都知道, 浏览器在显示网页的时候, 都会根据网页的 css 样式表来决定如何显示, 但是我们在样式表中未必会将所有的元素都进行了具体的描述, 当然也没有必要那么做, 所以对于那些没有描述的属性, 浏览器将采用内置默认的方式来进行显示, 譬如文字, 如果你没有在 css 中指定颜色, 那么浏览器将采用黑色或者系统颜色来显示,div 或者其他元素的背景, 如果在 css 中没有被指定, 浏览器则将其设置为白色或者透明, 等等其他未定义的样式均如此所以有很多东西出现 FF 和 IE 显示不一样的根本原因在于它们的默认显示不一样, 而这个默认样式该如何显示我知道在 w3 中有没有对应的标准来进行规定, 因此对于这点也就别去怪罪 IE 了 11. 为什么 FF 下文本无法撑开容器的高度标准浏览器中固定高度值的容器是不会象 IE6 里那样被撑开的, 那我又想固定高度, 又想能被撑开需要怎样设置呢? 办法就是去掉 height 设置 min- height:200px; 这里为了照顾不认识 min-height 的 IE6 可以这样定义 : { height:auto!important; height:200px; min-height:200px; 第 7 页, 共 14 页

8 12.FireFox 下如何使连续长字段自动换行众所周知 IE 中直接使用 word-wrap:break-word 就可以了, FF 中我们使用 JS 插入的方法来解决 <style type="text/css">  </style> <div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> <scrīpt type="text/javascrīpt"> /* <![CDATA[ */ function tobreakword(el, intlen){ var ōbj=document.getelementbyid(el); var strcontent=obj.innerhtml; var strtemp=""; while(strcontent.length>intlen){ strtemp+=strcontent.substr(0,intlen)+" "; strcontent=strcontent.substr(intlen,strcontent.length); strtemp+=" "+strcontent; obj.innerhtml=strtemp; if(document.getelementbyid &&!document.all) tobreakword("ff", 37); /* ]]> */ </scrīpt> 13. 为什么 IE6 下容器的宽度和 FF 解释不同呢 <?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <style type="text/css">  </style> <div ō nclick="alert(this.offsetwidth)"> 让 FireFox 与 IE 兼容 </div> 问题的差别在于容器的整体宽度有没有将边框 (border) 的宽度算在其内, 这里 IE6 解释为 200PX, 而 FF 则解释为 220PX, 那究竟是怎么导致的问题呢? 大家把容器顶部的 xml 去掉就会发现原来问题出在这, 顶部的申明触发了 IE 的 qurks mode, 关于 qurks mode standards mode 的相关知识, 请参考 :http: // ASPNETusStan.mspx?mfr=true IE6,IE7,FF IE7.0 出来了, 对 CSS 的支持又有新问题浏览器多了, 网页兼容性更差了, 疲于奔命的还是我们, 为解决 IE7.0 的兼容问题, 找来了下面这篇文章 : 现在我大部分都是用!important 来 hack, 对于 ie6 和 firefox 测试可以正常显示, 但是 ie7 对!important 可以正确解释, 会导致页面没按要求显示! 下面是三个浏览器的兼容性收集. 第一种, 是 CSS HACK 的方法 height:20px; /*For Firefox*/ *height:25px; /*For IE7 & IE6*/ _height:20px; /*For IE6*/ 注意顺序这样也属于 CSS HACK, 不过没有上面这样简洁 #example { color: #333; /* Moz */ * html #example { color: #666; /* IE6 */ *+html #example { color: #999; /* IE7 */  <link rel="stylesheet" type="text/css" href="css.css" />  <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]-->  <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]--> 第三种,css filter 的办法, 以下为经典从国外网站翻译过来的. 新建一个 css 样式如下 : #item { width: 200px; height: 200px; background: red; 新建一个 div, 并使用前面定义的 css 的样式 : <div id="item">some text here</div> 在 body 表现这里加入 lang 属性, 中文为 zh : <body lang="en"> 现在对 div 元素再定义一个样式 : *:lang(en) #item{ background:green!important; 这样做是为了用!important 覆盖原来的 css 样式, 由于 :lang 选择器 ie7.0 并不支持, 所以对这句话不会有任何作用, 于是也达到了 ie6.0 下同样的第 8 页, 共 14 页

9 效果, 但是很不幸地的是,safari 同样不支持此属性, 所以需要加入以下 css 样式 : #item:empty { background: green!important :empty 选择器为 css3 的规范, 尽管 safari 并不支持此规范, 但是还是会选择此元素, 不管是否此元素存在, 现在绿色会现在在除 ie 各版本以外的浏览器上对 IE6 和 FF 的兼容可以考虑以前的!important 个人比较喜欢用根据浏览器版本执行不同语句根据浏览器版本执行不同语句 :55 根据浏览器版本执行不同语句根据浏览器版本执行不同语句, 关键字 [if IE 6]  除 IE 外都可识别            <! [if lte IE 6]> Ite:less than or equal to 意思是小于或等于 IE6 浏览器, 用于 IE 浏览器的条件注释, 常用于 CSShack, 针对 IE 的 JS 等在进行 WEB 标准网页的学习和应用过程中, 网页对浏览器的兼容性是经常接触到的一个问题其中因微软公司的 Internet Explorer( 简称 IE) 占据浏览器市场的大半江山, 此外还有 Firefox Opera 等需要对这些浏览器进行兼容同时, 单就 IE 而言, 因 IE 版本的升级更替, 目前浏览者使用的主要停留在 IE5(IE5.5) IE6 和 IE7 这三个版本中而这 3 个版本对于我们制作的 WEB 标准网页 (XHTML+CSS) 解释执行的显示状况不尽相同并且, 其他非 IE 浏览器与 IE 对某些 CSS 解释也不一样所以, 通过 IE 浏览器中的专有条件注释可有针对性的进行相关属性的定义条件注释只能用于 Explorer 5+ Windows( 以下简称 IE)( 条件注释从 IE5 开始被支持 ) 如果你安装了多个 IE, 条件注释 (Conditional comments) 将会以最高版本的 IE 为标准 ( 目前为 IE 7) 条件注释只能在 windows Internet Explorer( 以下简称 IE) 下使用, 因此我们可以通过条件注释来为 IE 添加特别的指令通俗点, 条件注释就是一些 if 判断, 但这些判断不是在脚本里执行的, 而是直接在 html 代码里执行的, 比如 : <! [if IE]> 这里是正常的 html 代码第 9 页, 共 14 页

10 1, 条件注释的基本结构和 HTML 的注释 (<! >) 是一样的因此 IE 以外的浏览器将会把它们看作是普通的注释而完全忽略它们 2,IE 将会根据 if 条件来判断是否如解析普通的页面内容一样解析条件注释里的内容 3, 条件注释使用的是 HTML 的注释结构, 因此他们只能使用在 HTML 文件里, 而不能在 CSS 文件中使用可使用如下代码检测当前 IE 浏览器的版本 ( 注意 : 在非 IE 浏览器中是看不到效果的 ) <! [if IE]> <h1> 您正在使用 IE 浏览器 </h1> <! [if IE 5]> <h2> 版本 5</h2> <! [if IE 5.0]> <h2> 版本 5.0</h2> <! [if IE 5.5]> <h2> 版本 5.5</h2> <! [if IE 6]> <h2> 版本 6</h2> <! [if IE 7]> <h2> 版本 7</h2> 那如果当前的浏览器是 IE, 但版本比 IE5 还低, 该怎么办呢, 可以使用 <! [if ls IE 5]>, 当然, 根据条件注释只能在 IE5+ 的环境之下, 所以 <! [if ls IE 5]> 根本不会被执行 lte: 就是 Less than or equal to 的简写, 也就是小于或等于的意思 lt : 就是 Less than 的简写, 也就是小于的意思 gte: 就是 Greater than or equal to 的简写, 也就是大于或等于的意思 gt : 就是 Greater than 的简写, 也就是大于的意思! : 就是不等于的意思, 跟 javascript 里的不等于判断符相同 Conditional comments 属于 CSS hack? 条件判断属于 CSS hack 吗? 严格地说是属于 CSS hack 因为就好象其他真正的 css hack 一样, 它使得我们可以给一些浏览器赋予特殊的样式, 再则它不依赖于某个浏览器的 BUG 来控制另外一个浏览器 ( 的样式 ) 除此之外, 条件判断还能用来做一些超出 CSS HACK 范围的事情 ( 虽然这种情况很少发生 ) 因为条件判断不依赖于某个浏览器的 hack, 而是一个经过深思熟虑的特色功能, 所以我相信它是可以被放心地使用的当然, 其他浏览器也有可能支持条件判断第 10 页, 共 14 页

11 ( 到目前为止还没有 ), 但是看起来, 他们应该不会使用如 <! [if IE]> 这样的语法应该如何应用条件注释本文一开始就说明了, 因为 IE 各版本的浏览器对我们制作的 WEB 标准的页面解释不一样, 具体就是对 CSS 的解释不同, 我们为了兼容这些, 可运用条件注释来各自定义, 最终达到兼容的目的比如 : <! 默认先调用 css.css 样式表 > <link rel="stylesheet" type="text/css" href="css.css" /> <! [if IE 7]> <! 如果 IE 浏览器版是 7, 调用 ie7.css 样式表 > <link rel="stylesheet" type="text/css" href="ie7.css" /> <! [if lte IE 6]> <! 如果 IE 浏览器版本小于等于 6, 调用 ie.css 样式表 > <link rel="stylesheet" type="text/css" href="ie.css" /> 这其中就区分了 IE7 和 IE6 向下的浏览器对 CSS 的执行, 达到兼容的目的同时, 首行默认的 css.css 还能与其他非 IE 浏览器实现兼容注意 : 默认的 CSS 样式应该位于 HTML 文档的首行, 进行条件注释判断的所有内容必须位于该默认样式之后比如如下代码, 在 IE 浏览器下执行显示为红色, 而在非 IE 浏览器下显示为黑色如果把条件注释判断放在首行, 则不能实现该例题很能说明网页对 IE 浏览器和非 IE 浏览器间的兼容性问题解决 <style type="text/css"> body{ background-color: #000; </style> <! [if IE]> <style type="text/css"> body{ background-color: #F00; </style> 同时, 有人会试图使用 <! [if!ie]> 来定义非 IE 浏览器下的状况, 但注意 : 条件注释只有在 IE 浏览器下才能执行, 这个代码在非 IE 浏览下非单不是执行该条件下的定义, 而是当做注释视而不见正常就是默认的样式, 对 IE 浏览器需要特殊处理的, 才进行条件注释在 HTML 文件里, 而不能在 CSS 文件中使用第 11 页, 共 14 页

12 如何符合 w3c 规范? 1 确保所有的标签都使用小写字母 2 确保所有的属性值都放在引号里 3 确保所有成对标签出现的顺序不成对的标签都用 /> 结束, / 和 > 之间不要有空格如何让你的站点标准起来, 怎么改善现有网站我们大部分的设计师依旧在采用传统的表格布局表现与结构混杂在一起的方式来建立网站学习使用 XHTML+CSS 的方法需要一个过程, 使现有网站符合网站标准也不可能一步到位最好的方法是循序渐进, 分阶段来逐步达到完全符合网站标准的目标如果你是新手, 或者对代码不是很熟悉, 也可以采用遵循标准的编辑工具, 例如 Dreamweaver MX 2004, 它是目前支持 CSS 标准最完善的工具 1. 初级改善 * 为页面添加正确的 DOCTYPE 很多设计师和开发者都不知道什么是 DOCTYPE,DOCTYPE 有什么用 DOCTYPE 是 document type 的简写主要用来说明你用的 XHTML 或者 HTML 是什么版本浏览器根据你 DOCTYPE 定义的 DTD( 文档类型定义 ) 来解释页面代码所以, 如果你不注意设置了错误的 DOCTYPE, 结果会让你大吃一惊 XHTML1.0 提供了三种 DOCTYPE 可选择 : (1) 过渡型 (Transitional ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " (2) 严格型 (Strict ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " (3) 框架型 (Frameset ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " 对于我们初级改善来说, 只要选用过渡型的声明就可以了它依然可以兼容你的表格布局表现标识等, 不至于让你觉得变化太大, 难以掌握第 12 页, 共 14 页

13 Tip: 你懒得输入上面过渡型代码的话, 可以访问网站的首页, 然后查看源代码, 把 head 区同样的代码拷贝粘贴就可以了 * 设定一个名字空间 (Namespace) 直接在 DOCTYPE 声明后面添加如下代码 : <html XMLns=" > 一个 namespace 是收集元素类型和属性名字的一个详细的 DTD,namespace 声明允许你通过一个在线地址指向来识别你的 namespace 只要照样输入代码就可以 * 声明你的编码语言为了被浏览器正确解释和通过标识校验, 所有的 XHTML 文档都必须声明它们所使用的编码语言代码如下 : <meta http-equiv="content-type" content="text/html; charset=gb2312" /> 这里声明的编码语言是简体中文 GB2312, 你如果需要制作繁体内容, 可以定义为 BIG5 * 用小写字母书写所有的标签 XML 对大小写是敏感的, 所以,XHTML 也是大小写有区别的所有的 XHTML 元素和属性的名字都必须使用小写否则你的文档将被 W3C 校验认为是无效的例如下面的代码是不正确的 : <TITLE> 公司简介 </TITLE> 正确的写法是 : <title> 公司简介 </title> 同样的,<P> 改成 <p>,<b> 改成 <b> 等等这步转换很简单 * 为图片添加 alt 属性为所有图片添加 alt 属性 alt 属性指定了当图片不能显示的时候就显示供替换文本, 这样做对正常用户可有可无, 但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的只有添加了 alt 属性, 代码才会被 W3C 正确性校验通过注意的是我们要添加有意义的 alt 属性, 象下面这样的写法毫无意义 : <img src="logo_unc_120x30.gif" alt="logo_unc_120x30.gif"> 第 13 页, 共 14 页

14 正确的写法 : <img src="logo_unc_120x30.gif" alt="unc 公司标志, 点击返回首页 "> * 给所有属性值加引号在 HTML 中, 你可以不需要给属性值加引号, 但是在 XHTML 中, 它们必须被加引号例 :height="100", 而不能是 height=100 * 关闭所有的标签在 XHTML 中, 每一个打开的标签都必须关闭就象这样 : <p> 每一个打开的标签都必须关闭 </p> <b>html 可以接受不关闭的标,XHTML 就不可以 </b> 这个规则可以避免 HTML 的混乱和麻烦举例来说 : 如果你不关闭图像标签, 在一些浏览器中就可能出现 CSS 显示问题用这种方法能确保页面和你设计的一样显示需要说明的是 : 空标签也要关闭, 在标签尾部使用一个正斜杠 "/" 来关闭它们自己例如 :<br /> <img src="webstandards.gif" /> 经过上述七个规则处理后, 页面就基本符合 XHTML1.0 的要求但我们还需要校验一下是否真的符合标准了我们可以利用 W3C 提供免费校验服务 ( 发现错误后逐个修改在后面的资源列表中我们也提供了其他校验服务和对校验进行指导的网址, 可以作为 W3C 校验的补充当最后通过了 XHTML 验证, 恭喜你已经向网站标准迈出了一大步不是想象中的那么难吧! 第 14 页, 共 14 页

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05