利用Dreamweaver MX 2004来检查浏览器的兼容性(一)

 

利用Dreamweaver MX 2004来检查浏览器的兼容性(一)

 

 

 

一、导言

 

设法严密的测定哪些tags、attributes和CSS properties能在你所支持的浏览器中生效是个耗费时间并且艰苦的任务。但是，由于Dreamweaver MX 2004的Browser Target Check特性使得你可以将精力集中在站点的建构上，让Dreamweaver来帮助我们完成那个任务（测定哪些tags、attributes和CSS properties能在你所支持的浏览器中生效）。

 

在这篇文章中，我将给你示范如何利用这个强大的特性来检查所有主流图形化浏览器的兼容性。

 

浏览器兼容性检查 Vs 代码合法性

了解检查浏览器的兼容性完全不同于验证你的代码是很重要的。在这篇文章中我将回顾浏览器的兼容性，也就是检查那些特定浏览器或特定版本的浏览器不支持的tags、attributes和 CSS constructs。

 

这个不同于Dreamweaver的检查器，此检查器用于检查依赖于一个特定标准，称为Document Type Definition (DTD)-文档类型定义，的标记语言（HTML/XHTML）的语法。通过阅读我的“Validating Code in Dreamweaver MX 2004 ” 这篇文章，你可以学到更多的在Dreamweaver MX 2004验证代码的知识。

 

需求：要完成此教程，你需要安装Dreamweaver MX 2004

 

 

二、选择检查哪种浏览器

 

检查你的页面错误的第一步是指明你要检查的代码所依赖的浏览器最低版本。

 

不管什么情况，你应该先在具有标准兼容性的浏览器（如Mozilla 或者 Opera）的大多数最近的版本中打开你的页面。你也应该在苹果机上利用浏览器（如Safari.）测试你的页面。就Internet Explorer来说，用Internet Explorer 6 (Windows)来打开页面是明智的做法。当你确定在最新版本的Internet Explorer中没有问题后，才开始测试你要支持的较低版本的浏览器。

 

Mac OS用户

在Mac OS平台上Safari 1.2极好的支持Web标准。就Internet Explorer 5.2 (Macintosh)来说很好，IE 5+是最早发布的标准兼容性浏览器，并且很好的支持CSS1，部分的支持CSS2。

 

Netscape 4

虽然Netscape 4已被淘汰，但是仍然有些用户（比如政府部门）在使用这个古老版本的浏览器。如果你需要支持Netscape 4.x ，请记住，它对CSS的支持非常薄弱。下面是一些适合Netscape 4.x用户的方法。

1.         只编写Netscape 4.x所支持的CSS代码。你可以利用Caio Chassot发明的Caio Hack来隐藏它所不支持的CSS代码，从而达到这一点。这儿是个Caio Hack的例子：

        .myclass  {
    
    

           /*/*/
    
    

         margin-bottom: 2em;
    
    

         /* */
    
    

         }
    
    

2.      利用@import指示符来隐藏Netscape 4.x不支持的CSS代码。

Netscape 4.x不能识别你的Web页面中通过@import方法附加的样式。因此，可以利用这个技术来隐藏这个令人讨厌的浏览的所不支持的CSS代码。反过来说，这带给你两者之中任何一个的灵活性。

l         利用图一所示的链接设置器给Netscape 4.x的用户提供器浏览器所支持的CSS样式。

图一 link element

l         只给Netscape 4.x的用户提供不带任何CSS样式的（页面）内容。

 

利用@import指示符装载CSS样式

按照下面的步骤利用@inport指示符来附加外部文件：

1.         打开CSS样式面板（选择 窗口 -> CSS样式）

2.         单击“附加CSS样式”按钮（原文为：Click the New Style button）

3.         找到你要附加的CSS样式文件

4.         选择“import”单选按钮，如图二所示

    

图二 利用@import指示符装载CSS样式

 

按照下面的步骤利用Link方法附加外部CSS文件

1.         打开CSS样式面板

2.         单击“附加CSS样式”按钮

3.         浏览你要附加的CSS样式文件

4.         选择“link”单选按钮

 

(未完待续)

不当之处,尽请指出、批评。

E-mail：xmanceo@yahoo.com.cn

 

 

相关文章:

    利用Dreamweaver MX 2004来检查浏览器的兼容性(二)

    利用Dreamweaver MX 2004来检查浏览器的兼容性(三)