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:orange; 
*background-color:blue;    
_background-color:red; 
 
css test -www. .bgc{ width:200px; height:200px; *background-color:blue; _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差不多。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。