java浏览器文档模式吗,【浏览器】浏览器模式与文档模式区别

本文详细探讨了浏览器模式与文档模式的区别,重点在于它们如何影响CSS渲染、IE条件注释以及JavaScript中获取浏览器版本信息的行为。浏览器模式主要影响服务器端对浏览器版本的判断,而文档模式则关乎IE的排版引擎,从而影响DOM渲染和CSS Hack的处理。通过实例代码,展示了不同模式下页面呈现和脚本执行的差异,强调了这两种模式在前端开发和兼容性测试中的重要性。
摘要由CSDN通过智能技术生成

浏览器模式下的影响:

简单来说,“浏览器模式”影响的是浏览器的版本及IE的条件注释,

”浏览器模式”会影响服务器端对浏览器版本的判断,主要表现在展现,对CSS影响很大

先看看以下的代码:

8d7055105f9e9d21a6a669fa3246da54.png

.content{color:#F00;}

”浏览器模式”为IE7的情况下,字体颜色为红色,其他情况为黑色。

0e24a6a1efb003b6c5dc1cfeb3c9e689.png

这是一段非常简单的IE条件注释代码,在IE7下字体的颜色会被解析为红色,此时我们切换浏览器模式并保持文档模式不变,效果如图:

2a69c9209bf886f285dc98e848ad2408.png

2d236a2a6f82673651cec3b2b0f87706.png

14f9e69296faaed14e197d0e9b69d3ea.png

可见,切换”浏览器模式”,对IE的条件注释会有影响。

另外,”浏览器模式”对服务器端获得浏览器版本好也会有影响,看下面的代码:

alert(navigator.appVersion);

这是非常简单的一段JS代码,作用是输出浏览器的版本信息,用于检测浏览器的版本,在不同浏览器模式下效果如图:

58a18f3aa8d1bcd42fbea19c0aa14b6e.png

-———————————————————————————————————————————————————————

118150d60ae053c5ead52f170baad9d6.png

-—————————————————————————————————————————————————————–

2c781a0d73d1723061a4b524291ec0cc.png

可见,不同的浏览器模式导致了JS中appVersion的值的不同,即浏览器的版本信息发生了变化。

“浏览器模式”中还有另外一个模式——兼容性视图,在测试中发现,当把浏览器模式切换为改模式后,IE7注释可触发,JS显示的版本号也为IE7,有兴趣的同学可以自行测试,此处不再累述。

浏览器模式下的影响:

”文档模式”影响的是IE的排版引擎,对DOM的渲染会产生影响,下面通过例子来看看到底有哪些影响,首先还是看代码:

.content{#color:#F00;}

文档模式为IE7的情况下,字体颜色为红色,其他情况为黑色。

这里用到了HACK,在IE6、7下,文字的字体应为红色,其他浏览器为默认的黑色字,保持浏览器模式不变的情况下,切换文档模式,效果如图:

7cec331d19676ff4533fe90dd43e6761.png

2361644f72b19312dd1a37fc9bae40cc.png

68a46ddcc3d53a8cef5a380b332af3b7.png

可见,“文档模式”对CSS hack产生了影响,也就是说,“文档模式”的切换会直接影响到页面的渲染,即之前所说的Trident引擎,这也就是为什么IE的Quirks模式是在 “文档模式”中切换而非在“浏览器模式”中切换的原因(Quirks模式中的盒模型的解析与标准不同)。

再来看看以下的一段代码:

周所周知,这段代码的作用是令IE8+的浏览器以IE7的模式来渲染页面,以期达到向前兼容的目的,当我们在页面中加入这段代码后,浏览网页,出现的效果如图(IE9浏览器):

3b603c71029e30229fc0d1c5501b306a.png

浏览器的默认文档模式被设置为IE7或IE8,渲染模式也以IE7或IE8的模式进行渲染,也就是说,在页面中插入

这段声明会直接影响到文档模式,当然,此处用户可手动切换文档模式,这么做可以让一些不兼容新版IE的页面在加入此段声明后能够更好地在新版IE 浏览器中被浏览。

https://www.cnblogs.com/hanfeihanfei/category/927424.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值