<
>
您的位置:主页 > 教程 > 网页制作 > 心得技巧 > 正文

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

2014-08-28 来源: 个评论 点击: 分享文章

A-A+

项目文档目录
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要求有严谨的结构,所有标签必须关闭。如果是单独不成对的标签,在标签最后加一 个"/"来关闭它。例如:
 网页设计师

2.2 所有标签的元素和属性的名字都必须使用小写
  与HTML不一样,XHTML对大小写是敏感的,和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如:<BODY>必须写成<body> 。大小写夹杂也是不被认可的。 <br /><br />2.3 所有的XHTML标记都必须合理嵌套 <br />  同样因为XHTML要求有严谨的结构,因此所有的嵌套都必须按顺序,以前我们这样写的代码: <br />  <p><b></p>/b>必须修改为:<p><b></b>/p> <br />  就是说,一层一层的嵌套必须是严格对称。 <br /><br />2.4 所有的属性必须用引号""括起来 <br />在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。例如: <br />  <height=80>必须修改为:<height="80"> <br />  特殊情况,你需要在属性值里使用双引号,你可以用",单引号可以使用',例如: <br />  <alt="say'hello'"> <br /><br />2.5 把所有<和&特殊符号用编码表示 <br />任何小于号(<),不是标签的一部分,都必须被编码为< ; <br />  任何大于号(>),不是标签的一部分,都必须被编码为> <br />  任何与号(&),不是实体的一部分的,都必须被编码为& <br /><br />2.6 给所有属性赋一个值 <br />XHTML规定所有属性都必须有一个值,没有值的就重复本身。例如: <br /><td nowrap> <input type="checkbox" name="shirt" value="medium" checked> <br />必须修改为: <br /><td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked"> <br /><br />2.7 不要在注释内容中使“–” <br />“–”只能发生在XHTML注释的开头和结束,也就是说,在内容中它们不再有效。例如下面的代码是无效的: <br /><!–这里是注释———–这里是注释–> <br />用等号或者空格替换内部的虚线。 <br /><!–这里是注释============这里是注释–> <br />以上这些规范有的看上去比较奇怪,但这一切都是为了使我们的代码有一个统一、唯一的标准,便于以后的数据再利用。 <br /><br />2.8 引用样式和脚本语言时type属性不能省略 <br /><script language="javascript" type="text/javascript"> <br />注意:type="text/javascript"不能省略。 <br /><br />2.9 在页面中写javascript方法时注意加上注释符号。这样就避免>,<,&&等一些特殊符号的报错 <br />事例: <br /><script>和<style>标记的内容必须被包围在CDATA段中。 <br />例如: <br /><script type="text/javascript"> <br /><![CDATA[ <br />function func(a, b) <br />{ <br />if (a < b) <br />return true; <br />} <br />]]> </script> <br />注意到上面的Script中有小于号(<)出现,如果不将其包围在CDATA段中,那么小于号(<)以及后面的内容会 <br />被误认为是另一个XHTML标记的开始,引起一些不必要的错误。 <br />需要注意的是IE认为在<script>标记中的CDATA段是不合法的,并会引发脚本错误,这个问题可以使用 <br />JavaScript注释来避免: <br /><script type="text/javascript"> <br />/* <![CDATA[ */ <br />function func(a, b) <br />{ <br />if (a < b) <br />return true; <br />} <br />/* ]]> */ <br /></script> <br />或者 <br /><script type="text/javascript"> <br />// <![CDATA[ <br />function func(a, b) <br />{ <br />if (a < b) <br />return true; <br />} <br />// ]]> <br /></script> <br />当然,最好的方法是把脚本和CSS放置于单独的文件中并在XHTML页面中加上引用。 <br /><br /><br />2.10 将所有的样式放在style中 <br />例:<td width="4"> </td> 这样写不符合标准。 <br />我们要这样写:<td style=”width:4px;”> </td> <br /><br />2.11 样式属性最后一个后面一定要加上分号 <br /><br />2.12 使用id属性,而不是name属性。 <br />在HTML中,name属性可以用来标识identify <a>, <applet>, <form>, <frame>, <iframe>, <img>和 <map>标记。XHTML 1.0 Strict 和XHTML 1.1 standards已经删除了对name属性的支持。我们应该使用id唯一标识一个页面上的元素。ID不能重复。 <br /><br />2.13 属性值中空格的处理。 <br />属性值中开头和结尾的所有空格将被忽略。属性值中词与词之间的多个空格或换行符将被认为成单个空格。例如 <br />如下两个属性的值相同: <br /><input value="HTML is out" /> <br /><input value=" HTML is <br />out " /> <br /><br />2.14 使用恰当的文档类型声明和命名空间。 <br /><br />2.15 使用meta元素声明你的内容类型。 <br /><br />2.16 使用img时要添加alt属性,可设为空 <br /><br />2.17 使用img时align=absmiddle属性在W3C验证下通不过 <br /> 大家都知道,要想让图片和文字垂直居中对齐的话,可以在IMG标签下添加align=absmiddle属性即可实现,但align=absmiddle属性在W3C验证下通不过[验证地址请查看W3C网页标准验证服务地址],那么是否可以用CSS来代替IMG的align=absmiddle属性来实现垂直居中呢,答案是肯定的。 <br />可以在CSS中加入vertical-align:middle;就能实现了 <br /><br />事例: <br /><div><img style="vertical-align:middle;" src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />用CSS实现图片和文字垂直居中对齐</div><br /><br /> <br /><div><img src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />这个是没加样式的效果</div><br /><br /> <br /><div><img align=absmiddle src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />这个是用align=absmiddle实现图片和文字垂直居中对齐</div> <br /><br />2.18 不建议使用过时属性和标签 <br />为了更好的处理网站的兼容性问题,我建议不要使用过时标签和属性 <br /><br />2.19 将VS2005的验证标准调整为XHTML1.0或更高版本 <br /><br />备注: <br />XHTML 1.0 Transitional WEB标准产生的问题 <br />曾经流行一时的HTML标记语言已经被官方认为过时了,将要接任它的是XHTML(http://www.w3.org/MarkUp/)。如果你的网站按照较严格的XHTML规则书写,那么这个网站将在不同的浏览器中保持一致的样式。并且你可以认为在未来浏览器的版本升级变化中仍然保证网站外观的一致性。同样你也会得到跨浏览器,跨设备以及跨平台的一致性支持。 <br />XHTML有如下两个主要目标: <br />· 将文档的结构(使用XHTML标记语言)和表现(使用CSS)分开 <br />· 将HTML作为一种XML书写 <br />对于第一个目标,W3C删除了一些HTML的标记以及属性,例如<font>和bgcolor,因为这些标记或属性并不是文档结构中的一部分,而只是用来描述文档应该如何被显示,因此应该定义在CSS文件中而不是HTML中。同样,某些特定的标记内容并不一定要显示成特定的样子。比如,<h1>标记里内容显示的字号完全可能小于<p>里的内容,这些取决于CSS中的定义。当然,<h1>一般用于显示一篇文档的标题信息,它的重要程度一般也应该高于<p>中的内容,所以通常的浏览器都会以一个较大的字号来显示。 <br />对于第二个目标,XHTML将严格遵守XML的严格语法。可以说XHTML是HTML依照XML语法重构的结果。换句话说,当你编写XHTML文档的时候,其实是在编写一份特化了的XML文档。XML文档有着比HTML严格多了的语法,这些将在本文稍后部分讨论。 <br />XHTML有三个版本: <br />· XHTML 1.0 Transitional <br />· XHTML 1.0 Strict <br />· XHTML 1.0 Frameset <br />XHTML 1.0 Transitional包含HTML4.01的所有标记以及属性,是一种不是那么严格的XHTML,目的是使现有的HTML开发者更容易的接受并使用XHTML。 <br />XHTML 1.0 Strict就是严格版本的XHTML了,开发者必须要严格遵守文档的结构与表现分开的规则,也就是说需要用CSS控制页面的显示而不是使用<font>,bgcolor之类的标记或属性。 <br />XHTML 1.0 Frameset用于把文档分割成几个桢以显示不同的内容。(XHTML 1.0 Transitional和Strict 页面不允许包含<frameset> 标记)。 <br />这里不再赘述更多有关XHTML的介绍,如果感兴趣,可以使用Google或者MSN Search找到很多相关资料或是详细介绍。也欢迎在本贴下留下您的评论与问题,让我们共同探讨。接下来是一些书写XHTML的基本规则。 <br />参考网址:http://www.cnblogs.com/plain-heart/archive/2008/04/17/1158909.html <br />http://www.chinaz.com/Design/Pages/10091JN2007.html <br /><br />推荐网页制作规范 <br /><br /><br />推荐网页制作规范 <br />3.1 命名规范 <br /><br />文件命名的原则: <br />以最少的字母达到最容易理解的意义。 <br /><br />一般文件及目录命名规范: <br />每一个目录中应该包含一个缺省的html 文件,文件名统一用index.htm 文件名称统一用小写的英文字母、数字和下划线的组合 尽量按单词的英语翻译为名称。例如:feedback(信息反馈),aboutus(关于我们) 多个同类型文件使用英文字母加数字命名,字母和数字之间用_分隔。例如:news_01.htm。注意,数字位数与文件个数成正比,不够的用0补齐。例如共有200条新闻,其中第18条命名为news_018.htm <br />图片的命名规范 : <br />名称分为头尾两两部分,用下划线隔开。 <br />头部分表示此图片的大类性质。例如: 放置在页面顶部的广告、装饰图案等长方形的图片我们取名: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. <br />有onmouse效果的图片,两张分别在原有文件名后加"_on"和"_off"命名。 <br />其它文件命名规范: <br />js的命名原则以功能的英语单词为名。例如:广告条的js文件名为:ad.js <br />所有的CGI文件后缀为cgi。所有CGI程序的配置文件为config.cgi <br /><br /><br />3.2 目录结构规范 <br />目录建立的原则:以最少的层次提供最清晰简便的访问结构。 <br />目录的命名以小写英文字母,下划线组成。(参照命名规范) <br />根目录一般只存放index.htm以及其他必须的系统文件 <br />每个主要栏目开设一个相应的独立目录 <br />根目录下的images用于存放各页面都要使用的公用图片,子目录下的images目录存放本栏目页面使用的私有图片 <br />所有JS脚本存放在根目录下的scripts目录 <br />所有CSS文件存放在根目录下App_theme目录 <br />所有flash, avi, ram, quicktime 等多媒体文件存放在根目录下的media目录 <br /><br />Css常用优化技巧 <br />CSS常用优化技巧 <br />4.1.使用css缩写 <br />使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,这里就不展开描述。 <br />参考网址:http://homepage.yesky.com/97/7643097.shtml <br /><br />4.2.明确定义单位,除非值为0 <br />忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。 <br />4.3.区分大小写 <br />当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的。为了避免这种错误,我建议所有的定义名称都采用小写。 <br />class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。 <br />4.4.取消class和id前的元素限定 <br />当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的, class可以在页面中多次使用。你限定某个元素毫无意义。例如: <br />div#content { /* declarations */ } <br />fieldset.details { /* declarations */ } <br />可以写成 <br />#content { /* declarations */ } <br />.details { /* declarations */ } <br />这样可以节省一些字节。 <br />4.5.默认值 <br />通常padding的默认值为0,background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突,可以在样式表一开始就先定义所有元素的margin和padding值都为0,象这样: <br />* { <br />margin:0; <br />padding:0; <br />} <br /><br />4.6.不需要重复定义可继承的值 <br />CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义。但是要注意,浏览器可能用一些默认值覆盖你的定义。 <br />4.7.最近优先原则 <br />如果对同一个元素的定义有多种,以最接近(最小一级)的定义为最优先,例如有这么一段代码 <br />Update: Lorem ipsum dolor set <br />在CSS文件中,你已经定义了元素p,又定义了一个class update <br />p { <br />margin:1em 0; <br />font-size:1em; <br />color:#333; <br />} <br />.update { <br />font-weight:bold; <br />color:#600; <br />} <br />这两个定义中,class=update将被使用,因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》 了解更多。 <br />4.8.多重class定义 <br />一个标签可以同时定义多个class。例如:我们先定义两个样式,第一个样式背景为#666;第二个样式有10 px的边框。 <br />.one{width:200px;background:#666;} <br />.two{border:10px solid #F00;} <br />在页面代码中,我们可以这样调用 <br /><div class=”one two”></div> <br />这样最终的显示效果是这个div既有#666的背景,也有10px的边框。是的,这样做是可以的,你可以尝试一下。 <br />4.9.使用子选择器(descendant selectors) <br />CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码: <br /><div id=subnav> <br /><ul> <br /><li class=subnavitem> <a href=# class=subnavitem>Item 1</a></li>> <br /><li class=subnavitemselected> <a href=# class=subnavitemselected> Item 1</a> </li> <br /><li class=subnavitem> <a href=# class=subnavitem> Item 1</a> </li> <br /></ul> <br /></div> <br />这段代码的CSS定义是: <br />div#subnav ul { /* Some styling */ } <br />div#subnav ul li.subnavitem { /* Some styling */ } <br />div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ } <br />div#subnav ul li.subnavitemselected { /* Some styling */ } <br />div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ } <br />你可以用下面的方法替代上面的代码 <br /><ul id=subnav> <br /><li> <a href=#> Item 1</a> </li> <br /><li class=sel> <a href=#> Item 1</a> </li> <br /><li> <a href=#> Item 1</a> </li> <br /></ul> <br />样式定义是: <br />#subnav { /* Some styling */ } <br />#subnav li { /* Some styling */ } <br />#subnav a { /* Some styling */ } <br />#subnav .sel { /* Some styling */ } <br />#subnav .sel a { /* Some styling */ } <br />用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。 <br /><br />4.10.不需要给背景图片路径加引号 <br />为了节省字节,我建议不要给背景图片路径加引号,因为引号不是必须的。例如: <br />background:url(images/***.gif) #333; <br />可以写为 <br />background:url(images/***.gif) #333; <br />如果你加了引号,反而会引起一些浏览器的错误。 <br />4.11.组选择器(Group selectors) <br />当一些元素类型、class或者id都有共同的一些属性,你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。 <br />例如:定义所有标题的字体、颜色和margin,你可以这样写: <br />h1,h2,h3,h4,h5,h6 { <br />font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif; <br />color:#333; <br />margin:1em 0; <br />} <br />如果在使用时,有个别元素需要定义独立样式,你可以再加上新的定义,可以覆盖老的定义,例如: <br />h1 { font-size:2em; } <br />h2 { font-size:1.6em; } <br />4.12.用正确的顺序指定链接的样式 <br />当你用CSS来定义链接的多个状态样式时,要注意它们书写的顺序,正确的顺序是::link :visited :hover :active。抽取第一个字母是LVHA,你可以记忆成LoVe HAte(喜欢讨厌)。为什么这么定义,可以参考Eric Meyer的《Link Specificity》。 <br />如果你的用户需要用键盘来控制,需要知道当前链接的焦点,你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置,如果你希望聚焦元素显示:hover效果,你就把:focus写在:hover前面;如果你希望聚焦效果替代:hover效果,你就把:focus放在:hover后面。 <br />4.13.清除浮动 <br />一个非常常见的CSS问题,定位使用浮动的时候,下面的层被浮动的层所覆盖,或者层里嵌套的子层超出了外层的范围。 <br />通常的解决办法是在浮动层后面添加一个额外元素,例如一个div或者一个br,并且定义它的样式为clear: both。 <br />4.14.横向居中(centering) <br />这是一个简单的技巧,但是值得再说一遍,因为我看见太多的新手问题都是问这个:CSS如何横向居中?你需要定义元素的宽,并且定义横向的margin,如果你的布局包含在一个层(容器)中,就象这样: <br /><!-- 你的布局这里开始 --> <br />你可以这样定义使它横向居中: <br />#wrap { <br />width:760px; /* 修改为你的层的宽度 */ <br />margin:0 auto; <br />} <br />但是IE5/Win不能正确显示这个定义,我们采用一个非常有用的技巧来解决:用text-align属性。就象这样: <br />body { <br />text-align:center; <br />} <br />#wrap { <br />width:760px; /* 修改为你的层的宽度 */ <br />margin:0 auto; <br />text-align:left; <br />} <br />第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ,第二个text-align:left;是将#warp中的文字居左。 <br />4.15.导入(Import)和隐藏CSS <br />因为老版本浏览器不支持CSS,一个通常的做法是使用@import技巧来把CSS隐藏起来。例如: <br />@import url(main.css); <br />然而,这个方法对IE4不起作用,这让我很是头疼了一阵子。后来我用这样的写法: <br />@import main.css; <br />4.16.针对IE的优化 <br />有些时候,你需要对IE浏览器的bug定义一些特别的规则,这里有太多的CSS技巧(Hacks),我只使用其中的两种方法,不管微软在即将发布的IE7 beta版里是否更好的支持CSS,这两种方法都是最安全的。 <br />1.注释的方法 <br />(a)在IE中隐藏一个CSS定义,你可以使用子选择器(child selector): <br />html>body p { <br />/* 定义内容 */ <br />} <br />(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏) <br />* html p { <br />/* declarations */ <br />} <br />(c)还有些时候,你希望IE/Win有效而IE/Mac隐藏,你可以使用反斜线技巧: <br />/* */ <br />* html p { <br />declarations <br />} <br />/* */ <br />2.条件注释(conditional comments)的方法 <br />另外一种方法,我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式,而不影响主样式表的定义。就象这样: <br /><!--[if IE]> <br /><link rel=stylesheet type=text/css href=ie.css /> <br /><![endif]--> <br /><br />4.17.调试技巧:层有多大? <br />当调试CSS发生错误,你就要象排版工人,逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色,这样就能很明显看到层占据多大空间。有些人建议用 border,一般情况也是可以的,但问题是,有时候border 会增加元素的尺寸,border-top和boeder-bottom会破坏纵向margin的值,所以使用background更加安全些。 <br />另外一个经常出问题的属性是outline。outline看起来象boeder,但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性,我所知道的只有Safari、OmniWeb、和Opera。 <br />4.18.CSS代码书写样式 <br />在写CSS代码的时候,对于缩进、断行、空格,每个人有每个人的书写习惯。在经过不断实践后,我决定采用下面这样的书写样式: <br />selector1, <br />selector2 { <br />property:value; <br />} <br />当使用联合定义时,我通常将每个选择器单独写一行,这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格,每个定义也单独写一行,分号直接在属性值后,不要加空格。 <br />我习惯在每个属性值后面都加分号,虽然规则上允许最后一个属性值后面可以不写分号,但是如果你要加新样式时容易忘记补上分号而产生错误,所以还是都加比较好。 <br />最后,关闭的大括号}单独写一行。 <br />空格和换行有助与阅读。 <br />推荐阅读: <br />http://www.jb51.net/article/15758.htm <br />http://portal.oss.org.tw/files/95/a/a6.pdf <br />http://en.wikipedia.org/wiki/XHTML <br />http://www.w3.org/TR/2000/REC-xhtml1-20000126/ <br />http://www.dreamdu.com/xhtml/function_xhtml11/ <br /><br />Css浏览器兼容性问题总结 <br /><br />CSS对浏览器的兼容性总结 <br />CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. 以下为我们工作中经常用到的或是遇到的问题。 <br />CSS技巧 <br />5.1.div的垂直居中问题 <br />vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 <br />5.2.margin加倍的问题 <br />设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; <br />例如: <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px* <div id="contentFtAD7" style="margin:10px auto; width:670px"><!-- 广告位:C-7 内容广告-670*40 --> <script src='/plus/ad_js.php?aid=23' language='javascript'></script></div><!--AD End--> <div class="c-relational mtb25 clearfix"> <h3 class="tit">相关文章<span class="triangle"></span></h3> <ul class="c-relational-comment"> <li><a target="_blank" class="c-r" href="/wangye/jiqiao/20140827/16325.html">HTTP头部信息解释分析(详细整理)</a></li> <li><a target="_blank" class="c-r" href="/wangye/jiqiao/20140827/16318.html">评论回复弹出遮罩效果实现思路兼容ie 8/chr</a></li> <li><a target="_blank" class="c-r" href="/wangye/jiqiao/20140828/16607.html">新手建站入门教程④:如何绑定子目录</a></li> <li><a target="_blank" class="c-r" href="/wangye/jiqiao/20140828/16689.html">网站该在什么时候才应该放置广告</a></li> <li><a target="_blank" class="c-r" href="/wangye/jiqiao/20140827/16449.html">css如何实现自定义更为美观的链接提示效果</a></li> <li><a target="_blank" class="c-r" href="/wangye/jiqiao/20140828/16675.html">flex程序Firefox下中文输入乱码的bug</a></li> </ul> </div> </div> </div> <dl class="m-tag mtb20"><a href='/tags.php?/css/' target="_blank">css(78)</a><a href='/tags.php?/XTHML/' target="_blank">XTHML(1)</a><a href='/tags.php?/%CA%E9%D0%B4%B9%E6%B7%B6/' target="_blank">书写规范(1)</a></dl> <div class="pagecon tc clearfix ptb25" align="center"> <!--pageBar Star--><div class="pageBar fr "> </div><!--pageBar End--> </div> <div class="clearfix m-active"> <div class="usershare fl"> <span id="favorite" class="fav" added="0"><a href="/plus/stow.php?aid=16691" target="_blank">收藏文章</a></span> <span id="b_share_link" class="share">分享文章<div class="b_share_box bshare"></div></span> <a href="/plus/recommend.php?aid=16691" target="_blank"><span class="cwb">推荐文章</span></a> <span id="addError" class="error">文章纠错</span> </div> <div class="author-edit fr"><p class="author-name">作者:</p><p class="edit-name">编辑:admin</p></div> </div><!--m-active End--> </div> </div> <!--内容End--> <div id="hm_t_45354"></div> <!--ad--> <div class="c-Layout clearfix mt10" id="contentMidPicAD"><!-- 广告位:C-4 内容页内容中广告-670*40 --><script src='/plus/ad_js.php?aid=15' language='javascript'></script></div><!--AD End--> <div class="c-Layout clearfix plr1"> <div id="cyEmoji" role="cylabs" data-use="emoji"></div> </div><!--心情m-mood End--> <!----------------------------------------------------------------> <div class="c-Layout clearfix"> <div class="post-relate fl"> <h5>猜你喜欢:</h5> <ul style="height:180px;"><div id="hm_t_37138"></div></ul> </div> <div class="post-tags fr"> <h5>热点聚合:</h5> <ul class="mod-f14list ep-list-1 ep-list-nodot"><li><a href='/tags.php?/win7/'>win7</a></li><li><a href='/tags.php?/win8/'>win8</a></li><li><a href='/tags.php?/css/'>css</a></li><li><a href='/tags.php?/windows/'>windows</a></li><li><a href='/tags.php?/%CA%FD%BE%DD%BF%E2/'>数据库</a></li><li><a href='/tags.php?/flash/'>flash</a></li><li><a href='/tags.php?/MySQL/'>MySQL</a></li><li><a href='/tags.php?/xp/'>xp</a></li><li><a href='/tags.php?/CSS3/'>CSS3</a></li><li><a href='/tags.php?/%CE%C4%BC%FE/'>文件</a></li></ul> </div> </div> <!----------------------------------------------------------------> <div class="c-Layout bgf"> <h3>最新图文推荐</h3> <div class="slideImgList"> <div class="numberState"> <a onmouseout="goonSwitch()" onmouseover="pauseSwitch()" onclick="selectSwitch(1)" id="picA1" class="currON" href="javascript://">1</a> <a onmouseout="goonSwitch()" onmouseover="pauseSwitch()" onclick="selectSwitch(2)" id="picA2" href="javascript://" class="">2</a> <a onmouseout="goonSwitch()" onmouseover="pauseSwitch()" onclick="selectSwitch(3)" id="picA3" href="javascript://" class="">3</a> </div> <div class="roll" id="roll" style="margin-left:0px;padding-left:0px;width:668px;overflow:hidden;"> <ul id="picUL1" onmouseover="pauseSwitch()" onmouseout="goonSwitch()"> <li><div><a target="_blank" href="/news/dongtai/2016/0913/54223.html"><img src='/uploads/allimg/c160913/14IMW0B4Q0-1032M.jpg' border='0' width='121' height='91' alt='TC Disrupt创新峰会在旧金山开幕 软银等企业参会'></a></div><p><a target="_blank" href="/news/dongtai/2016/0913/54223.html">TC Disrupt创新峰会在旧金山开幕</a></p></li> <li><div><a target="_blank" href="/news/dongtai/2016/0913/54222.html"><img src='/uploads/allimg/c160913/14IMW0603420-J419.jpg' border='0' width='121' height='91' alt='当虹科技发布"当虹云" 将实现VR编转码无损压缩'></a></div><p><a target="_blank" href="/news/dongtai/2016/0913/54222.html">当虹科技发布"当虹云" 将实现VR</a></p></li> <li><div><a target="_blank" href="/news/dongtai/2016/0913/54221.html"><img src='/uploads/allimg/c160913/14IMW0494150-55001.jpg' border='0' width='121' height='91' alt='疑似全球首款VR手机遭曝光'></a></div><p><a target="_blank" href="/news/dongtai/2016/0913/54221.html">疑似全球首款VR手机遭曝光</a></p></li> <li><div><a target="_blank" href="/news/dongtai/2016/0913/54220.html"><img src='/uploads/allimg/c160913/14IMW044450-2cQ.jpg' border='0' width='121' height='91' alt='金山CEO张宏江将于12月1日退休 西山居CEO邹涛继任'></a></div><p><a target="_blank" href="/news/dongtai/2016/0913/54220.html">金山CEO张宏江将于12月1日退休 </a></p></li> </ul> <ul id="picUL2" onmouseover="pauseSwitch()" onmouseout="goonSwitch()" style="display:none;"> <li><div><a target="_blank" href="/news/dongtai/2016/0913/54218.html"><img src='/uploads/allimg/c160913/14IMW00Z3F-104307.jpg' border='0' width='121' height='91' alt='金山现任CEO张宏江将退休 西山居CEO继任'></a></div><p><a target="_blank" href="/news/dongtai/2016/0913/54218.html">金山现任CEO张宏江将退休 西山居</a></p></li> <li><div><a target="_blank" href="/news/dongtai/2016/0913/54216.html"><img src='/uploads/allimg/c160913/14IMW002A10-L225.jpg' border='0' width='121' height='91' alt='深度操作系统15.3正式发布:不仅颜值高 实力强劲!'></a></div><p><a target="_blank" href="/news/dongtai/2016/0913/54216.html">深度操作系统15.3正式发布:不仅</a></p></li> <li><div><a target="_blank" href="/news/dongtai/2016/0913/54215.html"><img src='/uploads/allimg/c160913/14IMVc35N0-33111.jpg' border='0' width='121' height='91' alt='魅族新机两连曝:处理器相当给力 预计年内发布!'></a></div><p><a target="_blank" href="/news/dongtai/2016/0913/54215.html">魅族新机两连曝:处理器相当给力</a></p></li> <li><div><a target="_blank" href="/news/dongtai/2016/0913/54214.html"><img src='/uploads/allimg/c160913/14IMV9495050-Q920.jpg' border='0' width='121' height='91' alt='有信宣布推出国内首款语音直播红豆Live'></a></div><p><a target="_blank" href="/news/dongtai/2016/0913/54214.html">有信宣布推出国内首款语音直播红</a></p></li> </ul> <ul id="picUL3" onmouseover="pauseSwitch()" onmouseout="goonSwitch()" style="display:none;"> <li><div><a target="_blank" href="/news/dongtai/2016/0913/54213.html"><img src='/uploads/allimg/c160913/14IMV9460b0-62A2.jpg' border='0' width='121' height='91' alt='高德地图发布北京中秋交通指南:14日中午开始拥堵'></a></div><p><a target="_blank" href="/news/dongtai/2016/0913/54213.html">高德地图发布北京中秋交通指南:</a></p></li> <li><div><a target="_blank" href="/news/dongtai/2016/0913/54211.html"><img src='/uploads/allimg/c160913/14IMV9403b0-45U9.jpg' border='0' width='121' height='91' alt='爱奇艺投资创维酷开 双方将在会员等方面展开合作'></a></div><p><a target="_blank" href="/news/dongtai/2016/0913/54211.html">爱奇艺投资创维酷开 双方将在会</a></p></li> <li><div><a target="_blank" href="/news/dongtai/2016/0913/54210.html"><img src='/uploads/allimg/c160913/14IMV93FT0-23540.jpg' border='0' width='121' height='91' alt='乐视Pro 3将发布: 首款8GB内存安卓机 霸气!'></a></div><p><a target="_blank" href="/news/dongtai/2016/0913/54210.html">乐视Pro 3将发布: 首款8GB内存安</a></p></li> <li><div><a target="_blank" href="/news/dongtai/2016/0913/54209.html"><img src='/uploads/allimg/c160913/14IMVWU110-1425N.jpg' border='0' width='121' height='91' alt='网易云音乐和MINI汽车联合启动“城市漫游者”计划'></a></div><p><a target="_blank" href="/news/dongtai/2016/0913/54209.html">网易云音乐和MINI汽车联合启动“</a></p></li> </ul> </div> </div> </div> <!--图文资讯 m-picshow End--> <div id="contentFtAD6" style="margin:10px auto; width:670px"><!-- 广告位:C-6内容底部 --><script src='/plus/ad_js.php?aid=22' language='javascript'></script></div> <div class="c-Layout clearfix " id="pinglun"><h3>参与评论</h3> <div class="pd10"> <a id="changyan_area"></a> <div id="SOHUCS"></div> <script>(function(){ var appid = 'cyrgO0zwX', conf = 'prod_d05b8c49f1d5d13af8acc781fd7c9d6e'; var doc = document, s = doc.createElement('script'), h = doc.getElementsByTagName('head')[0] || doc.head || doc.documentElement; s.type = 'text/javascript'; s.charset = 'utf-8'; s.src = 'http://assets.changyan.sohu.com/upload/changyan.js?conf='+ conf +'&appid=' + appid; h.insertBefore(s,h.firstChild); window.SCS_NO_IFRAME = true; })();</script> </div> </div><!--评论 m-comment End--> </div> <!--左内容 End --> <!--右内容 Star --> <div class="w300 fr"> <!--AD--><div id="contentRtPicAD" style="margin:0 auto"><!-- 广告位:C-1 内容右上侧 --><script src='/plus/ad_js.php?aid=12' language='javascript'></script></div> <!--tabTitleBar Star--> <div class="tabTitleBar mt20 bgf borderTred"> <div class="borderTnone pb10 YaHei"> <h3 class="titleMain titleMain-b red"><span class="txt pl10">大家感兴趣的内容</span></h3> <ul class="m-widget-post pt10 clearfix"> <li class="fl"> <p><a target="_blank" href="/os/Windows/windows10/2008/0501/45926.html"><img src='/uploads/allimg/c150811/1439224195425F-452J7_lit.jpg' border='0' width='130' height='100' alt='Win10下WP恢复工具无法安装怎么办?Win10 WP恢复工具无法安装解'></a></p> <p><a target="_blank" href="/os/Windows/windows10/2008/0501/45926.html">Win10下WP恢复工具无</a></p> </li> <li class="fl"> <p><a target="_blank" href="/chuangye/dianping/2015/1203/50021.html"><img src='/uploads/allimg/c151203/1449150JGF10-94191.jpg' border='0' width='130' height='100' alt='400家在线教育企业突围报告,未来互联网教育归宿何方?'></a></p> <p><a target="_blank" href="/chuangye/dianping/2015/1203/50021.html">400家在线教育企业突</a></p> </li> <li class="fl"> <p><a target="_blank" href="/os/Windows/windows8/2014/1023/21683.html"><img src='/uploads/allimg/c141023/1413cIT3520-10A30_lit.jpg' border='0' width='130' height='100' alt='Win8下IE10/IE11提示“您还没有安装flash播放器,请点击这里安装'></a></p> <p><a target="_blank" href="/os/Windows/windows8/2014/1023/21683.html">Win8下IE10/IE11提示</a></p> </li> <li class="fl"> <p><a target="_blank" href="/program/expression/20150205/25796.html"><img src='/uploads/allimg/c150205/14231100H103P-1bY_lit.jpg' border='0' width='130' height='100' alt='让editplus3 函数模板完全显示函数'></a></p> <p><a target="_blank" href="/program/expression/20150205/25796.html">让editplus3 函数模板</a></p> </li> <li class="fl"> <p><a target="_blank" href="/design/Illustrator/20071001/38603.html"><img src='/uploads/allimg/c150620/1434I5I2AJ0-2O325_lit.jpg' border='0' width='130' height='100' alt='Illustrator(AI)设计制作卡通立体效果的小熊图标实例教程'></a></p> <p><a target="_blank" href="/design/Illustrator/20071001/38603.html">Illustrator(AI)设计</a></p> </li> <li class="fl"> <p><a target="_blank" href="/os/LINUX/20140228/39501.html"><img src='/uploads/allimg/c150604/14333M32930350-15PV.jpg' border='0' width='130' height='100' alt='电脑店PE+CDlinux+360系统急救盘+Ubuntu+fedora+backtrack(上)('></a></p> <p><a target="_blank" href="/os/LINUX/20140228/39501.html">电脑店PE+CDlinux+360</a></p> </li> </ul> </div> </div> <!--tabTitleBar End--> <!--tabTitleBar Star--> <div class="tabTitleBar mt20 bgf borderTred"> <div class="borderTnone pb10 YaHei"> <h3 class="titleMain titleMain-b red"><span class="txt pl10">网友热评的文章</span></h3> <ul class="newsRankList newsRankList-in"><li><em class="no1">1</em><a target="_blank" href="/news/chuanmei/2014/0716/1.html" title="85球迷用百度狂揽350万:竞猜世界杯是技术活">85球迷用百度狂揽350万:竞猜世界杯是技术活</a></li> <li><em class="no2">2</em><a target="_blank" href="/news/chuanmei/2014/0716/2.html" title="能说会唱 多面手QQ浏览器HD全新体验">能说会唱 多面手QQ浏览器HD全新体验</a></li> <li><em class="no3">3</em><a target="_blank" href="/news/chuanmei/2014/0716/3.html" title="搜狗问问发布手机数据报告 售后问题超八成">搜狗问问发布手机数据报告 售后问题超八成</a></li> <li><em class="no4">4</em><a target="_blank" href="/news/chuanmei/2014/0716/4.html" title="锤子手机发售次日即被ROOT">锤子手机发售次日即被ROOT</a></li> <li><em class="no5">5</em><a target="_blank" href="/news/chuanmei/2014/0716/5.html" title="新闻客户端上的世界杯 一场品牌商完成KPI的盛宴">新闻客户端上的世界杯 一场品牌商完成KPI的盛宴</a></li> <li><em class="no6">6</em><a target="_blank" href="/news/chuanmei/2014/0716/6.html" title="Hostease美国虚拟主机五大优势适应建站需求">Hostease美国虚拟主机五大优势适应建站需求</a></li> <li><em class="no7">7</em><a target="_blank" href="/news/chuanmei/2014/0716/7.html" title="图吧导航iOSv5.7版发布新增行车安全功能">图吧导航iOSv5.7版发布新增行车安全功能</a></li> <li><em class="no8">8</em><a target="_blank" href="/news/chuanmei/2014/0716/8.html" title="汽车特卖平台征名活动启动 有重奖伺候">汽车特卖平台征名活动启动 有重奖伺候</a></li> <li><em class="no9">9</em><a target="_blank" href="/news/chuanmei/2014/0716/9.html" title="解读:百万美金收购域名背后的网络搜索行业">解读:百万美金收购域名背后的网络搜索行业</a></li> <li><em class="no10">10</em><a target="_blank" href="/news/chuanmei/2014/0716/10.html" title="蒙娜丽莎SEM战略布局搜狗平台,打造高质量流量">蒙娜丽莎SEM战略布局搜狗平台,打造高质量流量</a></li> </ul> </div> </div> <!--tabTitleBar End--> <div id="contentRightAD3" class="m-widget mt20"><!-- 广告位:内容右C-3中侧 --><script src='/plus/ad_js.php?aid=21' language='javascript'></script></div> <!--tabTitleBar Star--> <div class="tabTitleBar mt20 bgf borderTred"> <div class="borderTnone pb10 YaHei"> <h3 class="titleMain titleMain-b red"><span class="txt pl10">网友推荐的文章</span></h3> <ul class="m-widget-comment plr1"> <li class="f-cb"> <div class="u-num-con"> <h4><a target="_blank" href="/news/dongtai/2016/0913/54223.html">TC Disrupt创新峰会在旧金山开幕</a></h4> <div class="u-num"><em class="n1">1</a></em></div> <div class="u-img"><a target="_blank" href="/news/dongtai/2016/0913/54223.html"><img src='/uploads/allimg/c160913/14IMW0B4Q0-1032M.jpg' border='0' width='80' height='60' alt='TC Disrupt创新峰会在旧金山开幕 软银等企业参会'></div> <div class="txt"> <p><a href="/news/dongtai/2016/0913/54223.html" target="_blank">网易科技驻硅谷特约记者Amy An网易科技讯9月13日消息,TechCrunchDisrupt San Francis....</a></p> </div> </div> </li> <li class="f-cb"> <div class="u-num-con"> <h4><a target="_blank" href="/news/dongtai/2016/0913/54222.html">当虹科技发布"当虹云" 将实现VR</a></h4> <div class="u-num"><em class="n2">2</a></em></div> <div class="u-img"><a target="_blank" href="/news/dongtai/2016/0913/54222.html"><img src='/uploads/allimg/c160913/14IMW0603420-J419.jpg' border='0' width='80' height='60' alt='当虹科技发布"当虹云" 将实现VR编转码无损压缩'></div> <div class="txt"> <p><a href="/news/dongtai/2016/0913/54222.html" target="_blank">网易科技讯 9月13日消息,杭州当虹科技有限公司在京举行战略发布会,宣布旗下视频云服....</a></p> </div> </div> </li> <li class="f-cb"> <div class="u-num-con"> <h4><a target="_blank" href="/news/dongtai/2016/0913/54221.html">疑似全球首款VR手机遭曝光</a></h4> <div class="u-num"><em class="n3">3</a></em></div> <div class="u-img"><a target="_blank" href="/news/dongtai/2016/0913/54221.html"><img src='/uploads/allimg/c160913/14IMW0494150-55001.jpg' border='0' width='80' height='60' alt='疑似全球首款VR手机遭曝光'></div> <div class="txt"> <p><a href="/news/dongtai/2016/0913/54221.html" target="_blank">9月13日晚,有网友曝出两张疑似大镜头手机的照片,照片中只显示半截机身,与一般手机....</a></p> </div> </div> </li> <li class="f-cb"> <div class="u-num-con"> <h4><a target="_blank" href="/news/dongtai/2016/0913/54220.html">金山CEO张宏江将于12月1日退休 </a></h4> <div class="u-num"><em class="n4">4</a></em></div> <div class="u-img"><a target="_blank" href="/news/dongtai/2016/0913/54220.html"><img src='/uploads/allimg/c160913/14IMW044450-2cQ.jpg' border='0' width='80' height='60' alt='金山CEO张宏江将于12月1日退休 西山居CEO邹涛继任'></div> <div class="txt"> <p><a href="/news/dongtai/2016/0913/54220.html" target="_blank">据悉,张博士主要由于个人家庭原因,做出了在合同期满后引退的决定,于2016年12月1日....</a></p> </div> </div> </li> <li class="f-cb"> <div class="u-num-con"> <h4><a target="_blank" href="/news/dongtai/2016/0913/54219.html">网易新闻有意出售!融资20亿元</a></h4> <div class="u-num"><em class="n5">5</a></em></div> <div class="u-img"><a target="_blank" href="/news/dongtai/2016/0913/54219.html"><img src='/uploads/allimg/c160913/14IMW013Y50-122532.jpg' border='0' width='80' height='60' alt='网易新闻有意出售!融资20亿元'></div> <div class="txt"> <p><a href="/news/dongtai/2016/0913/54219.html" target="_blank">新闻资讯平台众多,网易新闻则一直凭借有态度的理念和火爆的跟帖闻名江湖,而现在,网....</a></p> </div> </div> </li> </ul> </div> </div> <!--tabTitleBar End--> <div id="guess" class="mtb20"><div id="hm_t_110649"></div></div> <div class="borderTred mt20"><div id="hm_t_110650"></div></div> <div class="mt20 newFixedBox" id="listRtPicAD2" style="position: fixed; top: 0px;"><!-- 广告位:列表/内容右下侧 --><script src='/plus/ad_js.php?aid=13' language='javascript'></script></div> </div><!--右内容 End --> </article></div><!--content End --> <!--footer Star --> <footer id="ov-footer"> <div class="ov-main"> <p> <a target="_blank" href="http://www.ovdown.com/aboutus.html">关于我们</a> - <a target="_blank" href="http://www.ovdown.com/contact.html">联系我们</a> - <a target="_blank" href="http://www.ovdown.com/ovsm.html">免责声明</a> - <a target="_blank" href="http://www.ovdown.com/ad.html">广告服务</a> - <a target="_blank" href="http://www.ovdown.com/sitemap.html">网站地图</a> - <a target="_blank" href="http://www.ovdown.com/ovtg.html">在线投稿</a> - <a target="_blank" href="http://www.ovdown.com/plus/flink.php">友情链接</a> - <a target="_blank" href="http://m.ovdown.com/">手机版</a> - <a target="_blank" href="http://weibo.com/ovdown"><span></span>教程之家</a> </p> <p>Copyright © 2010-2015 OVDOWN.COM Inc All Rights Reserved. <a href="http://www.ovdown.com/">OV教程之家</a> 版权所有 粤ICP备10201778号</p> <p>免责声明:本站部分资源来源于网络收集整理,如有侵权请联系我们,我们将会尽快处理,谢谢您的合作!</p> </div> </footer><!--footer End --> <script type="text/javascript" src="/templets/ov/js/footer.js"></script> <!-- /footer --></div> </body> </html> <script type="text/javascript" src="/templets/ov/js/content.js"></script>