W3C对于CSS及浏览器之间的兼容性问题解决方案

来源：互联网发布：小黑屋写作软件怎么样编辑：程序博客网时间：2024/05/29 19:13

文章来自：http://mayer.vokaa.com/archives/16

对于一个前端工作者，都知道符合W3C规范对于网页的跨浏览器工作带来好处，并能使网页在不同的浏览器之间互相兼容。

在这里我们一一列举互联网上所提供的解决办法及一些我个人的建议及实践案例。

其实，现在多数人都会使用Hack的方法解决，但如果DIV和CSS的结构清晰、合理，可能我们根本不需要这些Hack。

一、DOCTYPE 对CSS处理所带来的影响

严格模式（strict）的HTML 1.0 规范，使用时浏览器将相对严格，不允许使用任何表现形式的标识和属性，如在元素中直接使用bgcolor背景色属性等。

1<!doctype html public "-/w3c/dtd xhtml 1.0 strict/en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> 

过度模式（transitional）的HTML 1.0 规范，是指一种过渡类型，使用这种类型浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。

1<!doctype html public "-/w3c/dtd xhtml 1.0 transitional/en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 

框架模式（Frameset）的HTML 1.0 规范，是指一种过渡类型，框架页类型，如果网页使用了框架结构，就有必要使用这样的文档声明。

1<!doctype html public "-/w3c/dtd xhtml 1.0 frameset/en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd"> 

二、声明有效的文档语言

XHTML文档使用英文时：

1<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

XHTML文档使用中文时：

1<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">

XHTML文档使用繁体时：

1<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-HK">

三、DIV居中问题

使用下列代码，在IE和FF下，DIV都能有效居中。

1.warp{margin: 0px auto;}

五、在FF下设置 padding 或 margin 后，div会增加 height 和 width，但 IE 不会。

在CSS文件头部全局清空margin和padding的值，保证所有浏览器下都为0px即可。

1* { margin:0; padding:0; }

六、以下提供一段我平常自己使用的初始化CSS的公共CSS代码

 
01/* }}}}} 所有注释, 换行, 多余空格 程序自动过滤和压缩 {{{{{ */
02  
03/* 全局通用 */
04html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, code, em, img, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tr, th, td { border: none; margin: 0px; padding: 0px; list-style: none; } 
05  
06* { margin:0; padding:0; } 
07body{ margin:0px; padding:0px; font: 12px/1.6em Verdana, Geneva, sans-serif; color: #5c5c5c; text-align: center; } 
08  
09ol, ul {list-style: none;} 
10  
11/* 超链接全局定位 */
12a { font: 12px/1.6em Verdana, Geneva, sans-serif; color: #325e7f; text-decoration: none; } 
13a:hover { color: #F60; } 
14a img{ border: none; } 
15  
16/* 关键元素定位 */
17  
18    /* 解决在IE, firefox中, ul自带margin, padding, 清除为 0 以免变形*/
19    ul { margin: 0; padding: 0; } 
20    /* 如果想默认 li属性 
21       li { display: inline; float: left; } 
22    */
23    th { font-weight:400; } 
24  
25table { empty-cells: show; border-collapse:collapse; } 
26h1, h2, h3, h4, h5, h6 { font-size:1em; } 
27em, cite, strong, th { text-align: left; font-style: normal; } 
28  
29/* 输入控件定义 */
30input, textarea, select, radio { border: #a7a6aa 1px solid; color: #F60; font-size: 12px; margin:0; padding:0; } 
31input { height: 20px; } 
32/* 全局通用结束 */
33  
34table { border-collapse: collapse;border-spacing: 0; } 
35th { text-align: left; } 
36blockquote { quotes: none; } 
37blockquote:before,blockquote:after { content: ''; content: none; } 
38:link, :visited { text-decoration: none; } 
39td, th, div { word-break:break-all; word-wrap:break-word; } 
40form { display:inline; } 
41* { outline:none; } 
42  
43/* 清除浮动 代码 
44   将下面的 cc 改为您设置的层Class, 必须为大框架 */
45.cc:after { content: ".";display: block; height:0; clear: both; visibility: hidden; } 
46.cc { display: inline-block; } 
47* html .cc { height: 1%; } 
48.cc { display: block; } 
49/* 清除浮动 代码 */

好了，如果熟悉以上知识，解决IE和FF之间的问题看来已经差不多了。