跟小e学制作：网站版面错位怎么解决

我们做好网站之后，希望自己的网站在不同浏览器下显示都是正常的，但往往会出现在某些浏览器下显示正常，有些浏览器却出现网站版面错位的情况。如下图红框区域所示，左右两个灰色边框上下没有对齐。

网站版面错位的原因

对于一些IE老版浏览器，如IE6、IE7，对于网站样式文件CSS中的样式代码识别与新版浏览器有很多不同。例如CSS中margin属性，低版本的IE浏览器会显示双倍于我们设置的值，这样就很容易出现版面错位。

网站的兼容性CSS样式没有写好，导致在不同浏览器下，网站显示的样式不一样，产生错位。

网站版面错位解决方法

如果网站只是在低版本IE浏览器下错位，其它浏览器显示正常。说明我们的网站代码是没有问题的，是浏览器的原因造成的。解决这个问题，只能对IE低版本浏览单独写样式。如：，在属性前面加个“_”。

如果网站在新版浏览器也出现错位，就要检查一下CSS中浏览器重置代码是否写好。以下是浏览器兼容代码，可以尝试使用在个人网站中，并观察浏览效果。

/* 重置浏览器样式 */

*

html

body, button, input, select, textarea

h1, h2, h3, h4, h5, h6

ul, ol

table

img

a

a:link

a:visited

a:hover

a:active

em, i

pre

如果需要制作自适应网站，最好使用BOOTSTRAP自适应前端框架，可以很好的兼容各种浏览器。