无锡做网站公司:css解决网页在不同浏览器下错位的方法

【导读】很多时候无锡做网站公司做网页布局的时候可能也需要兼顾到一些不常用的浏览器,比如被人放弃许久的IE。由于不同浏览器厂商的支持情况不同,错位其实是可以理解的

  很多时候无锡做网站公司做网页布局的时候可能也需要兼顾到一些不常用的浏览器,比如被人放弃许久的IE。由于不同浏览器厂商的支持情况不同,错位其实是可以理解的,我们只要找对方法,基本能解决一些常见的错位问题,让您的网站更加美观。

  例如,我们想布局一个DIV层到网页中的某一个位置,那我们在谷歌Chrome、360浏览器下都正常,但是打开IE或者Firefox浏览器时发现错位的问题。

  比如假设咱只是想让整个层排在距离上部分10px的位置,但是在IE或火狐浏览器下就偏差严重。

  css解决网页错位的方法【解决方案】

  1、页面乱的原因是因为ie6认为一个div超宽了,所以把本应float;right的div挤了下去。而如果设置为ie6下显示正常的宽度,则在ie7和firefox下看页面就会少了一块一样,也很别扭….

  怎么办?用css hack 来改写css代码

  改写前:xxx. yyy:{width:600px;} (当设为ie7和firefox下显示正常的600px时,ie6下会错位,改为590px,则ie6下正常,ie7和firefox下显示不完美)

  改写后: xxx. yyy{width:600px;* width:600px;_ width:590px;}

  (firefox不认识*和_,而ie都认识*,ie7不支持_,ie6支持_)

  顺序千万不要乱,因为当出现重复定义时,浏览器默认按最后一下渲染,所以一定要先正常,再*,最后_。

  这样firefox读取时只看到了正常的定义,而ie都能看到第二个*的定义,于是忽略第一个正常的定义,而ie中因为ie7不再支持_,所以按照第一个带*号的执行,ie6支持_,所以认为带*后的也是重复定义,予以忽略,执行最后一个定义。

无锡做网站公司:css解决网页在不同浏览器下错位的方法

  2、ie6下margin会加倍,要在css中加一句  display:inline

  还有,如果有一些其他地方不兼容的话,可以使用hack来设置独有的样式

  div{

  margin:10px;/*FF*/

  *margin:15px;/*IE7、IE6*/

  _margin:15px;/*IE6*/

  }

  3、通过!important来进行css hack

  这种也需要分情况考虑,有时候可能会使得代码过长

  4、部分IE错位可能是由于浮动问题

  比如在360浏览器下,可能会帮您的网页默认进行一个排版,但是IE可能你就必须给他一个限定值让他能懂你想把你的网页怎么布局?

  例如:.div{float:left;}强调一下,我这个层的位置需要和某个层一样居左显示。

  好了,以上就是无锡做网站公司马氪软件为大家分析的通过修改CSS来解决网页错位的几个解决方案,希望对大家有所帮助。


本文链接:http://mkapps.cn/news/design/260.html

无锡第二秀网络科技有限公司

  • 旗下 : 马氪软件
  • 主营业务 : 网站设计开发;微信公众号、小程序开发;APP开发;网络营销推广;广告设计 等
  • 联系人 : 徐经理
  • 手机 : 18706171959
  • 电话 : 0510-85873959
  • 邮箱 : b1990g228@qq.com
  • 网址 : http://mkapps.cn

如无特别说明©本站内容均为原创,转载请标注来源:无锡做网站公司http://mkapps.cn


    匿名评论
  • 评论
人参与,条评论
 您阅读这篇文章共花了: 

分享这篇文章吧!

相关文章