浏览器兼容性和HTTP状态了解
浏览器兼容性了解1.在同一个文件里针对不同的浏览器写她们各自调用的样式针对属性:比如容器的height属性IE6 专用 _height: 100px;IE7 专用 *+height: 100px;IE6、IE7 共用 *height: 100px;IE7、FF 共用 height: 100px !important;IE8、FF不认识* ,在CSS里加上*hei
HTTP状态
100 Continue 初始的请求已经接受,客户应当继续发送请求的其余部分。(HTTP 1.1新)
101 Switching Protocols 服务器将遵从客户的请求转换到另外一种协议(HTTP 1.1新)
200 OK 一切正常,对GET和POST请求的应答文档跟在后面。
201 Created 服务器已经创建了文档,Location头给出了它的URL。
202 Accepted 已经接受请求,但处理尚未完成。
203 Non-Authoritative Information 文档已经正常地返回,但一些应答头可能不正确,因为使用的是文档的拷贝(HTTP 1.1新)。
204 No Content 没有新文档,浏览器应该继续显示原来的文档。如果用户定期地刷新页面,而Servlet可以确定用户文档足够新,这个状态代码是很有用的。
205 Reset Content 没有新的内容,但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容(HTTP 1.1新)。
206 Partial Content 客户发送了一个带有Range头的GET请求,服务器完成了它(HTTP 1.1新)。
300 Multiple Choices 客户请求的文档可以在多个位置找到,这些位置已经在返回的文档内列出。如果服务器要提出优先选择,则应该在Location应答头指明。
301 Moved Permanently 客户请求的文档在其他地方,新的URL在Location头中给出,浏览器应该自动地访问新的URL。
302 Found 类似于301,但新的URL应该被视为临时性的替代,而不是永久性的。注意,在HTTP1.0中对应的状态信息是“Moved Temporatily”。
出现该状态代码时,浏览器能够自动访问新的URL,因此它是一个很有用的状态代码。
注意这个状态代码有时候可以和301替换使用。例如,如果浏览器错误地请求 http://host/~user (缺少了后面的斜杠),有的服务器返回301,有的则返回302。
严格地说,我们只能假定只有当原来的请求是GET时浏览器才会自动重定向。请参见307。
303 See Other 类似于301/302,不同之处在于,如果原来的请求是POST,Location头指定的重定向目标文档应该通过GET提取(HTTP 1.1新)。
304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。
305 Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取(HTTP 1.1新)。
307 Temporary Redirect 和302(Found)相同。许多浏览器会错误地响应302应答进行重定向,即使原来的请求是POST,即使它实际上只能在POST请求的应答是 303时才能重定向。由于这个原因,HTTP 1.1新增了307,以便更加清除地区分几个状态代码:当出现303应答时,浏览器可以跟随重定向的GET和POST请求;如果是307应答,则浏览器只能跟随对GET请求的重定向。(HTTP 1.1新)
400 Bad Request 请求出现语法错误。
401 Unauthorized 客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头,浏览器据此显示用户名字/密码对话框,然后在填写合适的Authorization头后再次发出请求。
403 Forbidden 资源不可用。服务器理解客户的请求,但拒绝处理它。通常由于服务器上文件或目录的权限设置导致。
404 Not Found 无法找到指定位置的资源。这也是一个常用的应答。
405 Method Not Allowed 请求方法(GET、POST、HEAD、DELETE、PUT、TRACE等)对指定的资源不适用。(HTTP 1.1新)
406 Not Acceptable 指定的资源已经找到,但它的MIME类型和客户在Accpet头中所指定的不兼容(HTTP 1.1新)。
407 Proxy Authentication Required 类似于401,表示客户必须先经过代理服务器的授权。(HTTP 1.1新)
408 Request Timeout 在服务器许可的等待时间内,客户一直没有发出任何请求。客户可以在以后重复同一请求。(HTTP 1.1新)
409 Conflict 通常和PUT请求有关。由于请求和资源的当前状态相冲突,因此请求不能成功。(HTTP 1.1新)
410 Gone 所请求的文档已经不再可用,而且服务器不知道应该重定向到哪一个地址。它和404的不同在于,返回407表示文档永久地离开了指定的位置,而404表示由于未知的原因文档不可用。(HTTP 1.1新)
411 Length Required 服务器不能处理请求,除非客户发送一个Content-Length头。(HTTP 1.1新)
412 Precondition Failed 请求头中指定的一些前提条件失败(HTTP 1.1新)。
413 Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求,则应该提供一个Retry-After头(HTTP 1.1新)。
414 Request URI Too Long URI太长(HTTP 1.1新)。
416 Requested Range Not Satisfiable 服务器不能满足客户在请求中指定的Range头。(HTTP 1.1新)
500 Internal Server Error 服务器遇到了意料不到的情况,不能完成客户的请求。
501 Not Implemented 服务器不支持实现请求所需要的功能。例如,客户发出了一个服务器不支持的PUT请求。
502 Bad Gateway 服务器作为网关或者代理时,为了完成请求访问下一个服务器,但该服务器返回了非法的应答。
503 Service Unavailable 服务器由于维护或者负载过重未能应答。例如,Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头。
504 Gateway Timeout 由作为代理或网关的服务器使用,表示不能及时地从远程服务器获得应答。(HTTP 1.1新)
505 HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本。(HTTP 1.1新)
HTTP 400 - 请求无效
HTTP 401.1 - 未授权:登录失败
HTTP 401.2 - 未授权:服务器配置问题导致登录失败
HTTP 401.3 - ACL 禁止访问资源
HTTP 401.4 - 未授权:授权被筛选器拒绝
HTTP 401.5 - 未授权:ISAPI 或 CGI 授权失败
HTTP 403 - 对 Internet 服务管理器 (HTML) 的访问仅限于 Localhost
HTTP 403.1 禁止访问:禁止可执行访问
HTTP 403.2 - 禁止访问:禁止读访问
HTTP 403.3 - 禁止访问:禁止写访问
HTTP 403.4 - 禁止访问:要求 SSL
HTTP 403.5 - 禁止访问:要求 SSL 128
HTTP 403.6 - 禁止访问:IP 地址被拒绝
HTTP 403.7 - 禁止访问:要求客户证书
HTTP 403.8 - 禁止访问:禁止站点访问
HTTP 403.9 - 禁止访问:连接的用户过多
HTTP 403.10 - 禁止访问:配置无效
HTTP 403.11 - 禁止访问:密码更改
HTTP 403.12 - 禁止访问:映射器拒绝访问
HTTP 403.13 - 禁止访问:客户证书已被吊销
HTTP 403.15 - 禁止访问:客户访问许可过多
HTTP 403.16 - 禁止访问:客户证书不可信或者无效
HTTP 403.17 - 禁止访问:客户证书已经到期或者尚未生效
HTTP 404.1 - 无法找到 Web 站点
HTTP 404 - 无法找到文件
HTTP 405 - 资源被禁止
HTTP 406 - 无法接受
HTTP 407 - 要求代理身份验证
HTTP 410 - 永远不可用
HTTP 412 - 先决条件失败
HTTP 414 - 请求 - URI 太长
HTTP 500 - 内部服务器错误
HTTP 500.100 - 内部服务器错误 - ASP 错误
HTTP 500-11 服务器关闭
HTTP 500-12 应用程序重新启动
HTTP 500-13 - 服务器太忙
HTTP 500-14 - 应用程序无效
HTTP 500-15 - 不允许请求 global.asa
HTTP 501 - 未实现
HTTP 502 - 网关错误
错误 602 The port is already open
问题:拨号网络网络由于设备安装错误或正在使用,不能进行连接
原因:RasPPPoE没有完全和正确的安装
解决:卸载干净任何PPPoE软件,重新安装。
错误 605 Cannot set port information
问题:拨号网络网络由于设备安装错误不能设定使用端口
原因:RasPPPoE没有完全和正确的安装
解决:卸载干净任何PPPoE软件,重新安装。
错误 606 The port is not connected
问题:拨号网络网络不能连接所需的设备端口
原因:RasPPPoE没有完全和正确的安装,连接线故障,ADSL MODEM故障
解决:卸载干净任何PPPoE软件,重新安装,检查网线和 ADSL MODEM。
错误 608 The device does not exist
问题:拨号网络网络连接的设备不存在
原因:RasPPPoE没有完全和正确的安装
解决:卸载干净任何PPPoE软件,重新安装。
错误 609 The device type does not exist
问题:拨号网络网络连接的设备其种类不能确定
原因:RasPPPoE没有完全和正确的安装
解决:卸载干净任何PPPoE软件,重新安装。
错误 611 The route is not available/612 The route is not allocated
问题:拨号网络网络连接路由不正确
原因:RasPPPoE没有完全和正确的安装,ISP服务器故障
解决:卸载干净任何PPPoE软件,重新安装。
错误 617 The port or device is already disconnecting
问题:拨号网络网络连接的设备已经断开
原因:RasPPPoE没有完全和正确的安装,ISP服务器故障,连接线,ADSL MODEM故障
解决:卸载干净任何PPPoE软件,重新安装, ,检查网线和 ADSL MODEM。
错误 619 问题:与ISP服务器不能建立连接
原因:ADSL ISP服务器故障,ADSL电话线故障
解决:检查ADSL信号灯是否能正确同步。
错误 621 Cannot open the phone book file
错误 622 Cannot load the phone book file
错误 623 Cannot find the phone book entry
错误 624 Cannot write the phone book file
错误 625 Invalid information found in the phone book
问题:Windows NT或者Windows 2000 Server网络RAS网络组件故障
原因:卸载所有PPPoE软件,重新安装RAS网络组件和RasPPPoE。
错误629,已经与对方计算机断开连接。 请双击此连接,再试一次。
如果出现这个问题,情况比较复杂,因为有多种情况可以导致"错误629",多数情况是因为同时拨入的人数过多造成的。另外,在您的拨号连接设置中应该全部采取默认设置,如"启用软件压缩"、"登陆网络"都需要选上。一般来讲,此种情况也有可能是由于您所用的MODEM或电话线的性能和质量原因,以至于在您选定的通讯速率上不能很好地建立连接,还有一种情况就是: 如果您的电话开启了防盗打功能,在拨号时将有调制解调器的握手音,但握手音响后将出现错误629,如果有分机拨打电话,电话就会报警,只要把防盗打功能关掉就可以了。
错误 630
问题:ADSL MODEM没有没有响应
原因:ADSL电话线故障,ADSL MODEM故障(电源没打开等)
解决:检查ADSL设备。
错误 633
问题:拨号网络网络由于设备安装错误或正在使用,不能进行连接。
原因:RasPPPoE没有完全和正确的安装。
解决:卸载干净任何PPPoE软件,重新安装。
错误 638
问题:过了很长时间,无法连接到ISP的ADSL接入服务器
原因:ISP服务器故障;在RasPPPoE所创建的不好连接中你错误的输入了一个电话号码
解决:运行其创建拨号的Raspppoe.exe检查是否能列出ISP服务,以确定ISP正常;把所使用的拨号连接中的 电话号码清除或者只保留一个0。
错误 645
问题:网卡没有正确响应
原因:网卡故障,或者网卡驱动程序故障
解决:检查网卡,重新安装网卡驱动程序。
错误 650
问题:远程计算机没有响应,断开连接
原因:ADSL ISP服务器故障,网卡故障,非正常关机造成网络协议出错
解决:检查ADSL信号灯是否能正确同步,;检查网卡,删除所有网络组件重新安装网络。
错误 651
问题:ADSL MODEM报告发生错误
原因:Windows处于安全模式下,或其他错误
解决:出现该错误时,进行重拨,就可以报告出新的具体错误代码。
错误676,占线。 请稍后再试。
请先检查电话线是否有问题,请将电话线拔下,直接接在电话上,用电话拨要拨的ISP电话号码(比如163,169),听一听听筒里有没有类似传真音的尖叫声,如果有此声,说明您的电话可以拨号上网,请确认在"我的电脑"->"拨号网络"->"XXX连接(您的拨号连接)"中的电话号码在ISP电话号码前没有其他数字,如您是通过分机拨号,需在电话号码之前加外线号和逗号,例如"0,163"。如果在听筒中确为占线音,且占线频率极高。
错误678,拨入方计算机没有应答。
这种情况和占线有些类似,多为偶然现象,有时是因为调制解调器刚刚开启就拨号导致的,请先确认将电话线(连接电话局的那一根)插入调制解调器的"LINE"接口上。检查电话线是否有问题,请将电话线拔下,直接接在电话上,用电话拨要拨打的ISP电话号码(比如163,169),听一听听筒里有没有类似传真音的尖叫声,如果有此声,说明您的电话可以拨号上网,请确认"我的电脑"->"拨号网络"->"XXX连接(您的拨号连接)"中的电话号码在ISP电话号码之前没有其他数字,如您是通过总机拨号,需在电话号码之前加外线号和逗号,例如"0,163"。如果是占线音,请联系ISP客户服务部。如果没有任何声音或有提示音说您不能拨打此电话号码,那这说明您的电话线有问题。
错误680 没有拨号音。
出现这个错误,请检测调制解调器是否正确连到电话线,然后检查以下几个方面:
1、先检查电话线是否连接,如果没发现问题,请将电话线拔下,直接接在电话上,用电话拨要拨的ISP电话号码试一试(比如163,169),听一听听筒里有没有类似传真音的尖叫声,如果有此声,说明您的电话可以拨号上网,可能是刚才您拨号时有电话打进来,或是您的调制解调器有故障。 如果是占线音,请联系ISP客户服务部。如果没有任何声音或有提示音说您不能拨打此电话号码,那这说明您的电话线有问题。
错误 691
问题:输入的用户名和密码不对,无法建立连接
原因:用户名和密码错误,ISP服务器故障
解决:使用正确的用户名和密码,并且使用正确的ISP账号格式(name@service)。
错误 718
问题:验证用户名时远程计算机超时没有响应,断开连接
原因:ADSL ISP服务器故障
解决:致电2022370。
错误 720
问题:拨号网络无法协调网络中服务器的协议设置
原因:ADSL ISP服务器故障,非正常关机造成网络协议出错
解决:删除所有网络组件重新安装网络。
错误 734
问题:PPP连接控制协议中止
原因:ADSL ISP服务器故障,非正常关机造成网络协议出错
解决:删除所有网络组件重新安装网络。
错误 738
问题:服务器不能分配IP地址
原因:ADSL ISP服务器故障,ADSL用户太多超过ISP所能提供的IP地址
解决:致电2022370。
错误 797
问题:ADSL MODEM连接设备没有找到
原因:ADSL MODEM电源没有打开,网卡和ADSL MODEM的连接线出现问题,软件安装以后相应的协议没有正确邦定,在创立拨号连接时,建立了错误的空连接
解决:检查电源,连接线;检查网络属性,RasPPPoE相关的协议是否正确的安装并正确邦定(相关协议),检查网卡是否出现?号或!号,把它设置为Enable;检查拨号连接的属性,是否连接的设备使用了一个"ISDN channel-Adapter Name(xx)" 的设备,该设备为一个空设备,如果使用了取消它,并选择正确的PPPoE设备代替它,或者重新创立拨号连接。
ADSL登录错误代号认识.现在在家上网的人多了..大凡是用ADSL或电话拔号的吧~~没问题时你们不会想起它们..如果某天由你来设置联机的话你遇上错误代号咋办呢?如:错吴679~~~~~~~提示你不能正常使用网络.而你又不知道它的意思咋办...来认识一下.
也可以在开始菜单的帮助与支持里输入:679
这样可以给你最快的解决方案.....个人认为很实用~~
600 某操作处于挂起状态。
601 检测到一个无效端口句柄。
602 指定的端口已经打开。
603 呼叫方缓冲区太小。
604 指定了错误的信息。
605 无法设置端口信息。
606 指定的端口未连接。
607 检测到无效事件。
608 指定了一个不存在的设备。
609 指定了一个不存在的设备类型。
610 指定了一个无效的缓冲区。
611 指定了一个无法使用的路由。
612 指定了一个没有分配的路由。
613 指定了一种无效的压缩。
614 可用缓冲区不足。
615 找不到指定的端口。
616 某异步请求处于挂起状态。
617 调制解调器已经在断开连接。
618 指定的端口没有打开。
619 指定的端口没有连接。
620 无法确定端点。
621 系统无法打开电话簿。
622 系统无法加载电话簿。
623 系统无法找到此连接的电话簿项。
624 系统无法更新电话簿文件。
625 系统在电话簿中找到无效信息。
626 无法加载字符串。
627 无法找到关键字。
628 连接被关闭。
629 连接被远程计算机关闭。
630 由于硬件故障,调制解调器断开连接。
631 用户断开了调制解调器连接。
632 检测到不正确的结构大小。
633 调制解调器正在使用中或没有进行拨出配置。
634 您的计算机无法在远程网络上注册。
635 出现未知错误。
636 连接到端口的设备不是所期望的设备。
637 检测到不能转换的字符串。
638 请求超时。
639 异步网络不可用。
640 发生与 NetBIOS 有关的错误。
641 服务器不能分配支持客户端时所需的 NetBIOS 资源。
642 计算机的某个 NetBIOS 名已经在远程网络上注册。
643 服务器端的网络适配器出现故障。
644 您将无法接收网络弹出式消息。
645 发生内部身份验证错误。
646 此时不允许该帐户登录。
647 此帐户被禁用。
648 该帐户的密码已过期。
649 帐户没有拨入的权限。
650 远程访问服务器没有响应。
651 调制解调器报告错误。
652 有一个来自调制解调器的无法识别的响应。
653 在设备 .INF 文件部分中未找到调制解调器所需的宏。
654 设备 .INF 文件部分中的命令或响应引用了未定义的宏。
655 在设备 .INF 文件部分中未找到 <MESSAGE> 宏。
656 设备 .INF 文件部分中的 <DEFAULTOFF> 宏包含未定义的宏。
657 无法打开设备 .INF 文件。
658 设备 .INF 或媒体 .INI 文件中的设备名太长。
659 媒体 .INI 文件引用了未知的设备名。
660 设备 .INF 文件不包含对命令的响应。
661 设备 .INF 文件缺少命令。
662 试图设置设备 .INF 文件部分中没有列出的宏。
663 媒体 .INI 文件引用了未知的设备类型。
664 系统内存不足。
665 未正确配置调制解调器。
666 调制解调器未正常工作。
667 系统不能读取媒体 .INI 文件。
668 连接被终止。
669 媒体 .INI 文件中的用法参数无效。
670 系统不能从媒体 .INI 文件中读取部分名称。
671 系统不能从媒体 .INI 文件中读取设备类型。
672 系统不能从媒体 .INI 文件中读取设备名称。
673 系统不能从媒体 .INI 文件中读取用法。
674 系统不能从媒体 .INI 文件中读取最大的连接速率 (bps)。
675 系统不能从媒体 .INI 文件中读取最大的载波连接速度。
676 电话线忙。
677 某人而不是调制解调器作出了应答。
678 没有应答。
679 系统无法检测到载波。
680 没有拨号音。
681 调制解调器报告常规错误。
691 因为用户名和/或密码在此域上无效,所以访问被拒绝。
692 调制解调器出现硬件故障。
695 未启动状态机。
696 已启动状态机。
697 响应循环未完成。
699 调制解调器的响应导致缓冲区溢出。
700 设备 .INF 文件中的扩展命令太长。
701 调制解调器使用了 COM 驱动程序不支持的连接速度。
703 连接需要您提供信息,但应用程序不允许用户交互。
704 回拨号码无效。
705 授权状态无效。
707 出现与 X.25 协议有关的错误。
708 帐户过期。
709 更改域上的密码时发生错误。密码可能太短或者可能与以前使用的密码匹配。
710 当与调制解调器通讯时检测到序列溢出错误。
711 无法启动“远程访问服务管理器”。事件日志中提供了其他信息。
712 双路端口正在初始化。等几秒钟再重拨。
713 没有活动的 ISDN 线路可用。
714 没有 ISDN 信道可用于拨号。
715 由于电话线质量差,所以发生过多错误。
716 远程访问服务 IP 配置不可用。
717 在远程访问服务 IP 地址的静态池中没有可用的 IP 地址。
718 等待远程计算机作出有效响应时连接超时。
719 连接被远程计算机终止。
721 远程计算机没有响应。
722 从远程计算机接收到无效的数据。该数据被忽略。
723 电话号码(包含前缀和后缀)太长。
726 IPX 协议不能用于在多个调制解调器上同时向外拨号。
728 系统找不到 IP 适配器。
729 除非安装 IP 协议,否则不能使用 SLIP。
731 未配置协议。
732 您的计算机和远程计算机的 PPP 控制协议无法一致。
733 您的计算机和远程计算机的 PPP 控制协议无法一致。
734 PPP 链接控制协议被终止。
735 请求的地址被服务器拒绝。
736 远程计算机终止了控制协议。
737 检测到环回。
738 服务器没有指派地址。
739 远程服务器所需的身份验证协议不能使用存储的密码。请重拨,并显式输入密码。
740 检测到无效拨号规则。
741 本地计算机不支持所需的数据加密类型。
742 远程计算机不支持所需的数据加密类型。
743 远程服务器要求数据加密。
751 回拨号码包含无效的字符。只允许有下列字符:0 到 9、T、P、W、(,)、-、@ 和 空格。
752 当处理脚本时遇到语法错误。
753 由于连接是由多协议路由器创建的,所以该连接无法断开。
754 系统无法找到多路链接束。
755 由于该项已经指定自定义的拨号程序,所以系统不能执行自动拨号。
756 已经拨打该连接。
757 远程访问服务不能自动启动。事件日志中提供了其他信息。
758 该连接上已经启用 Internet 连接共享。
760 启用路由功能时发生错误。
761 启用连接的 Internet 连接共享时发生错误。
..763 不能启用 Internet 连接共享。除了要共享的连接之外,还有两个或多个局域网连接。
..764 未安装智能卡阅读器。
..765 不能启用 Internet 连接共享。LAN 连接已经配置了自动 IP 定址所需的 IP 地址。
..767 不能启用 Internet 连接共享。专用网络上选定的 LAN 连接配置了多个 IP 地址。在启用 Internet 连接共享之前,请使用单个 IP 地址重新配置 LAN 连接。
..768 由于数据加密失败,导致连接尝试失败。
..769 指定的目的地是不可访问的。
..770 远程机器拒绝连接尝试。
..771 由于网络忙,导致连接尝试失败。
..772 远程计算机的网络硬件与请求的呼叫类型不兼容。
..773 由于目标号码已更改,导致连接尝试失败。
..774 临时故障导致连接尝试失败。请再次尝试连接。
..775 呼叫被远程计算机阻塞。
..776 由于目标已经调用“请勿打扰”功能,所以该呼叫无法连接。
..777 远程计算机上的调制解调器出现故障,导致连接尝试失败。
..778 不能验证服务器的身份。
..780 所尝试使用的功能对此连接无效。
..783 不能启用 Internet 连接共享。被选为专用网络的 LAN 连接不存在,或者已与网络断开连接。启用 Internet 连接共享前,请确保已连接 LAN 适配器。
..784 登录时无法使用该连接进行拨号,因为它配置使用的用户名和智能卡上的不一样。如果要在登录时使用它,必须对它进行配置以使用智能卡上的用户名。
..785 登录时无法使用该连接进行拨号,因为没有将其配置成使用智能卡。如果要在登录时使用它,必须编辑该连接的属性以便使用智能卡。
..788 L2TP 连接尝试失败,因为安全层无法与远程计算机协商兼容参数。
..789 L2TP 连接尝试失败,因为安全层在与远程计算机进行初始协商时遇到处理错误。
..791 L2TP 连接尝试失败,因为没有找到该连接的安全策略。
..792 L2TP 连接尝试失败,因为安全协商超时。
..793 L2TP 连接尝试失败,因为协商安全时发生错误。
..794 该用户的帧协议 RADIUS 属性不是 PPP。
..795 该用户的隧道类型 RADIUS 属性不正确。
..796 该用户的服务类型 RADIUS 属性既不是成帧也不是回拨成帧。
..797 无法建立到远程计算机的连接,因为找不到调制解调器或者调制解调器忙。
..799 由于网络上存在 IP 地址冲突,所以无法启用 Internet 连接共享 (ICS)。ICS 要求将主机配置成使用 192.168.0.1。请确保网络上没有其他客户端被配置成使用 192.168.0.1。
..800 无法建立 VPN 连接。可能无法连接 VPN 服务器,或者该连接的安全参数配置不正确。
浏览器兼容性了解
1.在同一个文件里针对不同的浏览器写她们各自调用的样式
针对属性:比如容器的height属性
IE6 专用 _height: 100px;
IE7 专用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;
IE8、FF不认识* ,在CSS里加上*height:20px,IE8和FF就没有20px的高度;
针对样式: 比如ID 名为example 的样式
#example { height:100px; } /* FF */
* html #example { height:200px; } /* IE6 */
*+html #example { height:300px; } /* IE7 */
2.IE6:设置为float的div在ie下设置的margin会加倍
在这个div里面加上display:inline此问题就解决了
3.文字下沉
在容器里加上:display:block;overflow:hidden;
4. IE与宽度和高度的问题
IE 不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两 个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。
比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当 做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<div> 放到 <body> 标签下,然后为div指定一个类, 然后CSS这样设计:
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
5.float的div闭合;清除浮动;自适应高度
① 例如:<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移,而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;)
这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签 闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会 产生异常。 并且将clear这种样式定义为为如下即可: .clear{ clear:both;}
②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应,要在wrapper里面加上overflow:hidden; 当包含float的 box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。
例如某一个wrapper如下定义:
.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:
<div id=”page”>
<div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div>
比 如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而 page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决
<div id=”page”>
<div id=”bg” style=”float:left;width:100%”>
<div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div>
</div>
再嵌入一个float left而宽度是100%的DIV解决之
④万能float 闭合(非常重要!)
关 于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下 代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.
/* Clear Fix */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
或者这样设置:.hackbox{ display:table; //将对象作为块元素级的表格显示}
IE和Firefox的Javascript兼容性总结
长久以来JavaScript兼容性一直是Web开发者的一个主要问题。在正式规范、事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬。为此,主要从以下几方面差异总结IE和Firefox的Javascript兼容性:
一、函数和方法差异;
二、样式访问和设置;
三、DOM方法及对象引用;
四、事件处理;
五、其他差异的兼容处理。
1. getYear()方法
【分析说明】先看一下以下代码:
var year= new Date().getYear(); document.write(year);
在IE中得到的日期是"2010",在Firefox中看到的日期是"110",主要是因为在 Firefox 里面 getYear 返回的是 "当前年份-1900" 的值。
【兼容处理】
加上对年份的判断,如:
var year= new Date().getYear(); year = (year<1900?(1900+year):year);document.write(year);
也可以通过 getFullYear getUTCFullYear 去调用:
var year = new Date().getFullYear(); document.write(year);
2. eval()函数
【分析说明】在IE中,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象。
【兼容处理】统一用getElementById("idName")来取得id为idName的HTML对象。
3. const声明
【分析说明】在 IE 中不能使用 const 关键字。如:
const constVar = 32;
在IE中这是语法错误。
【兼容处理】不使用 const ,以 var 代替。
4. var
【分析说明】请看以下代码:
echo=function(str){ document.write(str); }pre>
这个函数在IE上运行正常,Firefox下却报错了。
【兼容处理】而在echo前加上var就正常了,这个就是我们提到var的目的。
5. const 问题
【分析说明】在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
【解决方法】不使用 const ,以 var 代替。
1. CSS的"float"属性
【分析说明】Javascript访问一个给定CSS 值的最基本句法是:object.style.property,但部分CSS属性跟Javascript中的保留字命名相同,如"float","for","class"等,不同浏览器写法不同。
在IE中这样写:
document.getElementById("header").style.styleFloat = "left";
在Firefox中这样写:
document.getElementById("header").style.cssFloat = "left";
【兼容处理】在写之前加一个判断,判断浏览器是否是IE:
if(document.all){document.getElementById("header").style.styleFloat = "left";} else{document.getElementById("header").style.cssFloat = "left";}
2. 访问<label>标签中的"for"
【分析说明】和"float"属性一样,同样需要使用不现的句法区分来访问<label>标签中的"for"。
在IE中这样写:
var myObject = document.getElementById("myLabel"); var myAttribute = myObject.getAttribute("htmlFor");
在Firefox中这样写:
var myObject = document.getElementById("myLabel"); var myAttribute = myObject.getAttribute("for");
【兼容处理】解决的方法也是先 判断浏览器类型。
3. 访问和设置class属性
【分析说明】同样由于class是Javascript保留字的原因,这两种浏览器使用不同的 JavaScript 方法来获取这个属性。
IE8.0之前的所有IE版本的写法:
var myObject = document.getElementById("header"); var myAttribute = myObject.getAttribute("className");
适用于IE8.0 以及 firefox的写法:
var myObject = document.getElementById("header"); var myAttribute = myObject.getAttribute("class");
另外,在使用setAttribute()设置Class属性的时候,两种浏览器也存在同样的差异。
setAttribute("className",value);
这种写法适用于IE8.0之前的所有IE版本,注意:IE8.0也不支持"className"属性了。
setAttribute("class",value);适用于IE8.0 以及 firefox。
【兼容处理】
方法一,两种都写上:
var myObject = document.getElementById("header"); myObject.setAttribute("class","classValue"); myObject.setAttribute("className","classValue");//设置header的class为classValue
方法二,IE和FF都支持object.className,所以可以这样写:
var myObject = document.getElementById("header"); myObject.className="classValue";//设置header的class为classValue
方法三,先判断浏览器类型,再根据浏览器类型采用对应的写法。
4. 对象宽高赋值问题
【分析说明】FireFox中类似 obj.style.height = imgObj.height 的语句无效。
【兼容处理】统一使用 obj.style.height = imgObj.height + ‘px’;
1. getElementById
【分析说明】先来看一组代码:
<!-- input对象访问1 --> <input id="id" type="button" value="click me" ōnclick="alert(id.value)"/>
在Firefox中,按钮没反应,在IE中,就可以,因为对于IE来说,一个HTML 元素的 ID 可以直接在脚本中当作变量名来使用,而Firefox中不可以。
【兼容处理】尽量采用W3C DOM 的写法,访问对象的时候,用document.getElementById("id") 以ID来访问对象,且一个ID在页面中必须是唯一的,同样在以标签名来访问对象的时候,用document.getElementsByTagName("div")[0] 。该方式得到较多浏览器的支持。
<!-- input对象访问2 --> <input id="id" type="button" value="click me"οnclick="alert(document.getElementById('id').value)" />
2. 集合类对象访问
【分析说明】IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象。如:
document.write(document.forms("formName").src);//该写法在IE下能访问到Form对象的scrc属性
【兼容处理】将document.forms("formName")改为 document.forms["formName"]。统一使用[]获取集合类对象。
3. frame的引用
【分析说明】IE可以通过id或者name访问这个frame对应的window对象,而Firefox只可以通过name来访问这个frame对应的window对象。
例如如果上述frame标签写在最上层的window里面的htm里面,那么可以这样访问:
IE: window.top.frameId或者window.top.frameName来访问这个window对象;
Firefox:只能这样window.top.frameName来访问这个window对象。
【兼容处理】使用frame的name来访问frame对象,另外,在IE和Firefox中都可以使用window.document.getElementById(”frameId”)来访问这个frame对象。
4. parentElement
【分析说明】IE中支持使用parentElement和parentNode获取父节点。而Firefox只可以使用parentNode。
【兼容处理】因为firefox与IE都支持DOM,因此统一使用parentNode来访问父节点。
5. table操作
【分析说明】IE下table中无论是用innerHTML还是appendChild插入<tr>都没有效果,而其他浏览器却显示正常。
【兼容处理】解决的方法是,将<tr>加到table的<tbody>元素中,如下面所示:
var row = document.createElement("tr"); var cell = document.createElement("td"); var cell_text = document.createTextNode("插入的内容"); cell.appendChild(cell_text); row.appendChild(cell); document.getElementsByTagName("tbody")[0].appendChild(row);
6. 移除节点removeNode()和removeChild()
【分析说明】appendNode在IE和Firefox下都能正常使用,但是removeNode只能在IE下用。
removeNode方法的功能是删除一个节点,语法为node.removeNode(false)或者node.removeNode(true),返回值是被删除的节点。
removeNode(false)表示仅仅删除指定节点,然后这个节点的原孩子节点提升为原双亲节点的孩子节点。
removeNode(true)表示删除指定节点及其所有下属节点。被删除的节点成为了孤立节点,不再具有有孩子节点和双亲节点。
【兼容处理】Firefox中节点没有removeNode方法,只能用removeChild方法代替,先回到父节点,在从父节点上移除要移除的节点。
node.parentNode.removeChild(node);// 为了在ie和firefox下都能正常使用,取上一层的父结点,然后remove。
7. childNodes获取的节点
【分析说明】childNodes的下标的含义在IE和Firefox中不同,看一下下面的代码:
<ul id="main"> <li>1</li> <li>2</li> <li>3</li> </ul> <input type=button value="click me!" οnclick="alert(document.getElementById('main').childNodes.length)">
分别用IE和Firefox运行,IE的结果是3,而Firefox则是7。Firefox使用DOM规范,"#text"表示文本(实际是无意义的空格和换行等)在Firefox里也会被解析成一个节点,在IE里只有有实际意义的文本才会解析成"#text"。
【兼容处理】
方法一,获取子节点时,可以通过node.getElementsByTagName()来回避这个问题。但是 getElementsByTagName对复杂的DOM结构遍历明显不如用childNodes,因为childNodes能更好的处理DOM的层次结构。
方法二,在实际运用中,Firefox在遍历子节点时,不妨在for循环里加上:
if(childNode.nodeName=="#text") continue;//或者使用nodeType == 1。
这样可以跳过一些文本节点。
延伸阅读
8. Firefox不能对innerText支持
【分析说明】Firefox不支持innerText,它支持textContent来实现innerText,不过textContent没有像innerText一样考虑元素的display方式,所以不完全与IE兼容。如果不用textContent,字符串里面不包含HTML代码也可以用innerHTML代替。也可以用js写个方法实现,可参考《为firefox实现innerText属性》一文。
【兼容处理】通过判断浏览器类型来兼容:
if(document.all){ document.getElementById('element').innerText = "my text"; } else{ document.getElementById('element').textContent = "my text"; }
如果在使用javascript的时候涉及到event处理,就需要知道event在不同的浏览器中的差异,主要的JavaScript的事件模型有三种(参考《Supporting Three Event Models at Once》),它们分别是NN4、IE4+和W3C/Safar。
1. window.event
【分析说明】先看一段代码
function et() { alert(event);//IE: [object] }
以上代码在IE运行的结果是[object],而在Firefox无法运行。
因为在IE中event作为window对象的一个属性可以直接使用,但是在Firefox中却使用了W3C的模型,它是通过传参的方法来传播事件的,也就是说你需要为你的函数提供一个事件响应的接口。
【兼容处理】添加对event判断,根据浏览器的不同来得到正确的event:
function et() { evt=evt?evt:(window.event?window.event:null);//兼容IE和Firefox alert(evt); }
2. 键盘值的取得
【分析说明】IE和Firefox获取键盘值的方法不同,可以理解,Firefox下的event.which与IE下的event.keyCode相当。关于彼此不同,可参考《键盘事件中keyCode、which和charCode 的兼容性测试》
【兼容处理】
function myKeyPress(evt){//兼容IE和Firefox获得keyBoardEvent对象 evt = (evt) ? evt : ((window.event) ? window.event : "")//兼容IE和Firefox获得keyBoardEvent对象的键值 var key = evt.keyCode?evt.keyCode:evt.which;if(evt.ctrlKey && (key == 13 || key == 10)){//同时按下了Ctrl和回车键 //do something; } }
3. 事件源的获取
【分析说明】在使用事件委托的时候,通过事件源获取来判断事件到底来自哪个元素,但是,在IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性。
【兼容处理】
ele=function(evt){ //捕获当前事件作用的对象 evt=evt||window.event; return(obj=event.srcElement?event.srcElement:event.target;); }
4. 事件监听
【分析说明】在事件监听处理方面,IE提供了attachEvent和detachEvent两个接口,而Firefox提供的是addEventListener和removeEventListener。
【兼容处理】最简单的兼容性处理就是封装这两套接口:
function addEvent(elem, eventName, handler) { if (elem.attachEvent) { elem.attachEvent("on" + eventName, function(){handler.call(elem)});//此处使用回调函数call(),让this指向elem } else if (elem.addEventListener) { elem.addEventListener(eventName, handler, false); }} function removeEvent(elem, eventName, handler) { if (elem.detachEvent) { elem.detachEvent("on" + eventName, function(){handler.call(elem)});//此处使用回调函数call(),让this指向elem } else if (elem.removeEventListener) { elem.removeEventListener(eventName, handler, false); } }
需要特别注意,Firefox下,事件处理函数中的this指向被监听元素本身,而在IE下则不然,可使用回调函数call,让当前上下文指向监听的元素。
5. 鼠标位置
【分析说明】IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性。
【兼容处理】使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX。复杂点还要考虑绝对位置。
function getAbsPoint(e){ var x = e.offsetLeft, y = e.offsetTop; while (e = e.offsetParent) { x += e.offsetLeft; y += e.offsetTop; } alert("x:" + x + "," + "y:" + y); }
1. XMLHttpRequest
【分析说明】new ActiveXObject("Microsoft.XMLHTTP");只在IE中起作用,Firefox不支持,但支持XMLHttpRequest。
【兼容处理】
function createXHR() { var xhr=null; if(window.XMLHttpRequest){ xhr=new ActiveXObject("Msxml2.XMLHTTP"); }else{ try { xhr=new ActiveXObject("Microsoft.XMLHTTP"); } catch() { xhr=null; } } if(!xhr)return; return xhr; }
2. 模态和非模态窗口
【分析说明】IE中可以通过showModalDialog和showModelessDialog打开模态和非模态窗口,但是Firefox不支持。
【解决办法】直接使用window.open(pageURL,name,parameters)方式打开新窗口。 如果需要传递参数,可以使用frame或者iframe。
3. input.type属性问题
IE下 input.type属性为只读,但是Firefox下可以修改
4. 对select元素的option操作
设置options,IE和Firefox写法不同:
Firefox:可直接设置
option.text = 'foooooooo';
IE:只能设置
option.innerHTML = 'fooooooo';
删除一个select的option的方法:
Firefox:可以
select.options.remove(selectedIndex);
IE7:可以用
select.options[i] = null;
IE6:需要写
select.options[i].outerHTML = null;
5. img对象alt和title的解析
【分析说明】img对象有alt和title两个属性,区别在于,alt:当照片不存在或者load错误时的提示。
title:照片的tip说明, 在IE中如果没有定义title,alt也可以作为img的tip使用,但是在Firefox中,两者完全按照标准中的定义使用
在定义img对象时。
【兼容处理】最好将alt和title对象都写全,保证在各种浏览器中都能正常使用 。
6. img的src刷新问题
【分析说明】先看一下代码:
<img id="pic" οnclick= "this.src= 'a.jpg'"src="aa.jpg" style="cursor: pointer"/>
在IE 下,这段代码可以用来刷新图片,但在FireFox下不行。主要是缓存问题。
【兼容处理】在地址后面加个随机数就解决了:
<img id="pic" οnclick= "javascript:this.src=this.src+'?'+Math.random()"src="a.jpg" style="cursor: pointer"/>
总结
IE和Firefox的Javascript方面存在着不少的差异,要做到兼容,我觉得很有必要把一些常见的整理成一个js库,如DOM的操作,事件的处理,XMLHttpRequest请求等,或者也可以选择使用现有的一些库(如jQuery,YUI,ExtJs等),不过我觉得还是有必要了解一下这些差异,这样对于我们参加兼容性和可用性代码很有帮助。
办法总比问题多,无论浏览器兼容如何折腾人,做前端开发的总能迎刃而解的!
CSS 针对各个浏览器的兼容性
在网站设计的时候,应该注意 css 样式兼容不同浏览器问题,特别是对完全使用 DIV CSS 设计的网,就应该更注意 IE6 IE7 FF 对 CSS 样式的兼容,不然,你的网乱可能出去不想出现的效果!
所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px;
IE6 专用 *height: 100px;
IE7 专用 *+height: 100px;
IE7 、 FF 共用height: 100px !important;
一、 CSS 兼容
以下两种方法几乎能解决现今所有兼容 .
1, !important ( 不是很推荐,用下面的一种感觉最安全 )
随着 IE7 对 !important 的支持 , !important 方法现在只针对 IE6 的兼容 .( 注意写法 . 记得该声明位置需要提前 .)
代码 :
<style>
#wrapper {
width: 100px!important;
width: 80px;
}
</style>
2, IE6/IE77 对 FireFox <from 针对 firefox ie6 ie7 的 css 样式 >
*+html 与 *html 是 IE 特有的标签 , firefox 暂不支持.而*+html又为IE7特有标签.
代码 :
<style>
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
</style>
注意 :
*+html 对 IE7 的兼容必须保证 HTML 顶部有如下声明:
代码 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
二、万能 float 闭合 ( 非常重要 !) 可以用这个解决多个 div 对齐时的间距不对,
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入 Global CSS 中 , 给需要闭合的 div 加上 class=”clearfix” 即可 , 屡试不爽 .
代码 :
<style>
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
.clearfix {display:block;}
</style>
三、其他兼容技巧 ( 相当有用 )
1, FF 下给 div 设置 padding 后会导致 width 和 height 增加 , 但 IE 不会 .( 可用 !important 解决 )
2, 居中问题 .
1). 垂直居中 . 将 line-height 设置为 当前 div 相同的高度 , 再通过 vetical-align: middle.( 注意内容不要换行 .)
2). 水平居中 . margin: 0 auto;( 当然不是万能 )
3, 若需给 a 标签内内容加上 样式 , 需要设置 display: block;( 常见于导航标签 )
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float 的 div 在 ie 下 margin 加倍等问题 .
5, ul 标签在 FF 下面默认有 list-style. 和 padding . 最好事先声明 , 以避免不必要的麻烦 . ( 常见于导航标签和内容列表 )
6, 作为外部 wrapper 的 div不要定死高度,最好还加上overflow: hidden . 以达到高度自适应.
7, 关于手形光标 . cursor: pointer. 而 hand 只适用于 IE. 贴上代码 :
兼容代码 : 兼容最推荐的模式。
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right: 12px;
}
*html .submitbutton {
margin-top: 21px;
}
*+html .submitbutton {
margin-top: 21px;
}
什么是浏览器兼容:当我们使用不同的浏览器( Firefox IE7 IE6 )访问同一个网站,或者页面的时候,会出现一些不兼容的问题,有的显示出来正常,有的显示出来不正常,我们在编写 CSS 的时候会很恼火,刚修复了这 个浏览器的问题,结果另外一个浏览器却出了新问题。而兼容就是一种办法,能让你在一个 CSS 里面独立的写支持不同浏览器的样式。这下就和谐了。呵呵!
最近微软发布的 IE7 浏览器的兼容性确实给一些网页制作人员添加了一个沉重的负担,虽然 IE7 已经走向标准化,但还是有许多和 FF 不同的地方,所以需要用 到 IE7 的兼容,有许多朋友问过 IE7 的兼容是什么,其实我也不知道。暂时还没找到 IE7 专用的兼容。除了前面那片文章,《针对 firefox ie6 ie7 的 css 样式》中的兼容方式也是很好用的。
有一点逻辑思想的人都会知道可以用 IE 和 FF 的兼容结合起来使用,下面介绍三个兼容,例如:(适合新手,呵呵,高手就在这里路过吧。)
程序代码
第一个兼容, IE FF 所有浏览器公用(其实也不算是兼容)
height:100px;
第二个兼容 IE6 专用
_height:100px;
第三个兼容 IE6 IE7 公用
*height:100px;
介绍完了这三个兼容了,下面我们再来看看如何在一个样式里分别给一个属性定义 IE6 IE7 FF 专用的兼容,看下面的代码,顺序不能错哦:
程序代码
height:100px;
*height:120px;
_height:150px;
下面我简单解释一下各浏览器怎样理解这三个属性:
在 FF 下,第 2 、 3 个属性 FF 不认识,所以它读的是 height:100px;
在 IE7 下,第三个属性 IE7 不认识,所以它读第 1 、 2 个属性,又因为第二个属性覆盖了第一个属性,所以 IE7 最终读出的是第 2 个属性 *height:120px;
在 IE6 下,三个属性 IE6 都认识,所以三个属性都可以读取,又因为第三个属性覆盖掉前 2 个属性,所以 IE6 最终读取的是第三个属性。
1 针对 firefox ie6 ie7 的 css 样式
现在大部分都是用 !important 来兼容,对于 ie6 和 firefox 测试可以正常显示,但是 ie7 对 !important 可以正确解释,会导致页面 没按要求显示!找到一个针对 IE7 不错的兼容方式就是使用 “*+html” ,现在用 IE7 浏览一下,应该没有问题了现在写一个 CSS 可以这样:
#1 { color: #333; }
* html #1 { color: #666; }
*+html #1 { color: #999; }
那么在 firefox 下字体颜色显示为 #333 , IE6 下字体颜色显示为 #666 , IE7 下字体颜色显示为 #999 。
2 css 布局中的居中问题
主要的样式定义如下:
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明:
首先在父级元素定义 TEXT-ALIGN: center; 这个的意思就是在父级元素内的内容居中;对于 IE 这样设定就已经可以了。
但在 mozilla 中不能居中。解决办法就是在子元素定义时候设定时再加上 “MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个 DIV 里,你可以依次拆出多个 div ,只要在每个拆出的 div 里定义 MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解释 .
#box{
width:600px;
//for ie6.0- w/idth:500px;
//for ff+ie6.0
}
#box{
width:600px!important
//for ff
width:600px;
//for ff+ie6.0
width :500px;
//for ie6.0-
}
4 浮动 ie 产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; // 这种情况之下 IE 会产生 200px 的距离 display:inline; // 使浮动忽略 }
这里细说一下 block,inline 两个元素 ,Block 元素的特点是 : 总是在新行上开始 , 高度 , 宽度 , 行高 , 边距都可以控制 ( 块元素 );Inline 元素的特点是 : 和其他元素在同一行上 ,… 不可控制 ( 内嵌元素 );
#box{ display:block; // 可以为内嵌元素模拟为块元素 display:inline; // 实现同一行排列的的效果 diplay:table;
5 IE 与宽度和高度的问题
IE 不认得 min- 这个定义,但实际上它把正常的 width 和 height 当作有 min 的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里 这两个值就不会变,如果只用 min-width 和 min-height 的话, IE 下面根本等于没有设置宽度和高度。比如要设置背景图片,这个宽度是比较重 要的。要解决这个问题,可以这样:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6 页面的最小宽度
min-width 是个非常方便的 CSS 命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但 IE 不认得这个,而它实际上把 width 当做最小宽度来使。为了让这一命令在 IE 上也能用,可以把一个 <div> 放到 <body> 标签下,然后为 div 指定一个类:
然后 CSS 这样设计:
#container{
min-width: 600px;
width:e-xpression(document.body.clientWidth < 600? “600px”: “auto” );
}
第一个 min-width 是正常的;但第 2 行的 width 使用了 Javascript ,这只有 IE 才认得,这也会让你的 HTML 文档不太正规。它实际上通过 Javascript 的判断来实现最小宽度。
7 清除浮动
. 兼容 box{
display:table;
// 将对象作为块元素级的表格显示
}
或者
. 兼容 box{
clear:both;
}
或者加入 :after (伪对象) , 设置在对象后发生的内容,通常和 content 配合使用, IE 不支持此伪对象,非 Ie 浏览器支持,所以并不影响到 IE/WIN 浏览器。这种的最麻烦的
……#box:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
8 DIV 浮动 IE 文本产生 3 象素的 bug
左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有 3px 的间距 .
#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
// 这句是关键
}
HTML 代码
<DIV id=box>
<DIV id=left></DIV>
<DIV id=right></DIV>
</DIV>
9 属性选择器 ( 这个不能算是兼容 , 是隐藏 css 的一个 bug)
p[id]{}div[id]{}
p[id]{}div[id]{}
这个对于 IE6.0 和 IE6.0 以下的版本都隐藏 ,FF 和 OPera 作用
属性选择器和子选择器还是有区别的 , 子选择器的范围从形式来说缩小了 , 属性选择器的范围比较大 , 如 p[id] 中 , 所有 p 标签中有 id 的都是同样式的 .
10 IE 捉迷藏的问题
当 div 应用复杂的时候每个栏中又有一些链接, DIV 等这个时候容易发生捉迷藏的问题。
有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
解决办法:对 #layout 使用 line-height 属性或者给 #layout 使用固定高和宽。页面结构尽量简单。
11 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用
margin 或 paddign 时。例:
<div id=”box”>
<p>p 对象中的内容 </p>
</div>
CSS :
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法:在 P 对象上下各加 2 个空的 div 对象 CSS 代码: .1{height:0px;overflow:hidden;} 或者为 DIV 加上 border 属性。
屏蔽 IE 浏览器(也就是 IE 下不显示)
*:lang(zh) select {font:12px !important;}
select:empty {font:12px !important;}
这里 select 是选择符,根据情况更换。第二句是 MAC 上 safari 浏览器独有的。
仅 IE7 识别
*+html {…}
当面临需要只针对 IE7 做样式的时候就可以采用这个兼容。
IE6 及 IE6 以下识别
* html {…}
这个地方要特别注意很多地主都写了是 IE6 的兼容其实 IE5.x 同样可以识别这个兼容。其它浏览器不识别。
html >body select {……}
这句与上一句的作用相同。
仅 IE6 不识别
select { display :none;}
这里主要是通过 CSS 注释分开一个属性与值,流释在冒号前。
仅 IE6 与 IE5 不识别
select { display :none;}
这里与上面一句不同的是在选择符与花括号之间多了一个 CSS 注释。
仅 IE5 不识别
select { display:none;}
这一句是在上一句中去掉了属性区的注释。只有 IE5 不识别
盒模型解决方法
selct {width:IE5.x 宽度 ; voice-family :""}""; voice-family:inherit; width: 正确宽度 ;}
盒模型的清除方法不是通过 !important 来处理的。这点要明确。
清除浮动
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在 Firefox 中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的兼容来对父级做一次定义,那么就可以解决这个问题。
截字省略号
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前 Firefox 并不支持。
只有 Opera 识别
@media all and (min-width: 0px){ select {……} }
针对 Opera 浏览器做单独的设定。
以上都是写 CSS 中的一些兼容,建议遵循正确的标签嵌套 (div ul li 嵌套结构关系 ) ,这样可以减少你使用兼容的频率,不要进入理解误区,并不是一个页面就需要很多的兼容来保持多浏览器兼容 ) ,很多情况下也许一个兼容都不用 也可以让浏览器工作得非常好,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在 CSS 中通过过滤器导入特别的样式,也有的是写在 HTML 中的通过条件来链接或是导入需要的补丁样式。
IE5.x 的过滤器,只有 IE5.x 可见
@media tty {
i{content:"";}} @import ’ie5win.css’;
IE5/MAC 的过滤器,一般用不着
下面是 IE 的条件注释,个人觉得用条件注释调用相应兼容是比较完美的多浏览器兼容的解决办法。把需要兼容的地方单独放到一个文件里面,当浏览器版本符合的 时候就可以调用那个被兼容的样式,这样不仅使用起来非常方便,而且对于制作这个 CSS 本身来讲,可以更严格的观察到是否有必要使用兼容,很多情况下,当我 本人写 CSS 如果把全部代码包括兼容都写到一个 CSS 文件的时候的时候会很随意,想怎么兼容就怎么兼容,而你独立出来写的时候,你就会不自觉的考虑是否有 必要兼容,是先兼容 CSS ?还是先把主 CSS 里面的东西调整到尽可能的不需要兼容?当你仅用很少的兼容就让很多浏览器很乖很听话的时候,你是不是很有成就感呢?你知道怎么选 择了吧~~呵呵
IE 的 if 条件兼容自己可以灵活使用参看这篇 IE 条件注释
Only IE
所有的 IE 可识别
只有 IE5.0 可以识别
Only IE 5.0+
IE5.0 包换 IE5.5 都可以识别
仅 IE6 可识别
Only IE 7/-
IE6 以及 IE6 以下的 IE5.x 都可识别
Only IE 7/-
仅 IE7 可识别
Css 当中有许多的东西不不按照某些规律来的话,会让你很心烦,虽然你可以通过很多的兼容,很多的 !important 来控制它,但是你会发现长此以往你会很不甘心,看看许多优秀的网站,他们的 CSS 让 IE6,Ie7,Firefox, 甚至 Safari,Opera 运行起 来完美无缺是不是很羡慕?而他们看似复杂的模版下面使用的兼容少得可怜。其实你要知道 IE 和 Firefox 并不不是那么的不和谐,我们找到一定的方法,是完全可以让他们和谐共处的。不要你认为发现了兼容的办法,你就掌握了一切,我们并不是兼容的奴隶。
div ul li 的嵌套顺序
今天只讲一个规则。就是 <div><ul><li> 的三角关系。我的经验就是 <div> 在最外面,里面 是 <ul> ,然后再是 <li> ,当然 <li> 里面又可以嵌套 <div> 什么的,但是并不建议你嵌套很多 东西。当你符合这样的规则的时候,那些倒霉的,不听话的间隙就不会在里面出现了,当你仅仅是 <div> 里面放 <li> ,而不 用 <ul> 的时候,你会发现你的间隙十分难控制,一般情况下, IE6 和 IE7 会凭空多一些间距。但很多情况你来到下一行,间隙就没了,但是前 面的内容又空了很大一块,出现这种情况虽然你可以改变 IE 的 Margin ,然后调整 Firefox 下面的 Padding ,以便使得两者显示起来得效果很相 似,但是你得 CSS 将变得臭长无比,你不得不多考虑更多可能出现这种问题补救措施,虽然你知道千篇一律来兼容它们,但是你会烦得要命。
具体嵌套写法
遵循上面得嵌套方式, <div><ul><li></li></ul>< /div> 然后在 CSS 里面告诉 ul {Margin:0px;Padding:0px;list-style.:none;} ,其中 list-style.:none 是不 让 <li> 标记的最前方显示圆点或者数字等目录类型的标记,因为 IE 和 Firefox 显示出来默认效果有些不一样。因此这样不需要做任何手 脚,你的 IE6 、和 IE7 、 Firefox 显示出来的东西 ( 外距,间距,高度,宽度 ) 就几乎没什么区别了,也许细心的你会在某一个时刻发现一、两个象素的 差别,但那已经很完美了,不需要你通过调整大片的 CSS 来控制它们的显示了,你愿意,你可以仅仅兼容一两个地方,而且通常这种兼容可以适应各种地方,不需 要你重复在不同的地方调试不同的兼容方式 – 减轻你的烦。你可以 ul.class1, ul.class2, ul.class3 {xxx:xxxx} 的方式方便的整理出你要兼容的地方,而统一兼容。尝试一下吧,再也不要乱嵌套了,虽然在 Div+CSS 的方式下你几乎可以想怎么嵌套 就怎么嵌套,但是按照上面的规律你将轻松很多,从而事半功倍!
使用JQuery 解决浏览器兼容性一例
场景:当用户在名为abc的input控件按下回车键时,触发另一控件imgLogin的click事件
在IE 中 document.getElementById('abc').click();能够调用abc的click事件
但是在FF中却不行..
必须以下这样:
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, true);
document.getElementById("imgLogin").dispatchEvent(evt);
才能执行input控件的click 事件
如果通过JQuery的话.
$("#abc").keydown(function(e) {
if (e.keyCode == 13) {
$("#imgLogin").click();
}
});
就这样简单几句话就可以了,也不必要去判断浏览器
console导致IE提示对象未定义错误解决
1.console 只支持在firefox,不支持ie,把它注释掉就可以了。
2.安装Firebug Lite
具体安装方法查看Firebug Lite的主页
http://getfirebug.com/lite.html
3.添加一段javascript到页面中
if (!window.console || !console.firebug)
{
var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
"group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
window.console = {};
for (var i = 0; i < names.length; ++i)
window.console[names[i]] = function() {}
}
4.或直接下载firebugx.js
http://getfirebug.com/firebug/firebugx.js
下载文件时的提示“IE已阻止从此站点下载文件到您的计算机”
1、在IE工具栏点击“工具”菜单栏下的“INTERNET选项” 点击弹出窗口的“隐私”选项卡,去掉“打开弹出窗口阻止程序”前面的勾。
2、点击“安全”选项卡,点击“自定义级别”。启用 “文件下载的自动提示”。
script语法错误
jscript语法错误是指当jscript语句违反了jscript脚本语言的一条或多条语法规则时导致的错误。jscript语法错误发生在程序编译阶段,在开始运行该程序之前。(错误发生在开发过程中),以下是32个语法错误
错误号描述
十进制 十六进制 说明
1001 800a03e9 内存不足
1002 800a03ea 语法错误
1003 800a03eb 需要&#8220;:&#8221;
1004 800a03ec 需要&#8220;;&#8221;
1005 800a03ed 需要&#8220;(&#8221;
1006 800a03ee 需要&#8220;)&#8221;
1007 800a03ef 需要&#8220;]&#8221;
1008 800a03f0 需要&#8220;{&#8221;
1009 800a03f1 需要&#8220;}&#8221;
1010 800a03f2 需要标识符
1011 800a03f3 需要&#8220;=&#8221;
1012 800a03f4 需要&#8220;/&#8221;
1013 800a03f5 无效数
1014 800a03f6 非法字符
1015 800a03f7 字符串常数未结束
1016 800a03f8 注释未结束
1018 800a03fa 函数外有&#8217;return&#8217;语句
1019 800a03fb 在循环外不能有&#8220;break&#8221;
1020 800a03fc 在循环外不能有&#8220;continue&#8221;
1023 800a03ff 需要十六进制数
1024 800a0400 需要&#8220;while&#8221;
1025 800a0401 标签定义重复
1026 800a0402 未找到标签
1027 800a0403 一条&#8220;switch&#8221;语句中只能有一个&#8220;default&#8221;
1028 800a0404 需要标识符、字符串或者数字
1029 800a0405 需要&#8221;
1030 800a0406 条件编译已关闭
1031 800a0407 需要常数
1032 800a0408 需要&#8220;@&#8221;
1033 800a0409 需要&#8220;catch&#8221;
1034 800a040a 需要&#8220;var&#8221;
1035 800a040b &#8220;throw&#8221;的后面必须跟有一个表达式,且在同一源代码行上
jscript运行时错误
jscript运行时错误是指当jscript脚本试图执行一个系统不能运行的动作时导致的错误。当正在运行脚本、计算变量表达式、或者正在动态分配内存时出现jscript运行时错误时。
以下是76个运行时错误
错误号描述
十进制 十六进制 说明
5 800a0005 非法过程调用或参数
6 800a0006 溢出
7 800a0007 内存不足
9 800a0009 下标超界
10 800a000a 此数组被固定或临时锁定
11 800a000b 零除错误
13 800a000d 类型失配
14 800a000e 串空间不足
17 800a0011 不能执行所请求的操作
28 800a001c 栈空间不足
35 800a0023 子过程或函数未找到
48 800a0030 装载dll出错
51 800a0033 内部出错
52 800a0034 坏文件名或数
53 800a0035 文件未找到
54 800a0036 坏文件模式
55 800a0037 文件已经打开
57 800a0039 设备i/o错误
58 800a003a 文件已经存在
61 800a003d 磁盘空间已满
62 800a003e 输入超出文件尾
67 800a0043 文件太多
68 800a0044 设备不可用
70 800a0046 权限禁用
71 800a0047 磁盘未准备好
74 800a004a 不能用不同的驱动重命名
75 800a004b 路径/文件访问错误
76 800a004c 路径未找到
91 800a005b 对象变量或with块变量未设置
92 800a005c for循环未初始化
94 800a005e null使用无效
322 800a0042 不能建立所需的临时文件
424 800a01a8 需要对象
429 800a01a9 automation服务器不能建立对象
430 800a01ae 类不支持automation
432 800a01b0 在automation操作中找不到文件名或类名
438 800a01b6 对象不支持这个属性或方法
440 800a01b8 automation错误
445 800a01bd 对象不支持这个动作
446 800a01be 对象不支持指定的参数
447 800a01bf 对象不支持当前区域设置
448 800a01c0 指定的参数未找到
449 800a01c1 参数不可选
450 800a01c2 错误的参数数目或非法属性分配
451 800a01c3 对象不是一个集合
453 800a01c5 指定的dll函数未找到
458 800a01ca 变量使用了一个jscript不支持的automation类型
462 800a01ce 远程服务器机器不存在或不可用
501 800a01f5 不能分配给变量
502 800a01f6 对象对于脚本不安全
503 800a01f7 对象对于初始化不安全
504 800a01f8 对象对建立不安全
5000 800a1388 不能分配给&#8220;this&#8221;
5001 800a1389 需要number类型
5002 800a138a 需要function对象
5003 800a138b 不能给函数返回值赋值
5004 800a138c 不能索引对象
5005 800a138d 需要string
5006 800a138e 需要date对象
5007 800a138f 需要object类型
5008 800a1390 非法赋值
5009 800a1391 未定义标识符
5010 800a1392 需要boolean
5011 800a1393 不能执行来自一个自由脚本的代码
5012 800a1394 需要对象的成员
5013 800a1395 需要vbarray
5014 800a1396 需要jscript对象
5015 800a1397 需要enumerator对象
5016 800a1398 需要正则表达式对象
5017 800a1399 正则表达式语法错误
5018 800a139a 未预期的限定符
5019 800a139b 正则表达式中缺少&#8220;]&#8221;
5020 800a139c 正则表达式中缺少&#8220;)&#8221;
5021 800a139d 字符集范围无效
5022 800a139e 异常抛出,但无法抓住
5023 800a139f 函数没有合法的prototype(原型)对象
5024 800a13a0 待解码的uri包含有非法字符
5025 800a13a1 待解码的uri编码非法
5026 800a13a2 小数部分的位数越界
5027 800a13a3 精度越界
5028 800a13a4 需要array或arguments对象
5029 800a13a5 数组长度必须为一有限正整数
5030 800a13a6 必须赋给数组长度
js判断浏览器的类型
js判断浏览器的类型
var request = false;
var btype=getinternet();
function getinternet()
{
if(navigator.userAgent.indexOf ("msie")>0) {
return "msie"; //ie浏览器
}
if(isfirefox=navigator.userAgent.indexOf ("firefox")>0){
return "firefox"; //firefox浏览器
}
if(issafari=navigator.userAgent.indexOf ("safari")>0) {
return "safari"; //safan浏览器
}
if(iscamino=navigator.userAgent.indexOf ("camino")>0){
return "camino"; //camino浏览器
}
if(ismozilla=navigator.userAgent.indexOf ("gecko/")>0){
return "gecko"; //gecko浏览器
}
}
try {
request = new xmlhttprequest();
} catch (trymicrosoft) {
try {
request = new activexobject("msxml2.xmlhttp");//支持microsoft
} catch (othermicrosoft) {
try {
request = new activexobject("microsoft.xmlhttp");//支持非microsoft
} catch (failed) {
request = false;
}
}
}
http报文详解
HTTP请求报文解剖
HTTP请求报文由3部分组成(请求行+请求头+请求体):
下面是一个实际的请求报文:
①是请求方法,GET和POST是最常见的HTTP方法,除此以外还包括DELETE、HEAD、OPTIONS、PUT、TRACE。不过,当前的大多数浏览器只支持GET和POST,Spring 3.0提供了一个HiddenHttpMethodFilter,允许你通过“_method”的表单参数指定这些特殊的HTTP方法(实际上还是通过POST提交表单)。服务端配置了HiddenHttpMethodFilter后,Spring会根据_method参数指定的值模拟出相应的HTTP方法,这样,就可以使用这些HTTP方法对处理方法进行映射了。
②为请求对应的URL地址,它和报文头的Host属性组成完整的请求URL,③是协议名称及版本号。
④是HTTP的报文头,报文头包含若干个属性,格式为“属性名:属性值”,服务端据此获取客户端的信息。
⑤是报文体,它将一个页面表单中的组件值通过param1=value1¶m2=value2的键值对形式编码成一个格式化串,它承载多个请求参数的数据。不但报文体可以传递请求参数,请求URL也可以通过类似于“/chapter15/user.html? param1=value1¶m2=value2”的方式传递请求参数。
对照上面的请求报文,我们把它进一步分解,你可以看到一幅更详细的结构图:
引用
HttpWatch是强大的网页数据分析工具,安装后将集成到Internet Explorer工具栏中。它不用代理服务器或一些复杂的网络监控工具,就能抓取请求及响应的完整信息,包括Cookies、消息头、查询参数、响应报文等,是Web应用开发人员的必备工具。
HTTP请求报文头属性
报文头属性是什么东西呢?我们不妨以一个小故事来说明吧。
引用
快到中午了,张三丰不想去食堂吃饭,于是打电话叫外卖:老板,我要一份[鱼香肉丝],要12:30之前给我送过来哦,我在江湖湖公司研发部,叫张三丰。
这里,你要[鱼香肉丝]相当于HTTP报文体,而“12:30之前送过来”,你叫“张三丰”等信息就相当于HTTP的报文头。它们是一些附属信息,帮忙你和饭店老板顺利完成这次交易。
请求HTTP报文和响应HTTP报文都拥有若干个报文关属性,它们是为协助客户端及服务端交易的一些附属信息。
常见的HTTP请求报文头属性
Accept
请求报文可通过一个“Accept”报文头属性告诉服务端 客户端接受什么类型的响应。
如下报文头相当于告诉服务端,俺客户端能够接受的响应类型仅为纯文本数据啊,你丫别发其它什么图片啊,视频啊过来,那样我会歇菜的~~~:
Java代码 Accept:text/plain
Accept属性的值可以为一个或多个MIME类型的值,关于MIME类型,大家请参考:http://en.wikipedia.org/wiki/MIME_type
Cookie
客户端的Cookie就是通过这个报文头属性传给服务端的哦!如下所示:
Java代码 Cookie: $Version=1; Skin=new;jsessionid=5F4771183629C9834F8382E23BE13C4C
服务端是怎么知道客户端的多个请求是隶属于一个Session呢?注意到后台的那个jsessionid=5F4771183629C9834F8382E23BE13C4C木有?原来就是通过HTTP请求报文头的Cookie属性的jsessionid的值关联起来的!(当然也可以通过重写URL的方式将会话ID附带在每个URL的后面哦)。
Referer
表示这个请求是从哪个URL过来的,假如你通过google搜索出一个商家的广告页面,你对这个广告页面感兴趣,鼠标一点发送一个请求报文到商家的网站,这个请求报文的Referer报文头属性值就是http://www.google.com。
引用
唐僧到了西天.
如来问:侬是不是从东土大唐来啊?
唐僧:厉害!你咋知道的!
如来:呵呵,我偷看了你的Referer...
很多貌似神奇的网页监控软件(如著名的 我要啦),只要在你的网页上放上一段JavaScript,就可以帮你监控流量,全国访问客户的分布情况等报表和图表,其原理就是通过这个Referer及其它一些HTTP报文头工作的。
Cache-Control
对缓存进行控制,如一个请求希望响应返回的内容在客户端要被缓存一年,或不希望被缓存就可以通过这个报文头达到目的。
如以下设置,相当于让服务端将对应请求返回的响应内容不要在客户端缓存:
Java代码 Cache-Control: no-cache
其它请求报文头属性
参见:http://en.wikipedia.org/wiki/List_of_HTTP_header_fields
如何访问请求报文头
由于请求报文头是客户端发过来的,服务端当然只能读取了,以下是HttpServletRequest一些用于读取请求报文头的API:
Java代码 //获取请求报文中的属性名称
java.util.Enumeration<java.lang.String> getHeaderNames();
//获取指定名称的报文头属性的值
java.lang.String getHeader(java.lang.String name)
由于一些请求报文头属性“太著名”了,因此HttpServletRequest为它们提供了VIP的API:
Java代码 //获取报文头中的Cookie(读取Cookie的报文头属性)
Cookie[] getCookies() ;
//获取客户端本地化信息(读取 Accept-Language 的报文头属性)
java.util.Locale getLocale()
//获取请求报文体的长度(读取Content-Length的报文头属性)
int getContentLength();
HttpServletRequest可以通过
Java代码 HttpSession getSession()
获取请求所关联的HttpSession,其内部的机理是通过读取请求报文头中Cookie属性的JSESSIONID的值,在服务端的一个会话Map中,根据这个JSESSIONID获取对应的HttpSession的对象。(这样,你就不会觉得HttpSession很神秘了吧,你自己也可以做一个类似的会话管理 )
HTTP响应报文解剖
响应报文结构
HTTP的响应报文也由三部分组成(响应行+响应头+响应体):
以下是一个实际的HTTP响应报文:
①报文协议及版本;
②状态码及状态描述;
③响应报文头,也是由多个属性组成;
④响应报文体,即我们真正要的“干货”。
响应状态码
和请求报文相比,响应报文多了一个“响应状态码”,它以“清晰明确”的语言告诉客户端本次请求的处理结果。
HTTP的响应状态码由5段组成:
- 1xx 消息,一般是告诉客户端,请求已经收到了,正在处理,别急...
- 2xx 处理成功,一般表示:请求收悉、我明白你要的、请求已受理、已经处理完成等信息.
- 3xx 重定向到其它地方。它让客户端再发起一个请求以完成整个处理。
- 4xx 处理发生错误,责任在客户端,如客户端的请求一个不存在的资源,客户端未被授权,禁止访问等。
- 5xx 处理发生错误,责任在服务端,如服务端抛出异常,路由出错,HTTP版本不支持等。
以下是几个常见的状态码:
200 OK
你最希望看到的,即处理成功!
303 See Other
我把你redirect到其它的页面,目标的URL通过响应报文头的Location告诉你。
引用
悟空:师傅给个桃吧,走了一天了
唐僧:我哪有桃啊!去王母娘娘那找吧
304 Not Modified
告诉客户端,你请求的这个资源至你上次取得后,并没有更改,你直接用你本地的缓存吧,我很忙哦,你能不能少来烦我啊!
404 Not Found
你最不希望看到的,即找不到页面。如你在google上找到一个页面,点击这个链接返回404,表示这个页面已经被网站删除了,google那边的记录只是美好的回忆。
500 Internal Server Error
看到这个错误,你就应该查查服务端的日志了,肯定抛出了一堆异常,别睡了,起来改BUG去吧!
其它的状态码参见:http://en.wikipedia.org/wiki/List_of_HTTP_status_codes
有些响应码,Web应用服务器会自动给生成。你可以通过HttpServletResponse的API设置状态码:
Java代码 //设置状态码,状态码在HttpServletResponse中通过一系列的常量预定义了,如SC_ACCEPTED,SC_OK
void setStatus(int sc)
常见的HTTP响应报文头属性
Cache-Control
响应输出到客户端后,服务端通过该报文头属告诉客户端如何控制响应内容的缓存。
下面,的设置让客户端对响应内容缓存3600秒,也即在3600秒内,如果客户再次访问该资源,直接从客户端的缓存中返回内容给客户,不要再从服务端获取(当然,这个功能是靠客户端实现的,服务端只是通过这个属性提示客户端“应该这么做”,做不做,还是决定于客户端,如果是自己宣称支持HTTP的客户端,则就应该这样实现)。
Java代码 Cache-Control: max-age=3600
ETag
一个代表响应服务端资源(如页面)版本的报文头属性,如果某个服务端资源发生变化了,这个ETag就会相应发生变化。它是Cache-Control的有益补充,可以让客户端“更智能”地处理什么时候要从服务端取资源,什么时候可以直接从缓存中返回响应。
关于ETag的说明,你可以参见:http://en.wikipedia.org/wiki/HTTP_ETag。
Spring 3.0还专门为此提供了一个org.springframework.web.filter.ShallowEtagHeaderFilter(实现原理很简单,对JSP输出的内容MD5,这样内容有变化ETag就相应变化了),用于生成响应的ETag,因为这东东确实可以帮助减少请求和响应的交互。
下面是一个ETag:
Java代码 ETag: "737060cd8c284d8af7ad3082f209582d"
Location
我们在JSP中让页面Redirect到一个某个A页面中,其实是让客户端再发一个请求到A页面,这个需要Redirect到的A页面的URL,其实就是通过响应报文头的Location属性告知客户端的,如下的报文头属性,将使客户端redirect到iteye的首页中:
Java代码 Location: http://www.iteye.com
Set-Cookie
服务端可以设置客户端的Cookie,其原理就是通过这个响应报文头属性实现的:
Java代码 Set-Cookie: UserID=JohnDoe; Max-Age=3600; Version=1
其它HTTP响应报文头属性
更多其它的HTTP响应头报文,参见:http://en.wikipedia.org/wiki/List_of_HTTP_header_fields
如何写HTTP请求报文头
在服务端可以通过HttpServletResponse的API写响应报文头的属性:
Java代码 //添加一个响应报文头属性
void setHeader(String name, String value)
象Cookie,Location这些响应都是有福之人,HttpServletResponse为它们都提供了VIP版的API:
Java代码 //添加Cookie报文头属性
void addCookie(Cookie cookie)
//不但会设置Location的响应报文头,还会生成303的状态码呢,两者天仙配呢
void sendRedirect(String location)
初探浏览器缓存实现原理
浏览器缓存将文件保存在客户端,好的缓存策略可以减少对网络带宽的占用,可以提高访问速度,提高用户的体验,还可以减轻服务器的负担。因此我们有必要了解它的实现原理,用来提高网站的性能。
当一个客户端请求web服务器, 请求的内容可以从以下几个地方获取:服务器、浏览器缓存中或缓存服务器中。这取决于服务器端输出的页面信息。页面文件有三种缓存状态。
1.最新的:选择不缓存页面,每次请求时都从服务器获取最新的内容。
2.未过期的:在给定的时间内缓存,如果用户刷新或页面过期则去服务器请求,否则将读取本地的缓存,这样可以提高浏览速度。
3.过期的:也就是陈旧的页面,当请求这个页面时,必须进行重新获取。
页面的缓存状态是由http header决定的,一个浏览器请求信息,一个是服务器响应信息。主要包括Pragma: no-cache、Cache-Control、 Expires、 Last-Modified、If-Modified-Since。其中Pragma: no-cache由HTTP/1.0规定,Cache-Control由HTTP/1.1规定。
Cache-Control的主要参数
Cache-Control: private/public Public 响应会被缓存,并且在多用户间共享。 Private 响应只能够作为私有的缓存,不能再用户间共享。
Cache-Control: no-cache:不进行缓存
Cache-Control: max-age=x:缓存时间 以秒为单位
Cache-Control: must-revalidate:如果页面是过期的 则去服务器进行获取。
Expires:显示的设置页面过期时间
Last-Modified:请求对象最后一次的修改时间 用来判断缓存是否过期 通常由文件的时间信息产生
If-Modified-Since :客户端发送请求附带的信息 指浏览器缓存请求对象的最后修改日期 用来和服务器端的Last-Modified做比较
如IE的设置里面有四种方式(如图)的"每次访问页面检查",用户使用重新加载或超过了过期日期,浏览器就会认为这个页面是陈旧的(它将发送附加一个If- Modified-Since的信息. 如果页面没有改变,服务器端响应一个304状态 Not Modified,而不发送整个页面,这样就会很快,但服务器必须要生成有效的Last-Modified headers且服务器时间必须是有效的。
一个不进行缓存的服务器端响应
HTTP/1.0 200 OK
Content-Type: text/html
Content-Length: 19662
Pragma: no-cache
Cache-Control: no-cache
Server: Roxen/2.1.185
Accept-Ranges: bytes
Expires: Wed, 03 Jan 2001 00:18:55 GMT
有时候仅仅设置Pragma: no-cache Cache-Control: no-cache 还是不保险,需要将过期时间设置成过去的时间就确保了对象不被缓存。
一个允许缓存的服务器端响应
HTTP/1.1 200 OK
Date: Tue, 13 Feb 2001 14:50:31 GMT
Server: Apache/1.3.12
Cache-Control: max-age=43200
Expires: Wed, 14 Feb 2001 02:50:31 GMT
Last-Modified: Sun, 03 Dec 2000 23:52:56 GMT
ETag: "1cbf3-dfd-3a2adcd8"
Accept-Ranges: bytes
Content-Length: 3581
Connection: close
Content-Type: text/html
Cache-Control: max-age=43200 表示缓存12个小时
我们来看一个浏览器缓存的具体例子
第一次请求文件
Request:
GET /file.html HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, application/x-comet, */*
Accept-Language: en-us
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)
Host: 24.5.203.101
Connection: Keep-Alive
Response:
HTTP/1.1 200 OK
Date: Tue, 13 Feb 2001 20:00:22 GMT
Server: Apache
Cache-Control: max-age=604800
Last-Modified: Wed, 29 Nov 2000 15:28:38 GMT
ETag: "1df-28f1-3a2520a6"
Accept-Ranges: bytes
Content-Length: 10481
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html
这里返回了Last-Modified和ETag,这两个信息就是用来以后比较当前浏览器缓存的文件是否和服务器端文件一致,如果不一直就获取最新,一直则读取本地缓存。
第二次请求
Request:
GET /file.html HTTP/1.1
Accept: */*
Accept-Language: en-us
Accept-Encoding: gzip, deflate
If-Modified-Since: Wed, 29 Nov 2000 15:28:38 GMT
If-None-Match: "1df-28f1-3a2520a6"
User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)
Host: 24.5.203.101
Connection: Keep-Alive
Response:
HTTP/1.1 304 Not Modified
Date: Tue, 13 Feb 2001 20:01:07 GMT
Server: Apache
Connection: Keep-Alive
Keep-Alive: timeout=5, max=100
ETag: "1df-28f1-3a2520a6"
Cache-Control: max-age=604800
请求中的If-None-Match信息就是第一次响应的ETag,用来验证和当前响应的ETag是否一致。服务器返回Not Modified,浏览器就读取本地缓存。
我们还可以使用专门缓存服务器来改善性能。他的原理和浏览器的缓存原理一样,所有的浏览器请求将由缓存服务器响应,缓存服务器可以用自己的缓存文件或获取新的文件来响应用户的请求。因此有了缓存服务器的,将大大提高网站的性能。
象Cookie,Location这些响应都是有福之人,HttpServletResponse为它们都提供了VIP版的API:
浏览器缓存机制
浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制(如: Expires; Cache-control等)。但是也有非HTTP协议定义的缓存机制,如使用HTML Meta 标签,Web开发者可以在HTML页面的<head>节点中加入<meta>标签,代码如下:
html code
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
上述代码的作用是告诉浏览器当前页面不被缓存,每次访问都需要去服务器拉取。使用上很简单,但只有部分浏览器可以支持,而且所有缓存代理服务器都不支持,因为代理不解析HTML内容本身。
下面我主要介绍HTTP协议定义的缓存机制。
Expires策略
Expires是Web服务器响应消息头字段,在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,而无需再次请求。
下面是宝宝PK项目中,浏览器拉取jquery.js web服务器的响应头:
注:Date头域表示消息发送的时间,时间的描述格式由rfc822定义。例如,Date: Mon,31 Dec 2001 04:25:57GMT。
Web服务器告诉浏览器在2012-11-28 03:30:01这个时间点之前,可以使用缓存文件。发送请求的时间是2012-11-28 03:25:01,即缓存5分钟。
不过Expires 是HTTP 1.0的东西,现在默认浏览器均默认使用HTTP 1.1,所以它的作用基本忽略。
Cache-control策略(重点关注)
Cache-Control与Expires的作用一致,都是指明当前资源的有效期,控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多,设置更细致,如果同时设置的话,其优先级高于Expires。
http协议头Cache-Control :
值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age
各个消息中的指令含义如下:
Public指示响应可被任何缓存区缓存。
Private指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效。
no-cache指示请求或响应消息不能缓存
no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应。
min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。
还是上面那个请求,web服务器返回的Cache-Control头的值为max-age=300,即5分钟(和上面的Expires时间一致,这个不是必须的,说明本地缓存文件时间有可能小于服务器文件的修改时间,这也是产生304的原因)。
Last-Modified/If-Modified-Since
Last-Modified/If-Modified-Since要配合Cache-Control使用。
l Last-Modified:标示这个响应资源的最后修改时间。web服务器在响应请求时,告诉浏览器资源的最后修改时间。
l If-Modified-Since:当资源过期时(使用Cache-Control标识的max-age),发现资源具有Last-Modified声明,则再次向web服务器请求时带上头 If-Modified-Since,表示请求时间。web服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。若最后修改时间较新,说明资源又被改动过,则响应整片资源内容(写在响应消息包体内),HTTP 200;若最后修改时间较旧,说明资源无新修改,则响应HTTP 304 (无需包体,节省浏览),告知浏览器继续使用所保存的cache(虽然已经过期)。
Etag/If-None-Match
Etag/If-None-Match也要配合Cache-Control使用。
l Etag:web服务器响应请求时,告诉浏览器当前资源在服务器的唯一标识(生成规则由服务器觉得)。Apache中,ETag的值,默认是对文件的索引节(INode),大小(Size)和最后修改时间(MTime)进行Hash后得到的。
l If-None-Match:当资源过期时(使用Cache-Control标识的max-age),发现资源具有Etage声明,则再次向web服务器请求时带上头If-None-Match (Etag的值)。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对,决定返回200或304。
既生Last-Modified何生Etag?
你可能会觉得使用Last-Modified已经足以让浏览器知道本地的缓存副本是否足够新,为什么还需要Etag(实体标识)呢?HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题:
l Last-Modified标注的最后修改只能精确到秒级,如果某些文件在1秒钟以内,被修改多次的话,它将不能准确标注文件的修改时间
l 如果某些文件会被定期生成,当有时内容并没有任何变化,但Last-Modified却改变了,导致文件没法使用缓存
l 有可能存在服务器没有准确获取文件修改时间,或者与代理服务器时间不一致等情形
Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符,能够更加准确的控制缓存。Last-Modified与ETag是可以一起使用的,服务器会优先验证ETag,一致的情况下,才会继续比对Last-Modified,最后才决定是否返回304。
用户行为与缓存
浏览器缓存行为还有用户的行为有关!!!
用户操作 | Expires/Cache-Control | Last-Modified/Etag |
地址栏回车 | 有效 | 有效 |
页面链接跳转 | 有效 | 有效 |
新开窗口 | 有效 | 有效 |
前进、后退 | 有效 | 有效 |
F5刷新 | 无效 | 有效 |
Ctrl+F5刷新 | 无效 | 无效 |
总结
浏览器第一次请求:
浏览器再次请求时:
个人总结:上面所讲的缓存机制均是对于本地文件缓存而言。需要注意的是假如第一个请求到服务器,由于是
第一次请求,自然本地就没有缓存文件,此时服务器会返回请求的资源信息状态码是200,当然同时会把一些相应头信息返回,如Last-Modified文件的修过时间,以及expire过期时间,注意一点是浏览器本地缓存文件的日期是根据countrl-catch里面的max-mag浏览器生成的,此日期只能比服务器文件修改时间短,这也是产生304的问题根本。当第二次请求时候,这里需要说明以下,譬如对于图片来说,本地缓存文件中一般会保存一份该图片第一次返回过来时候得响应头信息,我们也可以把他理解为缓存文件的数据库,还有一份是真实的数据如图片,文档等等。每次请求时候,浏览器都会去本地缓存文件中读取这些数据库文件,然后根据文件中的响应头信息,如会找到是否包含last-modify字段,然后再本地找相应的缓存文件,注意这样一种情况,当第二次请求某个资源时候,浏览器查到本地的数据库响应文件发现文件里面包含last-modify字段值,而且没有过期,正常的他会去读本地缓存文件,可此时我手动把浏览器的缓存文件删除了在,只保留了响应头数据文件,那么此时浏览器就报错,错误信息是无法找到文件。
更多推荐
所有评论(0)