作为一个Web前端工程师；遇到浏览器兼容性问题出现这是必然事件！ 就最近公司一页面框架写下来时刚开始运用了满屏100%的模式写出来的框架，运用了相对定位和绝对定位:
{
关于position属性
当父元素为relative时，相对于父元素 绝对定位
position
开放分类： HTML、CSS、WEB标准、网页设计
bottom right top z-index left
position版本：CSS2 兼容性：IE4+ NS4+ 继承性：无
语法：
position : static | absolute | fixed | relative
取值：
static：默认值。无特殊定位，对象遵循HTML定位规则
absolute：将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
fixed：未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative：对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置
}，又发现在分辨率不同的情况写出现很大的差距！
于是我又采用了"响应式布局"来对不同的分辨率调用不同的css样式代码：
{
@media all and() {} 或者@media screen and(){} 以及
@media only screen and (){}
only(限定某种设备)
screen 是媒体类型里的一种
and 被称为关键字，其他关键字还包括 not(排除某种设备)
/* 常用类型 */
类型解释
all 所有设备
print文档打印或打印预览模式
screen 彩色电脑屏幕
screen一般用的比较多
第二种方式：是直接写单独的样式调用css
如下：
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 1680px) and (max-width: 1920px)">
意思是当屏幕的宽度大于1680小于1920时，应用styleB.css
样式如下例子：@media screen and (max-width: 1680px) { /*当屏幕尺寸小于1680px时，应用下面的CSS样式*/
.class { background: #ccc; }}
}
在利用这几种方法的情况下：显示的效果还不是如自己要求的那么美观；最后使用了平台常用布局：外部100%；内部<div>限制width的布局方式：然后有调用相对定位与绝对定位的密切配合；达到了最终完美的效果！
还有就是小编要告诉大家的是：我不知道是360浏览器的与众不同呢!还是本身存在的bugne ! 在对其width:100%;内部div固定长度的情况下；最外边的text-align: center;最内部的margin:0 auto;是缺一不可的哦！
content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。
若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit">
若页面需默认用ie兼容内核，增加标签：<meta name="renderer" content="ie-comp">
若页面需默认用ie标准内核，增加标签：<meta name="renderer" content="ie-stand">
谷歌与360等主流浏览器主要差异：写定位的时候会不同，px一般差1个像素，还有就是float：left;的识别与不认同的区别！ 不然那你就等着360来折磨你Web前端世界的光明吧！ 好了时间有限就说这么多吧！小小献丑，请莫吐槽！
