《CSSXTHML书写规范以及常见问题总结(页面最优化).pdf》由会员分享，可在线阅读，更多相关《CSSXTHML书写规范以及常见问题总结(页面最优化).pdf（23页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、项目文档目录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的命名是区分大小写的，建议全部使用小写。下面总结一下最好的命名准则，好的命名不仅有利于维护人员阅读
2、对搜索搜索引擎优化(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 加
3、入: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 右导航:righ
4、tsideBar 旗志: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.c
5、ss 通用：basic.css 上面的命名规范很直观，即使程序人员不添加注释，我们也会很清楚的知道是什么意思。上面的命名几乎涵盖了所有的经常使用到的样式。XHTML 编码基本规范XHTML 编码基本规范2.1 所有的标记都必须要有一个相应的结束标记XHTML 要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个/来关闭它。例如：2.2 所有标签的元素和属性的名字都必须使用小写与 HTML 不一样，XHTML 对大小写是敏感的，和 是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：必须写成 。大小写夹杂也是不被认可的。2.3 所有的 XHTML标记都
6、必须合理嵌套同样因为XHTML 要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：/b必须修改为：/p 就是说，一层一层的嵌套必须是严格对称。2.4 所有的属性必须用引号 括起来在 HTML 中，你可以不需要给属性值加引号，但是在 XHTML 中，它们必须被加引号。例如：必须修改为：特殊情况，你需要在属性值里使用双引号，你可以用，单引号可以使用'，例如：2.5 把所有 和&特殊符号用编码表示任何小于号（），不是标签的一部分，都必须被编码为>任何与号（&），不是实体的一部分的，都必须被编码为&2.6 给所有属性赋一个值XHTML 规定所有属性都必须有一个
7、值，没有值的就重复本身。例如：必须修改为：2.7 不要在注释内容中使“”“”只能发生在XHTML 注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的：用等号或者空格替换内部的虚线。以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。2.8 引用样式和脚本语言时type 属性不能省略 注意：type=text/javascript不能省略。2.9 在页面中写javascript 方法时注意加上注释符号。这样就避免,&等一些特殊符号的报错事例：和标记的内容必须被包围在CDATA段中。例如：!CDATA function f
8、unc(a,b)if(a 注意到上面的Script 中有小于号（）出现，如果不将其包围在CDATA段中，那么小于号（）以及后面的内容会被误认为是另一个XHTML 标记的开始，引起一些不必要的错误。需要注意的是IE认为在 标记中的CDATA段是不合法的，并会引发脚本错误，这个问题可以使用JavaScript注释来避免：/*!CDATA*/function func(a,b)if(a */或者/!CDATA function func(a,b)if(a 当然，最好的方法是把脚本和CSS 放置于单独的文件中并在XHTML 页面中加上引用。2.10 将所有的样式放在style 中例：这样写不符合标准。
9、我们要这样写：2.11 样式属性最后一个后面一定要加上分号2.12 使用 id 属性，而不是name 属性。在 HTML 中，name 属性可以用来标识identify,和 标记。XHTML 1.0 Strict 和 XHTML 1.1 standards 已经删除了对name 属性的支持。我们应该使用id 唯一标识一个页面上的元素。ID 不能重复。2.13 属性值中空格的处理。属性值中开头和结尾的所有空格将被忽略。属性值中词与词之间的多个空格或换行符将被认为成单个空格。例如如下两个属性的值相同：2.14 使用恰当的文档类型声明和命名空间。2.15 使用 meta 元素声明你的内容类型。2.1
10、6 使用 img 时要添加 alt 属性，可设为空2.17 使用 img 时 align=absmiddle 属性在 W3C验证下通不过大 家 都 知 道，要 想 让 图 片 和 文 字 垂 直 居 中 对 齐 的 话，可 以 在 IMG标 签 下 添 加align=absmiddle 属性即可实现，但 align=absmiddle 属性在 W3C 验证下通不过 验证地址请查看 W3C 网页标准验证服务地址，那么是否可以用CSS来代替IMG 的 align=absmiddle 属性来实现垂直居中呢，答案是肯定的。可以在 CSS中加入 vertical-align:middle;就能实现了事例
11、：用 CSS实现图片和文字垂直居中对齐 这个是没加样式的效果 这个是用 align=absmiddle 实现图片和文字垂直居中对齐 2.18 不建议使用过时属性和标签为了更好的处理网站的兼容性问题，我建议不要使用过时标签和属性2.19 将 VS2005的验证标准调整为XHTML1.0 或更高版本备注：XHTML 1.0 Transitional WEB标准产生的问题曾 经 流 行 一 时 的HTML标 记 语 言 已 经 被 官 方 认 为 过 时 了，将 要 接 任 它 的 是XHTML(http:/www.w3.org/MarkUp/)。如果你的网站按照较严格的XHTML 规则书写，那么这
12、个网站将在不同的浏览器中保持一致的样式。并且你可以认为在未来浏览器的版本升级变化中仍然保证网站外观的一致性。同样你也会得到跨浏览器，跨设备以及跨平台的一致性支持。XHTML 有如下两个主要目标：将文档的结构（使用XHTML标记语言）和表现（使用CSS）分开 将 HTML 作为一种XML 书写对于第一个目标，W3C删除了一些HTML 的标记以及属性，例如 和 bgcolor，因为这些标记或属性并不是文档结构中的一部分，而只是用来描述文档应该如何被显示，因此应该定义在 CSS 文件中而不是HTML 中。同样，某些特定的标记内容并不一定要显示成特定的样子。比如，标记里内容显示的字号完全可能小于里的内
13、容，这些取决于CSS中的定义。当然，一般用于显示一篇文档的标题信息，它的重要程度一般也应该高于中的内容，所以通常的浏览器都会以一个较大的字号来显示。对于第二个目标，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 Transitiona
14、l包含 HTML4.01 的所有标记以及属性，是一种不是那么严格的XHTML，目的是使现有的HTML 开发者更容易的接受并使用XHTML。XHTML 1.0 Strict 就是严格版本的XHTML 了，开发者必须要严格遵守文档的结构与表现分开的规则，也就是说需要用CSS 控制页面的显示而不是使用，bgcolor 之类的标记或属性。XHTML 1.0 Frameset 用于把文档分割成几个桢以显示不同的内容。（XHTML 1.0 Transitional 和Strict 页面不允许包含 标记）。这里不再赘述更多有关XHTML 的介绍，如果感兴趣，可以使用Google 或者 MSN Search
15、找到很多相关资料或是详细介绍。也欢迎在本贴下留下您的评论与问题，让我们共同探讨。接下来是一些书写XHTML的基本规则。参考网址：http:/ http:/ 推荐网页制作规范推荐网页制作规范3.1 命名规范文件命名的原则：以最少的字母达到最容易理解的意义。一般文件及目录命名规范：每一个目录中应该包含一个缺省的html 文件，文件名统一用index.htm 文件名称统一用小写的英文字母、数字和下划线的组合尽量按单词的英语翻译为名称。例如：feedback(信息反馈)，aboutus(关于我们)多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔。例如：news_01.htm。注意，数字位数
16、与文件个数成正比，不够的用0 补齐。例如共有 200 条新闻，其中第18 条命名为news_018.htm 图片的命名规范：名称分为头尾两两部分，用下划线隔开。头部分表示此图片的大类性质。例如：放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner；标志性的图片我们取名为：logo；在页面上位置不固定并且带有链接的小图片我们取名为button；在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu；装饰用的照片我们取名：pic；不带链接表示标题的图片我们取名：title 依照此原则类推。尾部分用来表示图片的具体含义，用英文字母表示。例如：banner_sohu.gi
17、f 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 目录结构规范目录建立的原则：以最少的层次提供最清晰简便的访问结构。目录的命名以
18、小写英文字母，下划线组成。(参照命名规范)根目录一般只存放index.htm 以及其他必须的系统文件每个主要栏目开设一个相应的独立目录根目录下的images 用于存放各页面都要使用的公用图片，子目录下的images 目录存放本栏目页面使用的私有图片所有 JS脚本存放在根目录下的scripts 目录所有 CSS文件存放在根目录下App_theme 目录所有 flash,avi,ram,quicktime 等多媒体文件存放在根目录下的media 目录Css常用优化技巧CSS常用优化技巧4.1.使用 css缩写使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看常用 cs
19、s缩写语法总结，这里就不展开描述。参考网址：http:/ 4.2.明确定义单位，除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在 HTML 中你可以只写width=100，但是在 CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0 值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。4.3.区分大小写当在 XHTML 中使用 CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。class和 id 的值在 HTML 和 XHTML中也是区分大小写的，
20、如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML 里的标签是一致的。4.4.取消 class和 id 前的元素限定当你写给一个元素定义class或者 id，你可以省略前面的元素限定，因为 ID 在一个页面里是唯一的，class可以在页面中多次使用。你限定某个元素毫无意义。例如：div#content /*declarations*/fieldset.details /*declarations*/可以写成#content /*declarations*/.details /*declarations*/这样可以节省一些字节。4.5.默认值通常 padding 的默认值为0，ba
21、ckground-color 的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin 和 padding值都为 0，象这样：*margin:0;padding:0;4.6.不需要重复定义可继承的值CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。4.7.最近优先原则如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码Update:Lorem ipsum dolor set
22、 在 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 selectors specificity 了解更多。4.8.多重 class定义一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px 的边框。.onewidth:200px;back
23、ground:#666;.twoborder:10px solid#F00;在页面代码中，我们可以这样调用 这样最终的显示效果是这个div 既有#666 的背景，也有10px 的边框。是的，这样做是可以的，你可以尝试一下。4.9.使用子选择器(descendant selectors)CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的 class定义。我们来看下面这段代码：Item 1 Item 1 Item 1 这段代码的CSS定义是：div#subnav ul /*Some styling*/div#subnav ul li.subnavitem /*So
24、me 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*/你可以用下面的方法替代上面的代码 Item 1 Item 1 Item 1 样式定义是：#subnav /*Some styling*/#subnav li /*Some styling*/#subnav a /
25、*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 都有共同的一些
26、属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。例如：定义所有标题的字体、颜色和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来 定 义 链 接 的 多个 状 态 样式 时，要注 意
27、 它 们书 写 的 顺序，正 确的 顺 序是：:link:visited:hover:active。抽取第一个字母是LVHA，你可以记忆成LoVe HAte(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer 的 Link Specificity。如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus 属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover 效果，你就把:focus 写在:hover 前面；如果你希望聚焦效果替代:hover 效果，你就把:focus 放在:hover 后面。4.13.清除浮动一个非常常见的CSS 问题
28、，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。通常的解决办法是在浮动层后面添加一个额外元素，例如一个 div 或者一个br，并且定义它的样式为clear:both。4.14.横向居中(centering)这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中？你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：你可以这样定义使它横向居中：#wrap width:760px;/*修改为你的层的宽度*/margin:0 auto;但是IE5/Win 不能正确显示这个定义，我们采用一
29、个非常有用的技巧来解决：用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
30、(main.css);然而，这个方法对IE4 不起作用，这让我很是头疼了一阵子。后来我用这样的写法：import main.css;4.16.针对 IE 的优化有些时候，你需要对IE浏览器的bug 定义一些特别的规则，这里有太多的CSS技巧(Hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta 版里是否更好的支持CSS，这两种方法都是最安全的。1.注释的方法(a)在 IE 中隐藏一个CSS定义，你可以使用子选择器(child selector):htmlbody p /*定义内容*/(b)下面这个写法只有IE 浏览器可以理解(对其他浏览器都隐藏)*html p /*dec
31、larations*/(c)还有些时候，你希望IE/Win 有效而 IE/Mac 隐藏，你可以使用反斜线技巧：/*/*html p declarations /*/2.条件注释(conditional comments)的方法另外一种方法，我认为比CSS Hacks 更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：4.17.调试技巧：层有多大？当调试 CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些
32、人建议用border，一般情况也是可以的，但问题是，有时候 border 会增加元素的尺寸，border-top 和 boeder-bottom 会破坏纵向 margin 的值，所以使用background 更加安全些。另外一个经常出问题的属性是outline。outline 看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline 属性，我所知道的只有Safari、OmniWeb、和 Opera。4.18.CSS代码书写样式在写 CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：selector1,s
33、elector2 property:value;当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS 文件中找到它们。在最后一个选择器和大括号之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。最后，关闭的大括号单独写一行。空格和换行有助与阅读。推荐阅读：http:/ http:/portal.oss.org.tw/files/95/a/a6.pdf http:/en.wikipedia.org/wiki/XHTML
34、http:/www.w3.org/TR/2000/REC-xhtml1-20000126/http:/ Fireofx的兼容性处理方法并整理了一下.对于 web2.0 的过度,请尽量用 xhtml 格式写代码,而且 DOCTYPE 影响CSS 处理,作为 W3C的标准,一定要加DOCTYPE 声名.以下为我们工作中经常用到的或是遇到的问题。CSS技巧5.1.div 的垂直居中问题vertical-align:middle;将行距增加到和整个DIV 一样高line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行5.2.margin 加倍的问题设置为 float 的
35、 div 在 ie 下设置的margin 会加倍。这是一个ie6 都存在的bug。解决方案是在这个 div 里面加上display:inline;例如：相应的 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
36、 元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline 元素的特点是,和其他元素在同 一 行上,不 可控 制(内 嵌元 素);#box display:block;/可 以 为 内 嵌 元素 模拟 为块 元 素display:inline;/实现同一行排列的效果diplay:table;5.4.IE 与宽度和高度的问题IE 不认得 min-这个定义，但实际上它把正常的width 和 height 当作有 min 的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width 和 min-height 的话，IE下面
37、根本等于没有设置宽度和高度。比如要设置背景图片，这 个 宽 度 是 比 较 重要 的。要 解决 这 个 问 题，可 以 这 样：#box width:80px;height:35px;htmlbody#box width:auto;height:auto;min-width:80px;min-height:35px;5.5.页面的最小宽度min-width 是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE 不认得这个，而它实际上把width 当做最小宽度来使。为了让这一命令在IE 上也能用，可以把一个 放到 标签下，然后为div 指定一个类,然后
38、 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;#lef
39、t float:left;width:50%;#right width:50%;*html#left margin-right:-3px;/这 句 是 关 键 5.7.IE 捉迷藏的问题当 div 应用复杂的时候每个栏中又有一些链接，DIV 等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout 使用 line-height 属性或者给#layout 使用固定高和宽。页面结构尽量简单。5.8.float 的 div 闭合;清除浮动;自适应高度;例如：这里的 NOTfloatC并不希望继续平移，而是希望往下排。(其中 floatA、
40、floatB 的属性已经设置为float:left;)这段代码在IE中毫无问题，问题出在FF。原因是 NOTfloatC 并非 float 标签，必须将float 标签闭合。在 之间加上这个 div 一定要注意位置，而且必须与两个具有float 属性的 div 同级，之间不能存在嵌套关系，否则会产生异常。并且将 clear 这种样式定义为为如下即可：.clear clear:both;作为外部wrapper 的 div 不要定死高度,为了让高度能自动适应，要在 wrapper 里面加上overflow:hidden;当包含 float 的 box 的时候，高度自动适应在IE 下无效，这时候应该
41、触发IE的 layout 私有属性(万恶的 IE 啊！)用 zoom:1;可以做到，这样就达到了兼容。例如某一个wrapper 如下定义：.colwrapper overflow:hidden;zoom:1;margin:5px auto;对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n 栏的 float div后面做一个统一的背景,譬如:比如我们要将page 的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right 的向下拉长,而 page 居然保存高度不变,问题来了,原因在于page不是 float 属
42、性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决 再嵌入一个 float left 而宽度是100%的 DIV 解决之万能 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:hidde
43、n;.clearfix display:inline-block;/*Hide from IE Mac*/.clearfix display:block;/*End hide from IE Mac*/*end of clearfix*/或者这样设置：.hackbox display:table;/将对象作为块元素级的表格显示 5.9.高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。例：#box background-color:#eee;#box p margin-top:20px;margin-bottom:
44、20px;text-align:center;p 对象中的内容 解决方法：在P对象上下各加2 个空的 div 对象 CSS代码：.1height:0px;overflow:hidden;或者为 DIV 加上 border 属性。5.10.IE6 下为什么图片下有空隙产生解决这个BUG 的方法也有很多,可以是改变html 的排版,或者设置img 为 display:block 或者设置 vertical-align 属性为vertical-align:top|bottom|middle|text-bottom 都可以解决.5.11.如何对齐文本与文本输入框加 上vertical-align:mi
45、ddle;5.12.web 标准中定义id 与 class有什么区别吗web 标准中是不容许重复ID 的,比如div id=aa 不容许重复2 次,而 class 定义的是类,理论上可以无限重复,这样需要多次引用的定义便可以使用他.属性的优先级问题ID 的优先级要高于class,看上面的例子三.方便 JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID 来得简单.5.13.LI 中内容超过长度后以省略号显示的方法此方法适用与IE与 OP浏览器 5.14.为什么 web 标准中
46、IE 无法设置滚动条颜色了解决办法是将body 换成 html 5.15.为什么无法定义1px 左右高度的容器IE6 下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden|zoom:0.08|line-height:1px 5.16.怎么样才能让层显示在FLASH之上呢解决的办法是给FLASH设置透明 5.17.怎样使一个层垂直居中于浏览器中这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二 5.18.兼容各浏览器中最小高度 5.18.IE6 下默认的字体尺寸大致在12-14px 之间的问题IE6 下默认的字体尺寸大致在12-
47、14px 之间，当你试图定义一个高度小于这个默认值的div 的时候，IE 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用height:4px;来定义了一个div 的高度，实际在IE 下显示的仍然是一个12 px 左右高度的层。添加overflow:hidden 解决问题。FF与 IE 1.Div 居中问题div 设置margin-left,margin-right 为 auto 时已经居中，IE 不行，IE需要设定 body 居中，首先在父级元素定义text-algin:center;这个的意思就是在父级元素内的内容居中。2.链接(a 标签)的边框与背景a 链接加边框和背景色，需设
48、置display:block,同时设置float:left 保证不换行。参照menubar,给 a 和 menubar 设置高度是为了避免底边显示错位,若不设height,可以在menubar 中插入一个空格。3.超链接访问过后hover 样式就不出现的问题被点击访问过的超链接样式不在具有hover和 active 了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序:L-V-H-A Code:4.游标手指cursor cursor:pointer 可以同时在IE FF 中显示游标手指状，hand 仅 IE 可以5.UL 的 padding 与 margin ul 标签在 FF中
49、默认是有padding 值的,而在 IE中只有 margin 默认有值,所以先定义ulmargin:0;padding:0;就能解决大部分问题6.FORM标签这个标签在IE中,将会自动margin 一些边距,而在 FF中 margin 则是 0,因此,如果想显示一致,所以最好在css中指定 margin 和 padding,针对上面两个问题,我的 css中一般首先都使用这样的样式ul,formmargin:0;padding:0;给定义死了,所以后面就不会为这个头疼了.7.BOX 模型解释不一致问题在 FF和 IE 中的 BOX模型解释不一致导致相差2px 解决方法：divmargin:30p
50、x!important;margin:28px;注 意 这 两 个margin的 顺 序 一 定 不 能 写 反，important 这个属性IE不能识别，但别的浏览器可以识别。所以在 IE 下其实解释成这样：div maring:30px;margin:28px 重复定义的话按照最后一个来执行，所以不可以只写margin:xx px!important;#box width:600px;/for ie6.0-width:500px;/for ff+ie6.0#box width:600px!important/for ff width:600px;/for ff+ie6.0 width/*/