各浏览器的默认CSS可以在这里http://www.iecss.com/找 到，贪心一下，把这些样式都保存了一份：

1. IE6(下载)
2. IE7(下载)
3. IE8(下载)
4. IE9(下载)
5. Firefox 3.6.3(下载)
6. Webkit (r57042) (下载)
7. Opera 10.51(下载)

当然我们还可以找到更老的一些浏览器默认样式：

• Firebird 0.7
• Firefox 0.8
• Firefox 0.9
• Firefox 2.0.0.6
• Firefox 2.0.0.12
• Firefox 3.0b3
• Firefox 3.0.1
• Firefox 3.0.8
• Flock 0.9.0.2
• Flock 1.2.4
• Flock 1.2.7
• Konqueror 3.2.0
• Mozilla 1.0.1
• Mozilla 1.5
• Navigator 6.1
• Navigator 7.1
• Navigator 8.1
• Navigator 9.0b3
• Safari 3.0.4
• Safari x
• Safari 3.1.2
• SeaMonkey 1.1.2

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 打败 IE 的葵花宝典：CSS Bug Table
• 小议使用“完整”的CSS的缺点
• PNG透明兼容IE6的几种方法
• IE不支持的10个非常有用的CSS属性
• IE8面向Web开发人员的功能改进
• CSS在IE6中的bug修正技巧
• 页面输出时一些常用的小技巧
• 面向对象的CSS
• 针对IE8正式版的CSS hack

Feed enhanced by Better Feed from Ozh

今天，趁着想完美公司的内部样式框架，把HasLayout.net的IE CSS Bug过了一遍。整理中收获了不少东西，一些官方的不足，也根据自己的知识升级了一下。当然，也顺利地升级了框架的一些内容，感觉甚爽。随后，便将一些值 得去看的Bug整理成一个列表，基于Alipay前端伟大的分享精神，分享出来以供团队工友们和大家参考。

同时，由于整理仓促，有些理解和表达不当和其他纰漏在所难免，还请大家帮忙更正。谢谢。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 让IE8兼容IE7
• 解决IE6背景图片不缓存的BUG
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 浏览器中样式的高度自适应
• 小议使用“完整”的CSS的缺点
• 如何高效在多个浏览器之间同步使用的5个工具技巧
• 各浏览器的默认CSS
• PNG透明兼容IE6的几种方法
• JavaScript操作Cookie，支持Firefox、IE、Netscape，暂不能支持opera
• IE不支持的10个非常有用的CSS属性

Feed enhanced by Better Feed from Ozh

每次打开Conimige2豪华版都会有新的面孔——新的背景颜色，新的主题图片，让使用者拥有一种美的享受。Conimige2 Lux，中文名“第二代N氧化碳浏览器豪华版”，属于myzchh.cn旗下Conimige网页浏览器家族中第三大成员，从历史版本 起，Conimige2 Lux一直追求最绚丽的浏览体验和最舒适的浏览方式，这也使Conimige2 Lux更加引人瞩目。同样的，其他功能也都非常完善，快速链接、缩略图最近浏览历史记录等应有尽有。Conimige2 Lux也拥有丰富的扩展及应用，方便使用者对浏览器进行功能的添加。

下边是官网给出的预览图：

官网地址：http://www.myzchh.cn/CbLux.htm

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 跨浏览器兼容性检查完全指南
• 让IE8兼容IE7
• 解决IE6背景图片不缓存的BUG
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 网页浏览器的发展简史
• 火狐浏览器：浏览数据新方式（附模拟图）
• 浏览器测试：家谱
• 浏览器中样式的高度自适应
• 未来的Firefox
• 搞笑漫画图解几大浏览器的区别

Feed enhanced by Better Feed from Ozh

目前国际主流的浏览器主要是以下五个：微软的IE，当年以捆绑方式占据超高市场份额，当之无愧却渐显疲态的老大；Firefox，势头强劲、功能齐全的后起之秀，IE的最大挑战者；Chrome，来自另一位互联网巨头Google的杰作，以轻量级和快捷著称，后来居上；Opera，号称最快的浏览器，在移动终端上也有着不俗表现；Safari，顶着苹果的金字招牌，Mac用户上网必备。

五个浏览器，各有特色，针对不同的需求，具体使用时也各有侧重。这里介绍5个技巧或工具，以最大限度地开发同步使用多个浏览器时的性能效率，让您更轻松自在地游走在它们之间。

一、在多台电脑上同步IE收藏夹

收藏夹同步是基本需求之一，但IE有限的扩展性使之至今仍缺乏一个堪称权威的同步工具领袖。好在通过借助一些第三方的同步工具，我们可以让IE的收藏夹在多台电脑之间同步。

以目前国内用户能正常使用的国产同步工具 DBank 为例（为什么不用 Dropbox 举例？你懂的…原理其实相同）。安装 DBank 后，将会像 Dropbox 一样，生成本地的同步专用文件夹。假设为：E:\我的DBank\ 。

打开注册表编辑器（开始->运行->REGEDIT回车），在HKEY_CURRENT_USER\Software \Microsoft\Windows\CurrentVersion\Explorer\User Shell Folders 中，修改 Favorites 的数值为 E:\我的DBank\ 。

这样，IE的收藏夹的保存位置就被指定在了 DBank 的同步文件夹下。

在所有需要同步IE收藏夹的电脑上执行以上操作。则它们将会共享同一个 DBank 账号下的同步档案，实现多台电脑之间的收藏夹同步。该方法适合大部分以文件夹为组织形式的同步软件客户端。

二、在不同浏览器之间同步书签

目前公认最好的工具当属 XMarks 这款浏览器插件（之前曾被关过一阵小黑屋，现在也放出来了）。支持在 IE、Firefox、Chrome、Safari之间同步，且允许在网页上直接访问这些同步的书签。

在使用 XMarks 之前，您需要注册一个用户账号。然后，就让它静静地为您工作吧。（同步控早先对 XMarks 的介绍）

三、快速导入/导出不同浏览器之间的书签

Transmute 是一个支持 IE、Firefox、Chrome、Opera、Safari，以及 Avant、Flock、Konqueror、Chromium，乃至社交网络如 Delicious 的强悍导入导出工具。使用时，简单地指定来源（导出数据）和目标（导入数据），则 Transmute 将会快速地为您进行导入导出操作，很快实现数据交换。

使用该工具可以与他人分享浏览器书签，且无需注册账号，下载直接使用。（国外网站的详尽介绍）

四、同时平铺显示多个浏览器

有时为了比较同一个页面在不同浏览器中的效果，需要同时打开多个浏览器并来回切换前后台。这时，将它们的窗口平铺起来，将更利于对比和发现问题。

当然，最快速的方法是右击任务栏，选择 横向平铺窗口 / 纵向平铺窗口。如果您用的是 Win7，那么又还有另一个方法：使用 Snap 这个功能。将窗口拖拽到页面左侧或右侧，带轮廓出现后松开鼠标，该窗口就被定位在指定位置。对其他窗口同样执行此操作，就实现了多个窗口排排坐吃果果的效果。对多浏览器对比尤其适用。（微软官网介绍及视频演示）

五、快速用其他浏览器打开当前页面

如果您觉得手动复制粘贴URL过于繁琐，那么 Firefox 的这款插件 —— Open With 将成为简化操作的得力助手。全数支持调用 IE、Chrome、Safari、Opera。

安装后，它可以依据设置，在 View 菜单、标签栏或是内容菜单中，增加其他浏览器的对应链接。点击后，就会自动调用其他浏览器打开当前的页面。Web开发人员应该内牛满面了吧？

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 让IE8兼容IE7
• 解决IE6背景图片不缓存的BUG
• 浏览器中样式的高度自适应
• 打败 IE 的葵花宝典：CSS Bug Table
• JavaScript操作Cookie，支持Firefox、IE、Netscape，暂不能支持opera
• IE9允许前端开发获取到页面性能数据
• Firefox跟IE在JavaScript中的七个不同表现
• CSS在IE6中的bug修正技巧
• 5个加快网页响应时间的方法
• 页面输出时一些常用的小技巧

Feed enhanced by Better Feed from Ozh

Xvfb: 主要就是通过内存计算模拟出图形界面，没有平常所见的操作界面，分为客户端和服务器

YSlow: 当Firefox浏览网页时，可以分析网站的页面（基于Yahoo 14条评分原则），并指出如何进行优化提高网站性能

ShowSlow:收集YSlow的测试结果并显示出来

Ubuntu：开源的Linux系统，界面越来越向Windows靠近

框架简介

对于前端的童鞋我相信YSlow已经耳熟能详了，基于雅虎的评分规则对页面进行评分的Firefox插件，从中我们可以看出我们页面上的很多不足， 并且可以知道我们如何改进和优化，配合将测试报告发送到本地的ShowSlow平台以提供给开发人员随时查看。在Xvfb的辅助下，这个框架最大的优点就是可以在无显示设备的环境下稳定运行！

环境配置

典型的LAMP配置，网上资料很多，当然你也可以点此围观

搭建本地ShowSlow测试平台

这个我之前在Windows Server 2003搭建过（点此围观），但是这次在Ubuntu下还是有所区别的（所有命令都在终端输入）

1. sudo mkdir /var/www/showslow (建立一个空文件夹)
2. sudo svn checkout http://showslow.googlecode.com/svn/trunk/ /var/www/showslow (将ShowSlow的源代码下载到本地，这一步会报错连接不上http://svn.facebook.com，首先要感谢国家，其次要感谢功夫网，最后我要说的是无视…)
3. sudo mv config.sample.php config.php (修改文件夹名)
4. sudo gedit config.php
5. 根据实际情况修改$db,$user,$pass可以根据实际情况修改
6. 按照上一步修改的数据创建相应的Mysql数据库

//以root用户权限进入mysql
mysql -uroot -p
//创建一个数据库，名字和第二步你填写的保持一致
create database ‘DBName‘;
//切换到新建的数据库
use ‘DBName’;
// 将ShowSlow文件夹的tables.sql（数据库表）导入到新建的数据库中，注意无分号
source /var/www/showslow/tables.sql
//查看下是否导入成功了，貌似有个表名叫ShowSlow2，汗
show tables;

自动化脚本

这个是我们这个框架最重要的部分，具体请参考Sergey Chernyshev的博客以及自动化脚本作者Aaron Kulick ，现在最新的Showslow的子文件夹automation有三个文件——monitor.sh (配置文件) test_harness.pl （自动化脚本） ReadMe（框架说明文件，强烈推荐各位童鞋仔细阅读，因为这关系到后面脚本的修 改问题）

Xvfb

sudo apt-get install xvfb

Xvfb :1 -screen 0 1152×864×24 +extension RANDR

我在此处发现报错：[dix] Could not init font path element /usr/share/fonts/X11/cyrillic, removing from list!

通过Google大神的帮助，解决办法很简单，安装这个需要的字体——sudo apt-get install xfonts-cyrillic

创建一份测试页面列表

sudo gedit /var/www/URLs （在Apache下新建一个URLs列表，注意每一个链接为单独的一行)

创建一份Firefox测试专用的Profiles

/usr/lib/firefox-3.6.3/firefox -profilemanager

首先我们要修改Firefox的application.ini文件最后一段，避免Firefox崩溃后发送报告

[Crash Reporter]

Enabled=0

其次就是修改测试专用的Profiles的prefs.js，这个很关键，要设置一些Firefox属性才能让测试更好的进行下 去，ShowSlow的论坛有推荐配置，（猛击这里）

gedit /home/eric/FFProfiles/prefs.js

## PREFS.JS RECOMMENDATIONS (AUTOMATION)

#do not let automated firefox manipulate the profile extensions (auto

update)

user_pref(“extensions.update.enabled”, false);

user_pref(“extensions.update.notifyUser”, false);

#disable session restore on crash (do not want stale/old tabs)

user_pref(“browser.sessionstore.resume_from_crash”, false);

#do not let javascript resize the window

user_pref(“dom.disable_window_move_resize”, true);

#do not let javascript manipulate context menus (automation)

user_pref(“pref.advanced.javascript.disable_button.advanced”, false);

#do not show me pop-up block messages (screenshot related)

user_pref(“privacy.popups.showBrowserMessage”, false);

#do not warn for weak SSL or mixed SSL/HTTP content:

user_pref(“security.warn_entering_weak”, false);

user_pref(“security.warn_viewing_mixed”, false);

#firebug prefs

user_pref(“extensions.firebug.allPagesActivation”, “on”);

user_pref(“extensions.firebug.net.enableSites”, true);

user_pref(“extensions.firebug.defaultPanelName”, “YSlow”);

user_pref(“extensions.firebug.previousPlacement”, 1);

#yslow prefs

user_pref(“extensions.yslow.autorun”, true);

user_pref(“extensions.yslow.beaconInfo”, “grade”);

user_pref(“extensions.yslow.beaconUrl”, “http://localhost/showslow/beacon/yslow/“);

user_pref(“extensions.yslow.optinBeacon”, true);

配置本地YSlow

1. 打开Firefox输入：about:config（我保证会很小心的）
2. filter中输入：yslow
3. 修改以下三条数据

extensions.yslow.beaconUrl = http://localhost/showslow/beacon/yslow/

如果测试和服务器不在同一机器上，请将localhost改成实际地址

extensions.yslow.beaconInfo = grade

extensions.yslow.optinBeacon = true

4. 重启Firefox，have fun

还等什么？开始你的测试之旅吧，查看测试报告的URL是：http://localhost/showslow/

在这个地方遇到了一个问题 就是所有配置都是正确的情况下，ShowSlow依然接收不到YSlow发送的测试数据，后来在RedHat的服务器上搭建环境同样遇到了这个问题，经过 SA白非童鞋的帮助查看Apache的报错日志（/var/log/apache2/error.log）发现罪魁祸首是脚本中需要的几个模块必须是 PHP5.2以上的版本，遂升级PHP至最新版本可解决问题。

test_harness.pl

这个脚本是用Perl语言写的，我也是刚接触这个语言，但是我还是推荐各位童鞋看看他的文件结构，老外写的代码阅读起来还是比较舒服，附带着大量注 释方便我这样的小白也能轻松理解每个函数的意义。我们主要需要用到的是display，profile，source这三个属性（具体作用ReadMe有 解释），可以参考下我运行这个脚本的方式：

perl test_harness.pl -display=:1 -source http://localhost/URLs -profile /home/eric/FFProfiles

Can’t locate POE.pm in @INC (@INC contains: /etc/perl /usr/local/lib/perl/5.10.1 /usr/local/share/perl/5.10.1 /usr/lib/perl5 /usr/share/perl5 /usr/lib/perl/5.10 /usr/share/perl/5.10 /usr/local/lib/site_perl .) at test_harness.pl line 100.
BEGIN failed–compilation aborted at test_harness.pl line 100.

这个问题纠结了我好几天，百思不得其解，关键还是我第一次使用Linux和Perl，对于很多报错信息都可以熟视无睹（请鄙视我），最后请教了 Sergey童鞋，才恍然大悟原来是没有安装POE（请再次鄙视我），解决办法参考如下：

sudo perl -MCPAN -e shell （sudo很关键啊，内牛满面）

cpan> install POE

如果提示YAML没有安装 (类似于XML的数据描述语言)

cpan>install YAML

cpan> exit

这个时候自动化脚本已经开始运行了，我们可以通过外部机器访问虚拟机搭建的ShowSlow查看测试结果 (Ubuntu使用ifconfig查看本机IP地址，注意虚拟机网卡要设置成Bridged方式)

monitor.sh

自动调用之前编写test_harness.pl脚本，当我们将调用test_harness的一些参数添加进monitor后使用Linux的 Cron就可以实现自动化测试了：）

注意将脚本文件夹的绝对路径赋值给Xvfb_PIDFILE，因为每次执行的时候系统会自动生成一个__xvfb.pid

2010-7-1日更新

在Ubuntu和RedHat环境搭建下的Showslow平台点击测试URL进入Detail Page发现“Measurements over time”和“YSlow measurements history”两个区域的图形绘制不出，自己找了很久一直没有头绪，只好求助于ShowSlow的作者Sergey…
1 确保config.php文件中的$showslow_base=http://localhost/showslow/
2 查看phpinfo()确保Apache的模块mod_rewrite加载并启用了

1 Enable mod_rewrite

sudo a2enmod rewrite ;

2 change all of ”AllowOverride none” to “AllowOverride All”

sudo vim /etc/apache2/sites-enabled/000-default ;

3 Restart apache2

sudo /etc/init.d/apache2 restart;

刷新一下页面图形是不是回来了：）

在实际工作中我们还遇到了一个不大不小的问题就是有些页面需要登录才能访问，而我们的测试环境又是全自动化的，所以在这里需要用到Firefox的 一个插件叫做Greasemonkey，可以执行JS脚本，这样只需要我们编写一个自动登录的小JS脚本，然后在Greasemonkey中设置那几个 URL需要使用这个脚本，这样每次访问需要登录的界面就会自动登录了。

参考文档（部分需要翻墙）：

http://developer.yahoo.com/performance/rules.html

http://en.wikipedia.org/wiki/Xvfb

http://developer.yahoo.com/yslow/

http://www.showslow.com/

http://www.ubuntu.com/

http://www.sergeychernyshev.com/blog/automating-yslow-and-pagespeed-using-xvfb/

http://www.linkedin.com/in/xiphoidindustries

http://groups.google.com/group/showslow/browse_thread/thread/5a2b19db7dfbefb7

–EOF–

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 13个浏览器测试和代码验证的方法/工具
• 跨浏览器兼容性检查完全指南
• 让IE8兼容IE7
• 解决IE6背景图片不缓存的BUG
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 美化你的Google阅读器
• 网页鼠标点击轨迹热图跟踪软件-ClickHeat
• 网页浏览器的发展简史
• 火狐浏览器：浏览数据新方式（附模拟图）
• 浏览器测试：家谱

Feed enhanced by Better Feed from Ozh

本文将更深入的研究当你输入一个网址的时候，后台到底发生了一件件什么样的事～
1. 首先嘛，你得在浏览器里输入要网址:

2. 浏览器查找域名的IP地址

导航的第一步是通过访问的域名找出其IP地址。DNS查找过程如下：

* 浏览器缓存 – 浏览器会缓存DNS记录一段时间。 有趣的是，操作系统没有告诉浏览器储存DNS记录的时间，这样不同浏览器会储存个自固定的一个时间（2分钟到30分钟不等）。
* 系统缓存 – 如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（windows里是gethostbyname）。这样便可获得系统缓存中的记录。
* 路由器缓存 – 接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。
* ISP DNS 缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。
* 递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会 有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。

DNS递归查找如下图所示：

DNS有一点令人担忧，这就是像wikipedia.org 或者 facebook.com这样的整个域名看上去只是对应一个单独的IP地址。还好，有几种方法可以消除这个瓶颈：

* 循环 DNS 是DNS查找时返回多个IP时的解决方案。举例来说，Facebook.com实际上就对应了四个IP地址。
* 负载平衡器 是以一个特定IP地址进行侦听并将网络请求转发到集群服务器上的硬件设备。 一些大型的站点一般都会使用这种昂贵的高性能负载平衡器。
* 地理 DNS 根据用户所处的地理位置，通过把域名映射到多个不同的IP地址提高可扩展性。这样不同的服务器不能够更新同步状态，但映射静态内容的话非常好。
* Anycast 是一个IP地址映射多个物理主机的路由技术。 美中不足，Anycast与TCP协议适应的不是很好，所以很少应用在那些方案中。

大多数DNS服务器使用Anycast来获得高效低延迟的DNS查找。

3. 浏览器给web服务器发送一个HTTP请求

因为像Facebook主页这样的动态页面，打开后在浏览器缓存中很快甚至马上就会过期，毫无疑问他们不能从中读取。

所以，浏览器将把一下请求发送到Facebook所在的服务器：

GET http://facebook.com/ HTTP/1.1
Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Host: facebook.com
Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]

GET 这个请求定义了要读取的URL： “http://facebook.com/”。 浏览器自身定义 (User-Agent 头)， 和它希望接受什么类型的相应 (Accept and Accept-Encoding 头). Connection头要求服务器为了后边的请求不要关闭TCP连接。

请求中也包含浏览器存储的该域名的cookies。可能你已经知道，在不同页面请求当中，cookies是与跟踪一个网站状态相匹配的键 值。这样cookies会存储登录用户名，服务器分配的密码和一些用户设置等。Cookies会以文本文档形式存储在客户机里，每次请求时发送给服务器。

用来看原始HTTP请求及其相应的工具很多。作者比较喜欢使用fiddler，当然也有像FireBug这样其他的工具。这些软件在网站优 化时会帮上很大忙。
除了获取请求，还有一种是发送请求，它常在提交表单用到。发送请求通过URL传递其参数(e.g.: http://robozzle.com/puzzle.aspx?id=85)。发送请求在请求正文头之后发送其参数。

像“http://facebook.com/”中的斜杠是至关重要的。这种情况下，浏览器能安全的添加斜杠。而像“http: //example.com/folderOrFile”这样的地址，因为浏览器不清楚folderOrFile到底是文件夹还是文件，所以不能自动添加 斜杠。这时，浏览器就不加斜杠直接访问地址，服务器会响应一个重定向，结果造成一次不必要的握手。

4. facebook服务的永久重定向响应

图中所示为Facebook服务器发回给浏览器的响应：

HTTP/1.1 301 Moved Permanently
Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,
pre-check=0
Expires: Sat, 01 Jan 2000 00:00:00 GMT
Location: http://www.facebook.com/
P3P: CP=”DSP LAW”
Pragma: no-cache
Set-Cookie: made_write_conn=deleted; expires=Thu, 12-Feb-2009 05:09:50 GMT;
path=/; domain=.facebook.com; httponly
Content-Type: text/html; charset=utf-8
X-Cnection: close
Date: Fri, 12 Feb 2010 05:09:51 GMT
Content-Length: 0

服务器给浏览器响应一个301永久重定向响应，这样浏览器就会访问“http://www.facebook.com/” 而非“http://facebook.com/”。

为什么服务器一定要重定向而不是直接发会用户想看的网页内容呢？这个问题有好多有意思的答案。

其中一个原因跟搜索引擎排名有 关。你看，如果一个页面有两个地址，就像http://www.igoro.com/ 和http://igoro.com/，搜索引擎会认为它们是两个网站，结果造成每一个的搜索链接都减少从而降低排名。而搜索引擎知道301永久重定向是 什么意思，这样就会把访问带www的和不带www的地址归到同一个网站排名下。

还有一个是用不同的地址会造成缓存友好性变差。当一个页面有好几个名字时，它可能会在缓存里出现好几次。
5. 浏览器跟踪重定向地址

现在，浏览器知道了 “http://www.facebook.com/”才是要访问的正确地址，所以它会发送另一个获取请求：

GET http://www.facebook.com/ HTTP/1.1
Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]
Accept-Language: en-US
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Cookie: lsd=XW[...]; c_user=21[...]; x-referer=[...]
Host: www.facebook.com

头信息以之前请求中的意义相同。
6. 服务器“处理”请求

服务器接收到获取请求，然后处理并返回一个响应。

这表面上看起来是一个顺向的任务，但其实这中间发生了很多有意思的东西- 就像作者博客这样简单的网站，何况像facebook那样访问量大的网站呢！

* Web 服务器软件
web服务器软件（像IIS和阿帕奇）接收到HTTP请求，然后确定执行什么请求处理来处理它。请求处理就 是一个能够读懂请求并且能生成HTML来进行响应的程序（像ASP.NET,PHP,RUBY…）。

举 个最简单的例子，需求处理可以以映射网站地址结构的文件层次存储。像http://example.com/folder1/page1.aspx这个地 址会映射/httpdocs/folder1/page1.aspx这个文件。web服务器软件可以设置成为地址人工的对应请求处理，这样 page1.aspx的发布地址就可以是http://example.com/folder1/page1。
* 请求处理
请求处理阅读 请求及它的参数和cookies。它会读取也可能更新一些数据，并讲数据存储在服务器上。然后，需求处理会生成一个HTML响应。

所 有动态网站都面临一个有意思的难点 -如何存储数据。小网站一半都会有一个SQL数据库来存储数据，存储大量数据和/或访问量大的网站不得不找一些办法把数据库分配到多台机器上。解决方案 有：sharding （基于主键值讲数据表分散到多个数据库中），复制，利用弱语义一致性的简化数据库。

委 托工作给批处理是一个廉价保持数据更新的技术。举例来讲，Fackbook得及时更新新闻feed，但数据支持下的“你可能认识的人”功能只需要每晚更新 （作者猜测是这样的，改功能如何完善不得而知）。批处理作业更新会导致一些不太重要的数据陈旧，但能使数据更新耕作更快更简洁。
7. 服务器发回一个HTML响应

图中为服务器生成并返回的响应：

HTTP/1.1 200 OK
Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,
pre-check=0
Expires: Sat, 01 Jan 2000 00:00:00 GMT
P3P: CP=”DSP LAW”
Pragma: no-cache
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
X-Cnection: close
Transfer-Encoding: chunked
Date: Fri, 12 Feb 2010 09:05:55 GMT

2b3Tn@[...]

整个响应大小为35kB，其中大部分在整理后以blob类型传输。

内容编码头告诉浏览器整个响应体用 gzip算法进行压缩。解压blob块后，你可以看到如下期望的HTML：

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
lang=”en” id=”facebook”>

…

关于压缩，头信息说明了是否缓存这个页面，如果缓存的话如何去做，有什么cookies要去设置（前面这个响应里没有这点）和隐私信息等 等。

请注意报头中把Content-type设置为“text/html”。报头让浏览器将该响应内容以HTML形式呈现，而不是以文件形式下 载它。浏览器会根据报头信息决定如何解释该响应，不过同时也会考虑像URL扩展内容等其他因素。
8. 浏览器开始显示HTML

在浏览器没有完整接受全部HTML文档时，它就已经开始显示这个页面了：

9. 浏览器发送获取嵌入在HTML中的对象

在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件。

下面是几个我们访问facebook.com时需要重获取的几个URL：

* 图片

http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif

http://static.ak.fbcdn.net/rsrc.php/zBS5C/hash/7hwy7at6.gif

…
* CSS 式样表

http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css

http://static.ak.fbcdn.net/rsrc.php/zANE1/hash/cvtutcee.css

…
* JavaScript 文件

http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js

http://static.ak.fbcdn.net/rsrc.php/z6R9L/hash/cq2lgbs8.js

…

这些地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等…

但 不像动态页面那样，静态文件会允许浏览器对其进行缓存。有的文件可能会不需要与服务器通讯，而从缓存中直接读取。服务器的响应中包含了静态文件保存的期限 信息，所以浏览器知道要把它们缓存多长时间。还有，每个响应都可能包含像版本号一样工作的ETag头（被请求变量的实体值），如果浏览器观察到文件的版本 ETag信息已经存在，就马上停止这个文件的传输。

试着猜猜看“fbcdn.net”在地址中代表什么？聪明的答案是”Facebook内容分发网络”。Facebook利用内容分发网络 （CDN）分发像图片，CSS表和 JavaScript文件这些静态文件。所以，这些文件会在全球很多CDN的数据中心中留下备份。

静态内容往往代表站点的带宽大小，也能通过CDN轻松的复制。通常网站会使用第三方的CDN。例如，Facebook的静态文件由最大的 CDN提供商Akamai来托管。

举例来讲，当你试着ping static.ak.fbcdn.net的时候，可能会从某个akamai.net服务器上获得响应。有意思的是，当你同样再ping一次的时候，响应的 服务器可能就不一样，这说明幕后的负载平衡开始起作用了。
10. 浏览器发送异步（AJAX）请求

在Web 2.0伟大精神的指引下，页面显示完成后客户端仍与服务器端保持着联系。

以 Facebook聊天功能为例，它会持续与服务器保持联系来及时更新你那些亮亮灰灰的好友状态。为了更新这些头像亮着的好友状态，在浏览器中执行的 JavaScript代码会给服务器发送异步请求。这个异步请求发送给特定的地址，它是一个按照程式构造的获取或发送请求。还是在Facebook这个例 子中，客户端发送给http://www.facebook.com/ajax/chat/buddy_list.php一个发布请求来获取你好友里哪个 在线的状态信息。

提起这个模式，就必须要讲讲”AJAX”– “异步JavaScript 和 XML”，虽然服务器为什么用XML格式来进行响应也没有个一清二白的原因。再举个例子吧，对于异步请求，Facebook会返回一些 JavaScript的代码片段。

除了其他，fiddler这个工具能够让你看到浏览器发送的异步请求。事实上，你不仅可以被动的做为这些请求的看客，还能主动出击修改和重 新发送它们。AJAX请求这么容易被蒙，可着实让那些计分的在线游戏开发者们郁闷的了。（当然，可别那样骗人家~）

Facebook聊天功能提供了关于AJAX一个有意思的问题案例：把数据从服务器端推送到客户端。因为HTTP是一个请求-响应协议，所 以聊天服务器不能把新消息发给客户。取而代之的是客户端不得不隔几秒就轮询下服务器端看自己有没有新消息。

这些情况发生时长轮询是个减轻服务器负载挺有趣的技术。如果当被轮询时服务器没有新消息，它就不理这个客户端。而当尚未超时的情况下收到了 该客户的新消息，服务器就会找到未完成的请求，把新消息做为响应返回给客户端。
总结一下

希望看了本文，你能明白不同的网络模块是如何协同工作的

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• Web Storage全解析
• 10 个提高开发效率的 Chrome 插件
• 默认Web字体样式
• 页面元素的两种表达状态：常态，暂态
• 迈过社会化网络：互联网的新时代
• 跨浏览器兼容性检查完全指南
• 设计中的色彩：黑色
• 设计中的色彩：白色
• 让IE8兼容IE7
• 解码 Web 开发语言

Feed enhanced by Better Feed from Ozh

长期以来，为了改善站点的用户体验，我们一直都是在页面顶端加上一个 (new Date()).getTime() 来获取用户打开页面的时间，使用httpwatch来分析页面打开的解释时间。httpwatch虽然强大，但是还是无法让我们深入到用户的环境去了解用户打开页面前的一些情况，例如:DNS解释时间，请求和响应时间，以及更加深入的页面渲染时间等重要信息。这些信息对用 户环境分析是至关重要的。

如今，这个情况即将改变，微软的IE9将给前端开发们提供有力的性能分析接口让我们能够深入分析页面的性能，这就是强大的msPerformance接 口。这个接口其实是基于HTML5草案Web Timing的定义来开发的（有意思的是这个接口是google提供的，chrome目前还没支持，IE9先行了）。

我们来看看通过Web Timing我们可以获取到什么数据

window.msPerformance.navigation

{

requestCount : 76

type : 0

startTime : 1277821481923

redirectedCount : 5

uniqueDomains : 31

}

window.msPerformance.timingMeasures

{

request : 22

domContentLoaded : 342

response : 10

firstPaint : 29

domInteractive : 342

msStyleContentLoaded : 342

fetch : 459

domComplete : 342

load : 89

connect : 3

}

window.msPerformance.timing

{

domLoading : 1277821481950

responseEnd : 1277821481960

navigationStart : 1277821481923

fetchStart : 1277821481923

msStyleContentLoaded : 1277821482293

firstPaint : 1277821481952

fullyLoaded : 0

requestStart : 1277821481927

loadEnd : 1277821482383

unloadStart : 1277821481923

}

通过这些数据我们可以更加深入得分析页面的性能和用户的网络环境，提供更加好的差异化服务。

到这里下载 IE9预览版

发现IE9pre3的console列出的接口不全，直接用调试器把这个接口和方法全部列出来了，更加直观

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 让IE8兼容IE7
• 解决IE6背景图片不缓存的BUG
• 浏览器中样式的高度自适应
• 打败 IE 的葵花宝典：CSS Bug Table
• 如何高效在多个浏览器之间同步使用的5个工具技巧
• JavaScript操作Cookie，支持Firefox、IE、Netscape，暂不能支持opera
• Firefox跟IE在JavaScript中的七个不同表现
• 跨浏览器兼容性检查完全指南
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 网页浏览器的发展简史

Feed enhanced by Better Feed from Ozh

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 打败 IE 的葵花宝典：CSS Bug Table
• 各浏览器的默认CSS
• PNG透明兼容IE6的几种方法
• IE不支持的10个非常有用的CSS属性
• IE8面向Web开发人员的功能改进
• CSS在IE6中的bug修正技巧
• 页面输出时一些常用的小技巧
• 面向对象的CSS
• 针对IE8正式版的CSS hack

Feed enhanced by Better Feed from Ozh

sessionStorage与localStorage

Web Storage实际上由两部分组成：sessionStorage与localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也 随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

为什么选择Web Storage而不是Cookie？

与Cookie相比，Web Storage存在不少的优势，概括为以下几点：

1. 存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。

2. 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。

3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。

4. 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。

兼容性如何？

接下来的各种测试是在以下浏览器中进行的：IE8、Firefox3.6、Chrome5、Safari4、Opera10，事实证明各个浏览器在 API方面的实现基本上一致，存在一定的兼容性问题，但不影响正常的使用。

sessionStorage测试

本节主要针对sessionStorage的一些特性进行了测试，测试的重点在于各个浏览器对于session的定义以及跨域情况。测试方法很简 单：打开页面A，在页面A中写入当前的session数据，然后通过页面A中的链接或按钮使用不同的方式进入下页面 B，如果页面B中能够访问到页面A中的数据则说明浏览器将当前情况的页面A、B视为同一个session。测试的具体结果如表1：

表1 sessionStorage兼容性测试

从表1中可以看出，处于安全性考虑所有浏览器下session数据都是不允许跨域访问的，包括跨子域也是不允许的。其他方面主流浏览器中的实现较为 一致。

API测试

方法包括以下几个：

setItem(key,value)、removeItem(key)、getItem(key)、clear()、key(index)；

属性包括length、remainingSpace(非标准)。不过存储数据时可以简单的使用localStorage.key=value的方 式。

测试地址为：http://varnow.org/pages/html5/web_storage/local/localStorage.html

测试结果另人满意，标准中定义的接口在各个浏览器中都已实现，此外IE8下新增了一个非标准的remainingSpace属性，用于获取存储空间 中剩余的空间。结果如表2：

表2 API测试

此外关于setItem(key,value)方法中的value类型，理论上可以是任意类型，不过实际上浏览器会调用value的 toString方法来获取其字符串值并存储到本地，因此如果是自定义的类型则需要自己定义有意义的toString方法。

事件

标准的事件为onstorage，当存储空间中的数据发生变化时触发。此外，IE8中新增了一个onstoragecommit事件，当数据写入的 时候触发。onstorage事件中的事件对象应该支持以下属性：

The key attribute represents the key being changed.
The oldValue attribute represents the old value of the key being changed.
The newValue attribute represents the new value of the key being changed.
The url attribute represents the address of the document whose key changed.
The storageArea attribute represents the Storage object that was affected.

对于这一标准的实现，webkit内核的浏览器（Chrome、Safari）以及Opera是完全遵循标准的，IE8则只实现了 url，Firefox下则均未实现。

测试地址为：http://varnow.org/pages/html5/web_storage/local/event.html

具体结果见表3。

表3 onStorage事件对象属性测试

此外，不同的浏览器事件注册的方式以及对象也不一致，具体如表4。

表4 onStorage事件注册对象

缺陷与不足

Web Storage的缺陷主要集中在其安全性方面，具体体现在以下两点：

1. 浏览器会为每个域分配独立的存储空间，即脚本在域A中是无法访问到域B中的存储空间的，但是浏览器却不会检查脚本所在的域与当前域是否相同。即在域B中嵌 入域A中的脚本依然可以访问域B中的数据。测试地址：http://varnow.org/pages/html5/web_storage/local/corss_domain_js_access.html

2. 存储在本地的数据未加密而且永远不会过期，极易造成隐私泄漏。也许需要像保存密码一样询问用户是在用私人电脑还是公共电脑来决定是否将数据保存在本地。

跨页面通讯示例

示例地址：http://varnow.org/pages/html5/web_storage/app/play.html

玩法很简单：选择 打开多个窗口，页面会自动打开并定位4个新窗口，小球会在多个窗口间运动，在小球运动的过程中可以拖动窗口或者打开新的窗口来控制小球进入新的区域。

实现原理：每个新打开的窗口会将自己的坐标以及大小写入localStorage，小球在运动到窗口边界时会检测小球将要进入的下一个窗口，如果找到该窗口则将小球坐标写入并通知新窗口接收小球。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 从输入网址到显示网页，这个过程都发生了什么？
• 10 个提高开发效率的 Chrome 插件
• 默认Web字体样式
• 页面元素的两种表达状态：常态，暂态
• 迈过社会化网络：互联网的新时代
• 跨浏览器兼容性检查完全指南
• 设计中的色彩：黑色
• 设计中的色彩：白色
• 让IE8兼容IE7
• 解码 Web 开发语言

Feed enhanced by Better Feed from Ozh

示例：
a{ background:url(normal.gif); } a:hover { background:url(hover.gif); }
如果为超级链接定义上述的css样式以实现鼠标悬浮时的动态效果，在firefox下是没有什么问题的，第一次加载之后，浏览器都会从缓存读取背景图片.

解决方法

具体的解决方法就是在页面中加入一段简单的javascript脚 本，告诉IE6：本地有背景图片的话就不要麻烦服务器了。 document.execCommand("BackgroundImageCache",false,true);

关于这段脚本的放置方式有两种：

1.使用CSS，在CSS中加入如下代码

html {}{ filter: expression(document.execCommand("BackgroundImageCache", false, true)); }

2.使用JS：

document.execCommand("BackgroundImageCache",false,true);

另外查了一下关于这个document.execCommand 的一些其他用法

2D-Position 允许通过拖曳移动绝对定位的对象。
AbsolutePosition 设定元素的 position 属性为“absolute”(绝对)。
BackColor 设置或获取当前选中区的背景颜色。
BlockDirLTR 目前尚未支持。
BlockDirRTL 目前尚未支持。
Bold 切换当前选中区的粗体显示与否。
BrowseMode 目前尚未支持。
Copy 将当前选中区复制到剪贴板。
CreateBookmark 创建一个书签锚或获取当前选中区或插入点的书签锚的名称。
CreateLink 在当前选中区上插入超级链接，或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL。
Cut 将当前选中区复制到剪贴板并删除之。
Delete 删除当前选中区。
DirLTR 目前尚未支持。
DirRTL 目前尚未支持。
EditMode 目前尚未支持。
FontName 设置或获取当前选中区的字体。
FontSize 设置或获取当前选中区的字体大小。
ForeColor 设置或获取当前选中区的前景(文本)颜色。
FormatBlock 设置当前块格式化标签。
Indent 增加选中文本的缩进。
InlineDirLTR 目前尚未支持。
InlineDirRTL 目前尚未支持。
InsertButton 用按钮控件覆盖当前选中区。
InsertFieldset 用方框覆盖当前选中区。
InsertHorizontalRule 用水平线覆盖当前选中区。
InsertIFrame 用内嵌框架覆盖当前选中区。
InsertImage 用图像覆盖当前选中区。
InsertInputButton 用按钮控件覆盖当前选中区。
InsertInputCheckbox 用复选框控件覆盖当前选中区。
InsertInputFileUpload 用文件上载控件覆盖当前选中区。
InsertInputHidden 插入隐藏控件覆盖当前选中区。
InsertInputImage 用图像控件覆盖当前选中区。
InsertInputPassword 用密码控件覆盖当前选中区。
InsertInputRadio 用单选钮控件覆盖当前选中区。
InsertInputReset 用重置控件覆盖当前选中区。
InsertInputSubmit 用提交控件覆盖当前选中区。
InsertInputText 用文本控件覆盖当前选中区。
InsertMarquee 用空字幕覆盖当前选中区。
InsertOrderedList 切换当前选中区是编号列表还是常规格式化块。
InsertParagraph 用换行覆盖当前选中区。
InsertSelectDropdown 用下拉框控件覆盖当前选中区。
InsertSelectListbox 用列表框控件覆盖当前选中区。
InsertTextArea 用多行文本输入控件覆盖当前选中区。
InsertUnorderedList 切换当前选中区是项目符号列表还是常规格式化块。
Italic 切换当前选中区斜体显示与否。
JustifyCenter 将当前选中区在所在格式化块置中。
JustifyFull 目前尚未支持。
JustifyLeft 将当前选中区所在格式化块左对齐。
JustifyNone 目前尚未支持。
JustifyRight 将当前选中区所在格式化块右对齐。
LiveResize 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观，而不是只在移动或缩放完成后更新。
MultipleSelection 允许当用户按住 Shift 或 Ctrl 键时一次选中多于一个站点可选元素。
Open 打开。
Outdent 减少选中区所在格式化块的缩进。
OverWrite 切换文本状态的插入和覆盖。
Paste 用剪贴板内容覆盖当前选中区。
PlayImage 目前尚未支持。
Print 打开打印对话框以便用户可以打印当前页。
Redo 重做。
Refresh 刷新当前文档。
RemoveFormat 从当前选中区中删除格式化标签。
RemoveParaFormat 目前尚未支持。
SaveAs 将当前 Web 页面保存为文件。
SelectAll 选中整个文档。
SizeToControl 目前尚未支持。
SizeToControlHeight 目前尚未支持。
SizeToControlWidth 目前尚未支持。
Stop 停止。
StopImage 目前尚未支持。
StrikeThrough 目前尚未支持。
Subscript 目前尚未支持。
Superscript 目前尚未支持。
UnBookmark 从当前选中区中删除全部书签。
Underline 切换当前选中区的下划线显示与否。
Undo 撤消。
Unlink 从当前选中区中删除全部超级链接。
Unselect 清除当前选中区的选中状态。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 让IE8兼容IE7
• 浏览器中样式的高度自适应
• 打败 IE 的葵花宝典：CSS Bug Table
• 如何高效在多个浏览器之间同步使用的5个工具技巧
• PNG透明兼容IE6的几种方法
• JavaScript操作Cookie，支持Firefox、IE、Netscape，暂不能支持opera
• IE9允许前端开发获取到页面性能数据
• IE6 死后即将大快人心的10件事
• IE6 很邪恶，但 IE6 的盒子模型更合理
• Firefox跟IE在JavaScript中的七个不同表现

Feed enhanced by Better Feed from Ozh

盒子模型

下图就是一个典型的盒子模型示意图

在内容区外面，依次围绕着 padding 区，border 区，margin 区，这一模型结构在所有主流浏览器都是一致的。通过盒子模型，我们可以为我们的内容设置边界，留白以及边距，盒子模型最典型的应用是这样：我们有一段内 容，可以为这段内容设置一个边框，为了让内容不至于紧挨着边框，可以设置 padding ，为了让这个盒子不至于和别的盒子靠得太紧，可以设置 margin。

到目前为止，一切都很完美，直到当我们想为这个盒子设置一个尺寸的时候。

IE6 和 W3C 标准浏览器对盒子模型的不同诠释

当我们试图为一个盒子设置尺寸的时候，问题出现了。IE6 和 W3C 标准浏览器对盒子模型有不同的解释，这个不同解释表现在盒子的尺寸上，下图是两种类型的浏览器对盒子尺寸的不同解释示意图：

可以看出，IE6 盒子模型中，盒子的尺寸包含了内容区，padding， border 和 margin 这四个部分，而 W3C 的盒子模型中，盒子的尺寸只包含内容区，padding，border 和 margin 被排除在盒子尺寸之外。

为什么 IE6 的盒子模型更合理

在现实世界中，我们描述一个物理盒子的时候，如果谈到尺寸，是不会只计算其盛放的物体的尺寸的，我们还会算上空隙与盒体本身。拿集装箱装箱为例，我 们有 100 只花瓶，每只花瓶用1个纸盒包装，为了防止花瓶破碎，我们在花瓶周围塞上泡沫，这相当于 padding，纸盒的外围纸板相当于 border，在装集装箱的时候，为了防止纸盒之间相互碰撞，纸盒之间塞上稻草，这相当于 margin，很显然，我们向货运公司报告我们货物尺寸的时候，是要将整个纸盒的尺寸，连同纸盒之间需要塞稻草的空隙都告诉他们的，倘若只报告花瓶的尺 寸，货运公司是没有办法装箱的。

再举一个例子，假若我们有一面墙，要在上面挂10幅油画，油画是用相框裱糊的，相框的边框相当于 border，油画和边框之间的距离相当于 padding，相框之间的间隔相当于 margin，这个例子和 Web 布局设计已经很接近了，对任何人来说，使用 IE6 的盒子模型，将整个相框，包括油画当做一个整体更容易布局，当你知道了整个相框的尺寸后，不必再去考虑 padding, border, margin 这个因素的影响，每个相框就是一个整体，至于 padding, border 与 margin，这是浏览器自己事，不需要设计者去关心。

在具体的 Web 设计中

在具体 Web 设计中，尤其牵扯到复杂网格布局的时候，IE6 的盒子模型更容易控制，我们不妨看看以下几个设计场景。

1. 面板式界面设计

页面上包含几个面板，比如一个登录面板，一个最新新闻面板，一个投票面板，这类设计典型的做法是，用背景图的方式，首先逐个设计出这些面板的外观 图，将需要用具体内容替换的地方空着，这些面板，无非就是一些使用面板外观图片做背景图的盒子，然后，在这些盒子里面，放上具体的内容，使用 padding 控制内容的摆放位置，使用 margin 调整面板本身的摆放位置，由于面板的尺寸是固定的，我们依此确立了盒子的尺寸之后，就无需再关心尺寸问题，然后，不论你怎样调整 padding 和 margin，都不会影响面板本身的结构。这是 IE6 盒子模型。

而在 W3C 的盒子模型中，调整 padding 和 margin ，都会影响盒子的尺寸，你在调整内容摆放位置的同时，极有可能打乱面板本身的结构。

2. 百分比级尺寸 + 像素级边界问题

W3C 盒子模型在设计中最让人头疼的是，假如你有一个不确定宽度的容器，想在里面放置两个同样大小的盒子，最合理的的做法当时是设置每个盒子的宽度为 50%，这样，不管你的容器宽度为多大，这两个盒子总能自动适应这个宽度，然而，前提是你不要设置任何 padding 或 border，而，现实中，为了防止两个盒子中的内容互相挨得太近，你肯定要设置 padding，一旦设置了 padding，就会发现你的容器被撑破了。

当然你会说，每个盒子的宽度不要设为 50%，可以设为 45%，然后为每个盒子再加一个 5% 的 padding，这是一个解决办法，但我们在设计中经常有这样的习惯，虽然一段内容的宽度可能不确定，但我们总喜欢它拥有固定 padding，我们并不希望 padding 自动适应，况且，在很多时候，我们希望为一个自适应宽度的盒子，设置一个 1 像素的 border，在这种情形，W3C 盒子模型将陷入困境。

而遇到这种情形，IE6 盒子模型不需要任何周折，你只管将每个盒子的宽度设置为 50%，它们会自动适应容器的宽度，然后，不管你你怎样设置 padding 和 border，都不会撑破你的容器。

W3C 在盒子模型上迷途知返

虽然 W3C 永远都不会承认，但他们显然意识到了这个问题，重新定义盒子模型是不可能了，所以，在 CSS3 中，我们看到了下面这个属性：

box-sizing

box-sizing 有两个可选值，一个是默认的 content-box 一个是 border-box，选用后者，盒子模型将按 IE6 的方式进行处理。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 解决IE6背景图片不缓存的BUG
• PNG透明兼容IE6的几种方法
• IE6 死后即将大快人心的10件事
• 10条兼容 IE6 的修复
• 跨浏览器兼容性检查完全指南
• 让IE8兼容IE7
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 网页浏览器的发展简史
• 火狐浏览器：浏览数据新方式（附模拟图）
• 浏览器测试：家谱

Feed enhanced by Better Feed from Ozh

前文给大家奉献上的是Firefox中的世界杯：Firefox世界杯主题和插件，这里写上的是Chrome中的世界杯，大家拍板。

安装完成后，首先会让你选择支持的队伍，如果你没有什么倾向性的话可以选择 All Teams 所有队伍（别找了，没中国队）。之后点击扩展图标就可以在弹出窗口中查看你所关注球队的最新消息以及比赛预告了，更棒的是这个扩展还有 Live 现场直播功能，不过现在第一场比赛还没有开始，我们也还不知道这个 Live 是什么样子。

Google 当然也没有闲着，他们为32支参赛球队分别 设计了 Chrome 主题。换上你所热爱的球队的主题，用扩展关注他们的最新消息，宅男也可以享受世界杯

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 跨浏览器兼容性检查完全指南
• 让IE8兼容IE7
• 解决IE6背景图片不缓存的BUG
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 网页浏览器的发展简史
• 火狐浏览器：浏览数据新方式（附模拟图）
• 浏览器测试：家谱
• 浏览器中样式的高度自适应
• 未来的Firefox
• 最绚丽的网页浏览器——Conimige2 Lux

Feed enhanced by Better Feed from Ozh

另外，使用chrome的朋友请往这边走：世 界杯！世界杯！快来安装官方 Chrome 扩展和主题吧

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 跨浏览器兼容性检查完全指南
• 让IE8兼容IE7
• 解决IE6背景图片不缓存的BUG
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 网页浏览器的发展简史
• 火狐浏览器：浏览数据新方式（附模拟图）
• 浏览器测试：家谱
• 浏览器中样式的高度自适应
• 未来的Firefox
• 最绚丽的网页浏览器——Conimige2 Lux

Feed enhanced by Better Feed from Ozh

语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。
false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

现在一般在使用的方法有一下几种：

1、css方法

css：

.pngs {
height: 90px;width: 90px;
background-image:url(icon_home.png)!important;  /* FF IE7 */
background-repeat: no-repeat; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’icon_home.png’);  /* IE6 */
_ background-image: none; /* IE6 */
}

xhtml：

<div class=”pngs”></div>

这种方法的优点就是使用简单方便，但是不能作为背景，且只能用作单个png图片的使用。如果要作为背景，需要新增加一个div层，并设置其 position:relative;

css
.png div{position:relative;}

xhml:

<div class=’png’>
<div>
CSS 背景PNG透明 及 链接失效问题解决
</div>
</div>

这种方法可以使用在那些png图片不多，且不需要repeat的情况下。

2、js方法

<script language=”JavaScript”>
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split(“MSIE”)
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var j=0; j<document.images.length; j++)
{
var img = document.images[j]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
{
var imgID = (img.id) ? “id=’” + img.id + “‘ ” : “”
var imgClass = (img.className) ? “class=’” + img.className + “‘ ” : “”
var imgTitle = (img.title) ? “title=’” + img.title + “‘ ” : “title=’” + img.alt + “‘ ”
var imgStyle = “display:inline-block;” + img.style.cssText
if (img.align == “left”) imgStyle = “float:left;” + imgStyle
if (img.align == “right”) imgStyle = “float:right;” + imgStyle
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle
var strNewHTML = “<span ” + imgID + imgClass + imgTitle
+ ” style=\”” + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
+ “(src=\’” + img.src + “\’, sizingMethod=’scale’);\”></span>”
img.outerHTML = strNewHTML
j = j-1
}
}
}
}
window.attachEvent(“onload”, correctPNG);
</script>

这种js先判断是否IE，然后判断ie版本，版本在6.0下则判定函数，给png的图片添加滤镜。

使用起来的确方便，无论多少图片都可以解决，但是依然无法repeat。

3、htc方法

htc相当于完全通过插件的方法修复的IE6的bug，功能强大，支持repeat，背景等功能，使用起来也很方便。

使用一个iepngfix.htc 文件，和一个透明的gif文件。

使用方法：

<!–[if lte IE 6]>
<style>.png{behavior:url(“jscss/iepngfix.htc”);}</style>  //在这里可以加入其他用到png图片的id或者class
<script type=”text/javascript” src=”jscss/iepngfix_tilebg.js”></script>
<![endif]–>

ps：如果需要repeat背景，往往需要设置这个div 宽度为100%。

使用见：http://qqgame.qq.com/act/a20091210prize4/index.htm ， 在其中有iepngfix.htc可下载。

总结这几种方法，第三种方法是最简单使用，且容易推广的方法，建议可以做个公共的地址，有产品需要，只需要应用这个公共地址就行了。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 解决IE6背景图片不缓存的BUG
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 打败 IE 的葵花宝典：CSS Bug Table
• 小议使用“完整”的CSS的缺点
• 各浏览器的默认CSS
• IE不支持的10个非常有用的CSS属性
• IE8面向Web开发人员的功能改进
• IE6 死后即将大快人心的10件事
• IE6 很邪恶，但 IE6 的盒子模型更合理
• CSS在IE6中的bug修正技巧

Feed enhanced by Better Feed from Ozh

1. 利用书签栏

书签工具栏是临时储存信息的好地方，比如你正在研究工作或者下次旅行的旅馆时，当你需要中断调研，就可以为此创建一个文件夹并将所有的链接投放进去。当你回到工 作时，右击这个文件夹并选择 > 打开所有标签页。

如图所示，我使用单字母缩略形式，所以文件夹不会占用太多空间。如果你需要更多空间，可以使用一 个叫做 Multirow Bookmarks Toolbar 的扩展。另一个扩展 Smart Bookmarks Bar 可以将单个链接缩减为格子网站的图标。

另一个储存链接的方法是使用扩展 Read It Later，相关评论请参照 Get The Awesome Read It Later Extension for Firefox 3。

2. 安装 Session Manager

除了将项目链接储存到文件夹，你还可以使用 Session Manager 扩展进行管理。它不仅能自动保存浏览会话，当你浏览器崩溃，你可以在保存的会话中单独打开，位 置是 > 工具 > Session Manager > Load Session…

因为在打开之前你可以对链接进行反选，可以对想要打开的链接有着完全的控制。这种方法甚至可以 从大量会话造成的浏览器崩溃中恢复链接。

一定要当心不要不小心替换了已保存会话的链接。

那么你已经暂时储存了大多数打开的标签页，让我们接着看看管理打开的标签页的方法。有许多的扩展 可以帮助你处理超载的标签栏，你可以组织你的标签页、嚷它们变得更小，或者扩展可获得的空间。下面介绍一些经过测试的扩展。

3. 使用 TabGroups Manager 对标签页分组

这是一个设计巧妙的扩展，它能让你按照话题 对标签页进行分组。缺点是它占用稍微多点的空间，一行显示标签页分类，第二行显示打开的标签页。

你不能为图中的 Start 标签重命名，当所有它下面的标签页 都关掉之后，会自动消失。要移除其他分类目录，点击分类目录栏最右侧的‘－’图标即可。

通过 > 工具 > 扩展 > TabGroups Manager 可以访问扩展的选项和个性化设置窗口。它有着大量的设置选项，例如 GroupBar 的布置、鼠标和键盘命令、会话备份设置以及更多。实际上，这篇文章应该专门写一篇文章来介绍其潜力。

4. 使用 Tabberwocky 锁定和保持某些标签页总是打开

如果有些标签页你需要一直打开着，你应该考 虑以下类似 Tabberwocky 的扩展，它可以锁定和保护你的标签页。它也可以支持多行标签栏、标签进度栏，以及高亮未读标签 页，几乎所有保证你控制标签页的有用功能应有尽有。

5. 使用 FaviconizeTab 节省标签栏 空间

要想节省标签栏空间，你可以使用 FaviconizeTab 扩展，用网站的图标来替换上下文菜单。上图是完整的 MakeUseOf 标签页（右侧）和图标化的 MakeUseOf 标签页（左侧）的比较。

另外一些值得考虑的扩展有 Tab Mix Plus、ColorfulTabs 或者 New Tab King。后面一个可以参考之前的评论 The Must-see “New Tab King” Addon for Firefox。

在某个特定时间你的浏览器打开多少标签页？你是否常常会使得 Firefox 打开太多的标签页？你是如何管理的呢？

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 火狐浏览器：浏览数据新方式（附模拟图）
• 浏览器中样式的高度自适应
• 未来的Firefox
• JavaScript操作Cookie，支持Firefox、IE、Netscape，暂不能支持opera
• Firefox跟IE在JavaScript中的七个不同表现
• 10款很有帮助的增强Firebug功能的Firefox扩展
• 跨浏览器兼容性检查完全指南
• 让IE8兼容IE7
• 解决IE6背景图片不缓存的BUG
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack

Feed enhanced by Better Feed from Ozh

1、使用一个声明
你必须经常在html网页头部放置一个声明，推荐使用严格的标准。例如

或者xhtml使用

最后你需要是IE6进入兼容模式，这已经足够兼容的了。

2、使用position: relative
设置一个标签position: relative可以解决很多问题，特别是曾经有过看不见的经历或者奇怪布局的框架。明显的，你需要小心，绝对位置放置的子元素是否都参照找到新位置。

3、为浮动元素使用display:inline
浮动元素会有一个著名的IE6双边距 margin bug。假如你设置了左边距5px但实际上得到了10px左边距。display:inline可以解决这个问题，尽管它不是必需的，但是css仍然有 效。

4、设置元素启动hasLayout
大部分IE6（IE7）的渲染问题都可以通过起来元素的 hasLayout属性来兼容。这是IE内置的设定，确定一个内容块相对其它内容块是有界限和位置的。当你需要设置一个行内元素例如一个连接变成块状元素 或者是透明效果，设置hasLayout也是必须的。

5、修复重复字符的bug
复杂的布局会触发一个bug：浮动对象的最后字符会出现在已经清除浮 动的元素后面。这里有几种解决的办法，部分是理想的，并且一些测试和出错是必须的。
a、确保浮动元素都使用：display:inline；
b、 最后一个浮动元素使用margin-right:-3px;
c、在浮动对象最后一个元素后使用一个条件注释。例如这里输入注释…<! [endif]
d、在容器内的最后使用一个div空标签（它也必须设置90%宽度甚至更小）

6、使用a标签完成可点击和hover原理
IE6只支持a标签的css定义hover效果
你 可以使用它去控制javascript启动的widgets，使得他们仍然保持键盘操作。这里有个二择一的问题，但是a标签是所有解决方案中最可靠的。

7、使用!important，或是高级选择符替代IE特定代码
在外置的css文件里，放弃凭 借传统的hacks和条件判断，使用有效的css代码去针对IE6仍然是有可能的。例如：最小高度可以使用一下定义。
#element {
min-height: 20em;
height: auto !important; /* understood by all browsers */
height: 20em; /* IE6 incorrectly uses this value /*
}
IE6不支持“min-height”并 且错误的将20em重写为“auto”。不过，当内容大于设置的空间时，它会增加它的尺寸。
另外一个选择是使用高级选择符。例如
#element {
min-height: 20em;
height: 20em;
}
/* ignored by IE6 */
#element[id] {
height: auto;
}

8、避免百分比定义
百分比在IE下比较混乱。除非你非常小心每个父元素的尺寸，这样就大概可以 最后避免了。你仍然可以对其他浏览器使用!important来使用百分值。例如：
body {
margin: 2% 0 !important;
margin: 20px 0; /* IE6 only */
}

9、早点和经常测试
在你的网站和应用程序完成之前，不要放弃IE6的测试。问题将会更加严重并 且需要很长时间去修复。如果你的网站可以运行于firefox和IE6，它将差不多肯定可以在其它浏览器下运行。

10、重构你的代码
经常的，修复会比重新考虑布局问题更加花费时间。Html细微的修改和更加 简单的css经常是最有效的。这意味着你要放弃完美的合法的代码，但是将会更少的问题出现，并且你知道怎样处理将要出现的情况。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 解决IE6背景图片不缓存的BUG
• PNG透明兼容IE6的几种方法
• IE6 死后即将大快人心的10件事
• IE6 很邪恶，但 IE6 的盒子模型更合理
• 跨浏览器兼容性检查完全指南
• 让IE8兼容IE7
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 网页浏览器的发展简史
• 火狐浏览器：浏览数据新方式（附模拟图）
• 浏览器测试：家谱

Feed enhanced by Better Feed from Ozh

谷歌Chrome是眼下最热门的浏览器之一，遗憾的是，由于iPad对于Javascript引擎的限制，Chrome浏览器直接在 iPad中运行还比较困难。
但人们希望iPad能够支持谷歌云同步书签、手势控制以及部分ChromeOS的功能。尽管苹果应用网站为Opera提供了通行许可，但 Chrome的影响力远非Opera能比，所以Chrome能否获得身份认证还属未知，以下就是Chrome在iPad中运行的效果图：
真实的标签浏览


标签浏览功能在移动便携设备中几乎没有真实体现出来，只有Opera提供较好的标签功能。
书签功能

Chrome的快速拨号和书签功能可以在iPad平板屏幕上得到充分体现，新增的“添加到主拨号界面”和“添加到书签”功能可以让用户方便 的管理常用网页。
iPad+ChromeOS

iPad采用的是基于iPhoneOS的操作系统，而ChromeOS是基于浏览器的，二者特点的共同之处在于比较轻便、实用。如果能在 iPad中打开Chrome浏览器，然后运行ChromeOS处理事物，那或许是件感觉奇妙的事情。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 鲍尔默谈苹果iPad：不是谁都买得起
• 近半数媒体网站计划支持iPad和HTML5视频
• 跨浏览器兼容性检查完全指南
• 让IE8兼容IE7
• 解决IE6背景图片不缓存的BUG
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 苹果iPad游戏评测
• 苹果iPad全解析
• 网页浏览器的发展简史
• 火狐浏览器：浏览数据新方式（附模拟图）

Feed enhanced by Better Feed from Ozh

此外，采用in-content UI的部分还包括恢复会话（Restore Session）、配置（about:config）、网络错误页面和钓鱼/恶意警告及页面。今后这种二级用户界面还将整合到参数、库、首页标签、 tabcandy以及about:firefox中。

开发in-content UI是为了让在不同类型的用户界面之间架起一条桥梁，在这种用户界面中，标签和页面都采用统一的风格，采用不同的颜色来区分不同类型的通知，可以一目了然地看到导航路径。

Horlander最后强调，这并不是最终定稿，也有待修改。

参数设置：

Windows：

Mac：

插件管理：

Windows：

Mac：

网络错误：

Windows：

Mac：

配置：

Windows：

Mac：

恢复会话：

Windows：

Mac：

TabCandy：

Windows：

Mac：

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 跨浏览器兼容性检查完全指南
• 让IE8兼容IE7
• 解决IE6背景图片不缓存的BUG
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 网页浏览器的发展简史
• 火狐浏览器：浏览数据新方式（附模拟图）
• 浏览器测试：家谱
• 浏览器中样式的高度自适应
• 未来的Firefox
• 最绚丽的网页浏览器——Conimige2 Lux

Feed enhanced by Better Feed from Ozh

Internet Explorer：没什么用，偶尔还真能派上用场…

Firefox：坦白地说它面面俱到，但那些 傻了吧唧的插件快把它搞的没法用了


Safari：非常的高效，但那些使用Safari 的人总对其质量夸大其词

Chrome：就是一个“快”字

Opera：有些人非常喜欢，但大多数人认为 Opera很2…

PS:个人比较BS用IE做内核的第三方浏览器（虽然用）

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 跨浏览器兼容性检查完全指南
• 让IE8兼容IE7
• 解决IE6背景图片不缓存的BUG
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 网页浏览器的发展简史
• 火狐浏览器：浏览数据新方式（附模拟图）
• 浏览器测试：家谱
• 浏览器中样式的高度自适应
• 未来的Firefox
• 最绚丽的网页浏览器——Conimige2 Lux

Feed enhanced by Better Feed from Ozh

在线测试资源

Browsershots

是一个备受欢迎的免费在线跨浏览器测试工具，包含各种平台的各种浏览器，会为你的网站截图，因为太受欢迎，所以要排队。

Netrenderer

针对不同版本的 IE 进行测试，甚至即将包含 IE9。

Browsrcamp

免费版支持 Mac 上的 Safari 3.1.2 测试，收费版本包括更多 Mac 浏览器。

Adobe Browserlab

老牌的跨浏览器测试平台。

Litmusapp

特点是，可以得到一份完整的跨浏览器兼容测试报告，免费版只限于 IE7 和 Firefox 2。

Anybrowser siteviewer

可以按不同屏幕尺寸在不同浏览器中预览你的网页，甚至可以在不同页之间浏览。

Fundisom

一个 Mac 平台的网站截图生成工具，支持 Safari，MacIE 和 Mozilla，目前好像宕机了。

Delorie lynxview

看看你的网页在纯文本浏览器 lynx 中的样子。

Browsera

更像一个整站测试工具，而不是单纯的网页截图工具，会爬遍你的站点，对整个站点进行测试。

插件和工具资源

IE Tab

这是一个 Firefox 扩展，可以以新标签的形式，以 IE 引擎显示页面。

IETester

一个免费的多版本 IE 内核浏览器，支持 IE9/8/7/6/5.5，支持 Windows 7，Vista，XP。

IECapt

一个小巧的命令符工具，可以将指定网页在 IE 中的渲染结果输出到 BMP，JPG 和 PNG 图片。

Multi-Safari

多版本 Safari 测试。

Expression Web SuperPreview

不同版本的 IE 测试。

Iphoney

如果你针对 iPhone 320×480 的屏幕进行设计，这正是你需要的工具。

MultipleIEs

针对古董级浏览器 IE3/4/5/6 进行测试。

Multiple IE

和 MultipleIEs 类似，也是针对古董级浏览器进行测试，不同的是，这工具可以让你在同一台机器上运行从 IE6 到 IE3 各个版本的浏览器。

SortSite Professional

一个非常全面的测试工具，可以测试你网站中每个页面，为所有发现的问题生成报告，拥有300个指标。

Lunascape

世界上第一个，也是唯一的一个三引擎浏览器，可以模拟 IE，Firefox，Chrome，Safari。

付费服务资源

Browsercam

这是一个付费服务，可以在不同平台下的不同浏览器中测试你的网站，既可以自动截图，又可以远程访问他们的计算机。

Crossbrowsertesting

针对所有平台下的所有浏览器进行测试，付费服务，19.95 美金起价。

Browser Photo

有12种不同浏览器和计算机配置组合，生成每种组合下的站点屏幕截图，收费服务，一次15美元。

Url2image

登录后，你可以针对不同平台，不同浏览器，生成你网站的截图，两个截图1美元。

SortSite

针对不同浏览器，测试你网站的各种功能，149美元。

Multi Browser Viewer

预装了17个独立的虚拟浏览器，除此之外，还可以针对 Mac，Windows，Linux 平台下的50款浏览器进行测试。单用户99.95美元。

Cloud Testing

对你的电子商务站点的外观与功能，针对 IE6/7/8, Firefox, Safari, Chrome, Opera 进行测试。

本文国际来源：hongkiat.com Complete Guide to Cross-Browser Compatibility Check （原文作者：Dainis）

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 让IE8兼容IE7
• 解决IE6背景图片不缓存的BUG
• 解决IE6、IE7、Firefox兼容最简单的CSS Hack
• 网页浏览器的发展简史
• 火狐浏览器：浏览数据新方式（附模拟图）
• 浏览器测试：家谱
• 浏览器中样式的高度自适应
• 未来的Firefox
• 最绚丽的网页浏览器——Conimige2 Lux
• 搞笑漫画图解几大浏览器的区别

Feed enhanced by Better Feed from Ozh