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

最新推荐文章于 2024-01-24 17:44:53 发布

转载最新推荐文章于 2024-01-24 17:44:53 发布 · 514 阅读

文章标签：

#浏览器 #css #c #xhtml #html

html 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了如何通过正确的DOCTYPE声明、文档语言设定、CSS样式重置等手段，实现网页在不同浏览器间的良好兼容性。

对于一个前端工作者，都知道符合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`	`<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en">`

XHTML文档使用中文时：

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

XHTML文档使用繁体时：

`1`	`<htmlxmlns="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.6emVerdana, Geneva, sans-serif;color: #5c5c5c;text-align: center; } 
 
   08  
 
   09ol, ul {list-style:none;} 
 
   10  
 
   11/* 超链接全局定位 */
 
   12a { font:12px/1.6emVerdana, 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: #a7a6aa1px 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/* 清除浮动 代码 */