繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 优先选择W3C推荐的标准规范
- CSS样式表
- css 块状元素和内联元素
- CSS 盒模型、块状元素与内联元素、CSS选择器
- css 浮动 理解Float的含义
- CSS 清除浮动Clear
- CSS 制作网页导航条(上)
- CSS 制作网页导航条(下)
- css 浮动(float)页面布局
- css 浮动(float)页面布局(下)
- css position 定位
- css 定位应用实例
- CSS Hack 有关浏览器兼容方面
- css 单图片按钮实例(css 图片变换)
- 使用X-UA-Compatible来设置IE浏览器兼容模式
- div overflow 超出隐藏属性使用说明
- CSS 使用规则总结
- div+CSS 兼容小摘
- CSS的inherit与auto使用分析
- 如何组织和注释CSS文件
- CSS样式按整洁易懂的结构组织
- CSS Prism 查看和编辑CSS中用到的颜色
CSS样式表 中的 优先选择W3C推荐的标准规范
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-13 浏览: 85 ::
收藏到网摘: n/a
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Virtual Library</title>
</head>
<body>
<p>Moved to <a href="example.org.http://example.org/">example.org</a>.</p>
</body>
</html>
XHTML的媒体类型是application/xhtml+xml ，而不是被大多设备都识别的text/html。增加xml头部声明还会造成IE6的quirks模式。总得来说，不是通用性很强的标准，使用的时候需要舍弃W3C的一些说明，改良后的应该是去掉xml声明，去掉媒体类型是application/xhtml+xml。不要给你们团队的开发造成不必要的困扰。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Introduction to HTML</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
</body>
</html>
我这里建议选择XHTML1.0标准的过渡型，如果你觉得XHTML过于花俏，不适用，HTML4.0的严格型也是很好的选择。HTML2.0已经被HTML5所取代，貌似看起来HTML4还是更具有向后的延续性。
其实上面所说的，也就是让W3C标准兼容终端，本应该终端按照W3C规范来开发解析器，但是种种的原意，终端各持己见，置W3C标准于不顾，而用户体验永远是第一位的。所以我们既然遵循标准，又要兼容终端。
我们不是标准的制定者，仅仅是实施者。就要考虑到项目的用户群体的特性，使用哪个终端多一点，显而易见，IE6的使用者仍然是大多数的。而且XHTML的严格定义方式不符合IE6的解析方式。通过权衡，即选择了W3C的推荐标准，虽然不是最新的，也兼容了现有终端的情况。
废话有点多了，概要的说明一下，选择一个适合项目大多数用户终端的标准，就HTML来说，4.0和xhtml1.0(改良后)都是不错的，但是要遵循HTML的结构化和语义化的要求，标签必须小写，闭合合理，嵌套正确，摒弃表现型标记，结构代码和表现代码分离。html1.0也可以编写成xml结构化的状态，即时没有xml声明。
CSS是最头疼的一块，如果严格按照W3C的css2.1规范，是很难兼容到IE系列浏览器的，特别是IE5.5 IE6两种，他们的解析和W3C相差甚远，所以CSS文件就必须进入hack，一种是css自身的私有属性和私有识别的代码，一种是IE浏览器特有的条件注释。细节就不多讲了。
如何既遵循标准，有兼容浏览器。那就是使用符合标准或者近似符合的浏览器作为主要开发软件，我建议安装有firebug插件的firefox作为第一个调试工具，等界面完成后，再调试其他浏览器，通过csshack或者条件注释，或者两者混搭。
理想的CSS兼容方案是，IE8,firefox这类通过Acid2 测试的浏览器使用标准的CSS代码，对没有通过测试的(就是IE系列)使用条件注释。例如：
<link rel="stylesheet" type="text/css" href="w3c.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie7lt.css" />
<![endif]-->
IE5.5的份额太少，可以考虑不兼容，兼容也主要是盒模型上的兼容。
理想的终究会存在很多现实的问题，比如IE的请求数过多，这是速度上的损失，代码维护不方面，同一个页面需要维护多个css文件，容易产生遗漏，避免这两个因素，css hack是做好的方式，主样式+私有样式解决兼容问题。
针对IE，常见bug的处理，haslayout的触发，放在标准CSS代码的后面。比如：
.clearfix:after{content:"\0020"; display:block; height:0; clear:both;}
.clearfix{*zoom:1;/*IE haslayout*/}
.box {float:left;margin-left:20px;_display:inline;/*双倍margin bug*/}
以后的浏览器对CSS的处理都采用W3C css2.1规范为主，私有属性为辅的策略，比如firefox的-moz-，IE8的-ms-，sefari和Chrome的-webkit-，Opera的-o-。
Javascript的标准兼容终端，我不是很清楚，基本的还可以看出，应用W3C的DOM操作文档树，而不是IE的document.all，摒弃IE的Jscript和VBscript。而且JS是可以去判断终端的，实例：
var ua = navigator.userAgent.toLowerCase();
var _isOpera = ua.indexOf('opera') != -1,
_isSafari = ua.indexOf('safari') != -1,
_isGecko = !_isOpera && !_isSafari && ua.indexOf('gecko') > -1,
_isIE = !_isOpera && ua.indexOf('msie') != -1,
_isIE6 = !_isOpera && ua.indexOf('msie 6') != -1,
_isIE7 = !_isOpera && ua.indexOf('msie 7') != -1;
通过终端的判断，给IE开小灶，解决IE 的兼容问题。
if (_isIE6) { // IE6
//语句
}
DHTML的历史远远大于现在所说的富客户端，很多经验组建都源自于早期的IE平台上的DHTML，如何保持JS主体代码的标准化和对IE系列的兼容，我自己还需要再积累积累。
最后，为什么很多团队要求将firefox作为开发环境，待代码完成后再进行IE系列的bug调试。就是基于这个思想，先按照W3C标准规范编码，再处理对标准支持不好的浏览器的。这样你才能理解为什么把IE的错误解析成为bug，而且页面工程师的教材也接近统一，那就是W3C的文档，那是我们权威的教材。向后，终端都尊重了W3C标准，IE8就是很好的例子。
评论 (0) All
