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差不多。