CSS XTHML书写规范以及常见问题总结(页面最优化)

项目文档目录

div+CSS命名规范 - 4 -

Div+css命名规范 - 4 -

1.1. div+css命名规范 - 4 -

1.2. CSS的Id命名规范 - 4 -

1.3. css样式文件命名 - 5 -

XHTML编码基本规范 - 6 -

推荐网页制作规范 - 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

状态: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编码基本规范

2.1 所有的标记都必须要有一个相应的结束标记

XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。例如：

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规定所有属性都必须有一个值，没有值的就重复本身。例如：

必须修改为：

2.7 不要在注释内容中使“–”

“–”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的：

<!–这里是注释———–这里是注释–>

用等号或者空格替换内部的虚线。

<!–这里是注释============这里是注释–>

以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。

2.8 引用样式和脚本语言时type属性不能省略

注意：type="text/javascript"不能省略。

2.9 在页面中写javascript方法时注意加上注释符号。这样就避免>,<,&&等一些特殊符号的报错

事例：

例如：

<![CDATA[

function func(a, b)

{

if (a < b)

return true;

}

]]> </script>

注意到上面的Script中有小于号（<）出现，如果不将其包围在CDATA段中，那么小于号（<）以及后面的内容会

被误认为是另一个XHTML标记的开始，引起一些不必要的错误。

需要注意的是IE认为在<script>标记中的CDATA段是不合法的，并会引发脚本错误，这个问题可以使用

JavaScript注释来避免：

/* <![CDATA[ */

function func(a, b)

{

if (a < b)

return true;

}

/* ]]> */

</script>

或者

// <![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 " />

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 将VS2005的验证标准调整为XHTML1.0或更高版本

备注：

XHTML 1.0 Transitional WEB标准产生的问题

曾经流行一时的HTML标记语言已经被官方认为过时了，将要接任它的是XHTML(http://www.w3.org/MarkUp/)。如果你的网站按照较严格的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的基本规则。

参考网址：http://www.cnblogs.com/plain-heart/archive/2008/04/17/1158909.html

http://www.chinaz.com/Design/Pages/10091JN2007.html

推荐网页制作规范

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缩写语法总结》，这里就不展开描述。

参考网址：http://homepage.yesky.com/97/7643097.shtml

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既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。

4.9.使用子选择器(descendant selectors)

CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：

<ul>

</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>

样式定义是：

#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)的方法

另外一种方法，我认为比CSSHacks更加经得起考验就是采用微软的私有属性条件注释(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文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。

我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。

最后，关闭的大括号}单独写一行。

空格和换行有助与阅读。

推荐阅读：

http://www.jb51.net/article/15758.htm

http://portal.oss.org.tw/files/95/a/a6.pdf

http://en.wikipedia.org/wiki/XHTML

http://www.w3.org/TR/2000/REC-xhtml1-20000126/

http://www.dreamdu.com/xhtml/function_xhtml11/

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{ overflow:hidden; zoom:1; margin:5px auto;}

③对于排版,我们用得最多的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解决之

④万能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; //将对象作为块元素级的表格显示}

5.9.高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用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属性。

5.10 .IE6下为什么图片下有空隙产生

解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.

5.11.如何对齐文本与文本输入框

加上 vertical-align:middle; <style type="text/css"> <> </style>

5.12.web标准中定义id与class有什么区别吗

web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.

属性的优先级问题 ID 的优先级要高于class,看上面的例子三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

5.13. LI中内容超过长度后以省略号显示的方法

此方法适用与IE与OP浏览器 <style type="text/css"> <> </style>

5.14.为什么web标准中IE无法设置滚动条颜色了

解决办法是将body换成html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <> </style>

5.15.为什么无法定义1px左右高度的容器

IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

5.16.怎么样才能让层显示在FLASH之上呢

解决的办法是给FLASH设置透明 <param name="wmode" value="transparent" />

5.17.怎样使一个层垂直居中于浏览器中

这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

<!—

div

{

position:absolute;

top:50%;

lef:50%;

margin:-100px 0 0 -100px;

width:200px;

height:200px;

border:1px solid red;

}

-->

</style>

5.18.兼容各浏览器中最小高度

5.18. IE6下默认的字体尺寸大致在 12 - 14px 之间的问题

IE6下默认的字体尺寸大致在 12 - 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 链接加边框和背景色，需设置 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 可以

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- width:500px; //for ff+ie6.0} #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

8.属性选择器(这个不能算是兼容,是隐藏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; }

12.为什么IE6下容器的宽度和FF解释不同呢 <?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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: //www.microsoft.com/china/msdn/library/webservices/asp.net/ ASPNETusStan.mspx?mfr=true

13. 让IE6支持PNG透明

一个IE6的Bug引起了大麻烦, 他不支持透明的PNG图片.

你需要使用一个css滤镜

*html #image-style {

background-image: none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil

ename.png", sizingMethod="scale");

}

14. 若需给 a 标签内内容加上样式

若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)

15. IE6下默认的字体尺寸大致在 12 - 14px 之间

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 */

第2种:

< 适合于IE7 -->

<![endif]-->

< 适合于IE6及一下 -->

<![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下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式： #item:empty { background: green !important } :empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。对IE6和FF的兼容可以考虑以前的!important 个人比较喜欢用

本文来自：http://www.aa25.cn/504.shtml

推荐的写法：

#example { color: #333; } /* Moz */

* html #example { color: #666; } /* IE6 */

*+html #example { color: #999; } /* IE7 */

感觉这样容易记忆