学习
实践
活动
工具
TVP
写文章

跟小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自适应前端框架,可以很好的兼容各种浏览器。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181122B0IIU900?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券