CSSXTHML书写规范以及常见问题总结面最优化.doc

资源描述

项目文档目录 div+CSS命名规范 - 4 - Div+css命名规范 - 4 - 1.1. div+css命名规范 - 4 - 1.2. CSS的Id命名规范 - 4 - 1.3. css样式文献命名 - 5 - XHTML编码基本规范 - 6 - XHTML编码基本规范 - 6 - 推荐网页制作规范 - 10 - 推荐网页制作规范 - 10 - Css常用优化技巧 - 11 - Css浏览器兼容性问题总结 - 20 - JavaScript浏览器兼容性总结 - 30 - XHTML标准的DIV+CSS布局对于网站SEO的影响 - 35 - div+CSS命名规范 Div+css命名规范 Css的命名是区分大小写的，建议所有使用小写。下面总结一下最佳的命名准则，好的命名不仅有助于维护人员阅读对搜索搜索引擎优化(seo)有很大的好处。其中对代码的优化是一个很关键的环节。为了更加符合SEO的规范，下面是目前流行的CSS+DIV的命名规则，并做了些补充： 1.1. div+css命名规范页头:header 登录条:loginBar 标志:logo 侧栏:sideBar 广告:banner 导航:nav 子导航:subNav 菜单:menu 子菜单:subMenu 搜索:search 滚动:scroll 页面主体:main 内容:content 标签页:tab 文章列表:list 提醒信息:msg 小技巧:tips 栏目的题:title 友情链接:friendLink 页脚:footer 加入:joinus 指南:guild 服务:service 热点:hot 新闻:news 下载:download 注册:regsiter 状态:status 按钮:btn 投票:vote 合作伙伴:partner 版权:copyRight产品管理 1.2. CSS的Id命名规范外套:wrap 主导航:mainNav 子导航:subnav 页脚:footer 整个页面:content 页眉:header 页脚:footer 商标:label 标题:title 主导航:mainNav(globalNav) 顶导航:topnav 边导航:sidebar 左导航:leftsideBar 右导航:rightsideBar 旗志:logo 标语:banner 菜单内容1:menu1Content 菜单容量:menuContainer 子菜单:submenu 边导航图标:sidebarIcon 注释:note 面包屑:breadCrumb(即页面所处位置导航提醒) 容器:container 内容:content 搜索:search 登陆:login 功能区:shop(如购物车，收银台) 当前的：current 1.3. css样式文献命名重要的:master.css 布局版面:layout.css 专栏:columns.css 文字:font.css 打印样式:print.css 主题:themes.css 通用：basic.css 上面的命名规范很直观，即使程序人员不添加注释，我们也会很清楚的知道是什么意思。上面的命名几乎涵盖了所有的经常使用到的样式。 XHTML编码基本规范 XHTML编码基本规范 2.1 所有的标记都必须要有一个相应的结束标记　XHTML规定有严谨的结构，所有标签必须关闭。假如是单独不成对的标签，在标签最后加一个"/"来关闭它。例如：　<img height="80" alt="网页设计师" src="/uploadfile/202306/17/8C.gif" width="200" /> 2.2 所有标签的元素和属性的名字都必须使用小写　　与HTML不同样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML规定所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的。 2.3 所有的XHTML标记都必须合理嵌套　　同样由于XHTML规定有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：　　<p><b></p>/b>必须修改为：<p><b></b>/p> 　　就是说，一层一层的嵌套必须是严格对称。 2.4 所有的属性必须用引号""括起来在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如：　　<height=80>必须修改为：<height="80"> 　　特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如：　　<alt="say'hello'"> 2.5 把所有<和&特殊符号用编码表达任何小于号（<），不是标签的一部分，都必须被编码为&lt ; 　　任何大于号（>），不是标签的一部分，都必须被编码为> 　　任何与号（&），不是实体的一部分的，都必须被编码为& 2.6 给所有属性赋一个值 XHTML规定所有属性都必须有一个值，没有值的就反复自身。例如： <td nowrap> <input type="checkbox" name="shirt" value="medium" checked> 必须修改为： <td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked"> 2.7 不要在注释内容中使“–” “–”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的： <!–这里是注释———–这里是注释–> 用等号或者空格替换内部的虚线。 <!–这里是注释============这里是注释–> 以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再运用。 2.8 引用样式和脚本语言时type属性不能省略 <script language="javascript" type="text/javascript"> 注意：type="text/javascript"不能省略。 2.9 在页面中写javascript方法时注意加上注释符号。这样就避免>,<,&&等一些特殊符号的报错事例： <script>和<style>标记的内容必须被包围在CDATA段中。例如： <script type="text/javascript"> <![CDATA[ function func(a, b) { if (a < b) return true; } ]]> </script> 注意到上面的Script中有小于号（<）出现，假如不将其包围在CDATA段中，那么小于号（<）以及后面的内容会被误认为是另一个XHTML标记的开始，引起一些不必要的错误。需要注意的是IE认为在<script>标记中的CDATA段是不合法的，并会引发脚本错误，这个问题可以使用 JavaScript注释来避免： <script type="text/javascript"> /* <![CDATA[ */ function func(a, b) { if (a < b) return true; } /* ]]> */ </script> 或者 <script type="text/javascript"> // <![CDATA[ function func(a, b) { if (a < b) return true; } // ]]> </script> 当然，最佳的方法是把脚本和CSS放置于单独的文献中并在XHTML页面中加上引用。 2.10 将所有的样式放在style中例：<td width="4"> </td> 这样写不符合标准。我们要这样写：<td style=”width:4px;”> </td> 2.11 样式属性最后一个后面一定要加上分号 2.12 使用id属性，而不是name属性。在HTML中，name属性可以用来标记identify <a>, <applet>, <form>, <frame>, <iframe>, <img>和 <map>标记。XHTML 1.0 Strict 和XHTML 1.1 standards已经删除了对name属性的支持。我们应当使用id唯一标记一个页面上的元素。ID不能反复。 2.13 属性值中空格的解决。属性值中开头和结尾的所有空格将被忽略。属性值中词与词之间的多个空格或换行符将被认为成单个空格。例如如下两个属性的值相同： <input value="HTML is out" /> <input value=" HTML is out " /> 2.14 使用恰当的文档类型声明和命名空间。 2.15 使用meta元素声明你的内容类型。 2.16 使用img时要添加alt属性，可设为空 2.17 使用img时align=absmiddle属性在W3C验证下通但是　大家都知道，要想让图片和文字垂直居中对齐的话，可以在IMG标签下添加align=absmiddle属性即可实现，但align=absmiddle属性在W3C验证下通但是[验证地址请查看W3C网页标准验证服务地址]，那么是否可以用CSS来代替IMG的align=absmiddle属性来实现垂直居中呢，答案是肯定的。可以在CSS中加入vertical-align:middle;就能实现了事例： <div><img style="vertical-align:middle;" src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />用CSS实现图片和文字垂直居中对齐</div><br /><br /> <div><img src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />这个是没加样式的效果</div><br /><br /> <div><img align=absmiddle src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />这个是用align=absmiddle实现图片和文字垂直居中对齐</div> 2.18 不建议使用过时属性和标签为了更好的解决网站的兼容性问题，我建议不要使用过时标签和属性 2.19 将VS2023的验证标准调整为XHTML1.0或更高版本备注： XHTML 1.0 Transitional WEB标准产生的问题曾经流行一时的HTML标记语言已经被官方认为过时了，将要接任它的是XHTML()。假如你的网站按照较严格的XHTML规则书写，那么这个网站将在不同的浏览器中保持一致的样式。并且你可以认为在未来浏览器的版本升级变化中仍然保证网站外观的一致性。同样你也会得到跨浏览器，跨设备以及跨平台的一致性支持。 XHTML有如下两个重要目的： · 将文档的结构（使用XHTML标记语言）和表现（使用CSS）分开 · 将HTML作为一种XML书写对于第一个目的，W3C删除了一些HTML的标记以及属性，例如<font>和bgcolor，由于这些标记或属性并不是文档结构中的一部分，而只是用来描述文档应当如何被显示，因此应当定义在CSS文献中而不是HTML中。同样，某些特定的标记内容并不一定要显示成特定的样子。比如，<h1>标记里内容显示的字号完全也许小于<p>里的内容，这些取决于CSS中的定义。当然，<h1>一般用于显示一篇文档的标题信息，它的重要限度一般也应当高于<p>中的内容，所以通常的浏览器都会以一个较大的字号来显示。对于第二个目的，XHTML将严格遵守XML的严格语法。可以说XHTML是HTML依照XML语法重构的结果。换句话说，当你编写XHTML文档的时候，其实是在编写一份特化了的XML文档。XML文档有着比HTML严格多了的语法，这些将在本文稍后部分讨论。 XHTML有三个版本： · XHTML 1.0 Transitional · XHTML 1.0 Strict · XHTML 1.0 Frameset XHTML 1.0 Transitional包含HTML4.01的所有标记以及属性，是一种不是那么严格的XHTML，目的是使现有的HTML开发者更容易的接受并使用XHTML。 XHTML 1.0 Strict就是严格版本的XHTML了，开发者必须要严格遵守文档的结构与表现分开的规则，也就是说需要用CSS控制页面的显示而不是使用<font>，bgcolor之类的标记或属性。 XHTML 1.0 Frameset用于把文档分割成几个桢以显示不同的内容。（XHTML 1.0 Transitional和Strict 页面不允许包含<frameset> 标记）。这里不再赘述更多有关XHTML的介绍，假如感爱好，可以使用Google或者MSN Search找到很多相关资料或是具体介绍。也欢迎在本贴下留下您的评论与问题，让我们共同探讨。接下来是一些书写XHTML的基本规则。参考网址：推荐网页制作规范推荐网页制作规范 3.1 命名规范文献命名的原则：以最少的字母达成最容易理解的意义。一般文献及目录命名规范：每一个目录中应当包含一个缺省的html 文献，文献名统一用index.htm 文献名称统一用小写的英文字母、数字和下划线的组合尽量按单词的英语翻译为名称。例如：feedback(信息反馈)，aboutus(关于我们) 多个同类型文献使用英文字母加数字命名，字母和数字之间用_分隔。例如：news_01.htm。注意，数字位数与文献个数成正比，不够的用0补齐。例如共有200条新闻，其中第18条命名为news_018.htm 图片的命名规范：名称分为头尾两两部分，用下划线隔开。头部分表达此图片的大类性质。例如：放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner ；标志性的图片我们取名为：logo ；在页面上位置不固定并且带有链接的小图片我们取名为button ；在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu ；装饰用的照片我们取名：pic ；不带链接表达标题的图片我们取名：title 依照此原则类推。尾部分用来表达图片的具体含义，用英文字母表达。例如：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg. 有onmouse效果的图片，两张分别在原有文献名后加"_on"和"_off"命名。其它文献命名规范： js的命名原则以功能的英语单词为名。例如：广告条的js文献名为:ad.js 所有的CGI文献后缀为cgi。所有CGI程序的配置文献为config.cgi 3.2 目录结构规范目录建立的原则：以最少的层次提供最清楚简便的访问结构。目录的命名以小写英文字母，下划线组成。(参照命名规范) 根目录一般只存放index.htm以及其他必须的系统文献每个重要栏目开设一个相应的独立目录根目录下的images用于存放各页面都要使用的公用图片，子目录下的images目录存放本栏目页面使用的私有图片所有JS脚本存放在根目录下的scripts目录所有CSS文献存放在根目录下App_theme目录所有flash, avi, ram, quicktime 等多媒体文献存放在根目录下的media目录 Css常用优化技巧 CSS常用优化技巧 4.1.使用css缩写使用缩写可以帮助减少你CSS文献的大小，更加容易阅读。css缩写的重要规则请参看《常用css缩写语法总结》，这里就不展开描述。参考网址： 4.2.明拟定义单位，除非值为0 忘掉定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。 4.3.区分大小写当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。 class和id的值在HTML和XHTML中也是区分大小写的，假如你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。 4.4.取消class和id前的元素限定当你写给一个元素定义class或者id，你可以省略前面的元素限定，由于ID在一个页面里是唯一的， class可以在页面中多次使用。你限定某个元素毫无意义。例如： div#content { /* declarations */ } fieldset.details { /* declarations */ } 可以写成 #content { /* declarations */ } .details { /* declarations */ } 这样可以节省一些字节。 4.5.默认值通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值也许不同。假如怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样： * { margin:0; padding:0; } 4.6.不需要反复定义可继承的值 CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要反复定义。但是要注意，浏览器也许用一些默认值覆盖你的定义。 4.7.最近优先原则假如对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码 Update: Lorem ipsum dolor set 在CSS文献中，你已经定义了元素p，又定义了一个class update p { margin:1em 0; font-size:1em; color:#333; } .update { font-weight:bold; color:#600; } 这两个定义中，class=update将被使用，由于class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》了解更多。 4.8.多重class定义一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。 .one{width:200px;background:#666;} .two{border:10px solid #F00;} 在页面代码中，我们可以这样调用 <div class=”one two”></div> 这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。 4.9.使用子选择器(descendant selectors) CSS初学者不知道使用子选择器是影响他们效率的因素之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码： <div id=subnav> <ul> <li class=subnavitem> <a href=# class=subnavitem>Item 1</a></li>> <li class=subnavitemselected> <a href=# class=subnavitemselected> Item 1</a> </li> <li class=subnavitem> <a href=# class=subnavitem> Item 1</a> </li> </ul> </div> 这段代码的CSS定义是： div#subnav ul { /* Some styling */ } div#subnav ul li.subnavitem { /* Some styling */ } div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ } div#subnav ul li.subnavitemselected { /* Some styling */ } div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ } 你可以用下面的方法替代上面的代码 <ul id=subnav> <li> <a href=#> Item 1</a> </li> <li class=sel> <a href=#> Item 1</a> </li> <li> <a href=#> Item 1</a> </li> </ul> 样式定义是： #subnav { /* Some styling */ } #subnav li { /* Some styling */ } #subnav a { /* Some styling */ } #subnav .sel { /* Some styling */ } #subnav .sel a { /* Some styling */ } 用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。 4.10.不需要给背景图片途径加引号为了节省字节，我建议不要给背景图片途径加引号，由于引号不是必须的。例如： background:url(images/***.gif) #333; 可以写为 background:url(images/***.gif) #333; 假如你加了引号，反而会引起一些浏览器的错误。 4.11.组选择器(Group selectors) 当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的反复定义。这可以节省不少字节。例如：定义所有标题的字体、颜色和margin，你可以这样写： h1,h2,h3,h4,h5,h6 { font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif; color:#333; margin:1em 0; } 假如在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如： h1 { font-size:2em; } h2 { font-size:1.6em; } 4.12.用对的的顺序指定链接的样式当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，对的的顺序是：:link :visited :hover :active。抽取第一个字母是LVHA，你可以记忆成LoVe HAte(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的《Link Specificity》。假如你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，假如你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；假如你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。 4.13.清除浮动一个非经常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超过了外层的范围。通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。 4.14.横向居中(centering) 这是一个简朴的技巧，但是值得再说一遍，由于我看见太多的新手问题都是问这个：CSS如何横向居中？你需要定义元素的宽，并且定义横向的margin，假如你的布局包含在一个层(容器)中，就象这样：  你可以这样定义使它横向居中： #wrap { width:760px; /* 修改为你的层的宽度 */ margin:0 auto; } 但是IE5/Win不能对的显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样： body { text-align:center; } #wrap { width:760px; /* 修改为你的层的宽度 */ margin:0 auto; text-align:left; } 第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。 4.15.导入(Import)和隐藏CSS 由于老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如： @import url(main.css); 然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法： @import main.css; 4.16.针对IE的优化有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(Hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。 1.注释的方法 (a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector): html>body p { /* 定义内容 */ } (b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏) * html p { /* declarations */ } (c)尚有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧： /* */ * html p { declarations } /* */ 2.条件注释(conditional comments)的方法此外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：  4.17.调试技巧：层有多大？当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用 border，一般情况也是可以的，但问题是，有时候border 会增长元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。此外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。 4.18.CSS代码书写样式在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在通过不断实践后，我决定采用下面这样的书写样式： selector1, selector2 { property:value; } 当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文献中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是假如你要加新样式时容易忘掉补上分号而产生错误，所以还是都加比较好。最后，关闭的大括号}单独写一行。空格和换行有助与阅读。推荐阅读： Css浏览器兼容性问题总结 CSS对浏览器的兼容性总结 CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性解决方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,并且DOCTYPE 影响 CSS 解决,作为W3C的标准,一定要加 DOCTYPE声名. 以下为我们工作中经常用到的或是碰到的问题。 CSS技巧 5.1.div的垂直居中问题 vertical-align:middle; 将行距增长到和整个DIV同样高 line-height:200px; 然后插入文字，就垂直居中了。缺陷是要控制内容不要换行 5.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*/} 5.3.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block; //可认为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table; 5.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.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的判断来实现最小宽度。 5.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> 5.7.IE捉迷藏的问题当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容的确在页面。解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简朴。 5.8.float的div闭合;清除浮动;自适应高度; ① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设立为 float:left;) 这段代码在IE中毫无问题，问题出在FF。因素是NOTfloatC并非float标签，必须将float标签闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置，并且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可： .clear{ clear:both;} ②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应当触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达成了兼容。例如某一个wrapper如下定义： .colwrapper

展开阅读全文