css定位中的top值为什么在谷歌和在360浏览器中显示的位置不一样了

html-css023

css定位中的top值为什么在谷歌和在360浏览器中显示的位置不一样了,第1张

你遇到了前端架构师的噩梦-浏览器兼容。由于各浏览器，各版本，可能存在的BUG，或差异，（IE较为严重）。其渲染结果也就可能偏差，可以尝试换一种写法，或者hack写法修正这些差异。基本上一个项目完成都要测试诸如谷歌，火狐，欧朋，IE，斯巴达[Win10]，五种浏览器【内核不同】。以及PC端不同分辨率，还要考虑移动端【手机】各种浏览器等跨平台兼容。360浏览器用的是双内核，谷歌的WebKit和IE内核。css定位中的top值为什么在谷歌和在360浏览器中显示的位置不一样了

首先要做的是盒子自适应屏幕大小，这样布局就不会乱，例如给ul的宽100%

li的宽：calc(33.3333%)这样不管什么时候在什么手机上都能正常，然后要做的就是图片适应盒子大小，给图片设置display:blockwidth:100%这样图片就是根据盒子来适应大小的。

4 种不同类型的定位。

static：默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

relative：生成相对定位的元素，相对于其正常位置进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。