web前端---------布局与css
这段时间搞web前端搞的我都神经了。
明明在本地调试的时候访问正常,放在服务器上的时候再访问布局就有问题。搞的我都神经了。
问题来了:
Q1:
参数 |
环境1 |
环境2 |
服务器 |
tomcat版本一致 |
tomcat版本一致 |
服务器所在的系统环境 |
自己的pc
|
公共网的linux |
浏览器版本 |
360-V7兼容模式 |
360-V7兼容模式( |
浏览器所在位置 |
自己的pc |
自己的pc |
页面布局效果 |
是预期的效果 |
不是预期的效果 |
结果为什么是这样啊?变量明显只有一个,那就是服务器所在的系统环境不一样。
稍后解释。
Q2:
本地调试调试web程序,更换浏览器,发现有些浏览器布局正常,有些不正常。
-----------------------------------------------------------------------传说中的分割线-------------------------------------------------------------------------------------
浏览器版本的实质在于浏览器内核的替换。个别浏览器提供双核:极速,兼容。极速模式的内核是谷歌浏览器内核,兼容模式的内核是ie内核。
我所用到的项目在极速模式下布局正常,在兼容模式下个别浏览器出现不正常。那么ie有什么秘密呢。
通过资料查询得知,兼容模式下可以指定 “浏览器模式” 和“文本模式”。
浏览器模式可以模拟你需要的浏览器版本7,8,9....
文本模式可以模拟你的web页面渲染引擎。<--------------------------此为核心。
不同ie有不同的渲染引擎以及Quirks引擎。不同引擎导致页面布局效果不一致。此为布局紊乱的结果。
那么只要指定渲染引擎就可以搞定界面布局紊乱了。
实测,ie渲染引擎在使用ie8以及ie8以上的时候,界面正常。win7系统自带ie8。
因此在web页面加上头部加上
<meta http-equiv="X-UA-Compatible" content="IE=edge" />【表达的意思:使用ie最高渲染引擎来渲染】
就ok了。
(以下代码未在工程中引用。)
那么ie7一下怎么解决。
先来看看下面的CSS代码:
_background-color:red;
下面我简单解释一下各浏览器怎样理解这三个属性:
在FF下,第2、3个属性FF不认识,所以它读的是background-color:orange;
在IE7下,第3个属性IE7不认识,所以它读第1、2个属性,又因为第2个属性覆盖了第1个属性,所以IE7最终读出的是第2个属性*
在IE6下,这3个属性IE6都认识,所以3个属性都可以读取,又因为第3个属性覆盖掉前2个属性,所以IE6最终读取的是_
这应该可以解决了吧!
-------------------------------------------------------------分割线----------------------------------------------------------------
前提:
用户不会动用F12模式,所以用户要的效果就是极速和兼容切换不会出现布局问题就ok。所以我们设置渲染引擎就可以解决兼容模式布局问题。
那么回到最初的问题:
A1:调试发现访问服务器上的网页时,渲染模式成为Quirks模式。而访问本地的时候,渲染模式时ie8。所以访问本地服务器正常,访问linux服务器不正常。那么为什么会出现这种情况(实为不解,应该和ie安全设置有关吧。有人知道的话,请留言)
A2:不同浏览器的默认渲染引擎不一样,答案和A1差不多。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。