DIV+CSS网页错位原因解决方法_第1页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、div+css网页错位原因解决方法（html）div+css网页错位的缘由与解决办法经常我们会碰到我们要设置在一行显示的布局，却由于种种缘由造成了错位，看到结果是在一行的最后一个盒子布局错位掉下去了（如下图）。错位一 3错位掉落与1和2下方错位二 网页布局错位示范造成div css网页布局错位的缘由也许有两种状况，一种是宽度计算错误，一种是ie bug造成，特殊是ie6和ie7。接下来我们挨着为大家介绍错位与解决错位办法。一、宽度计算错误会决办法 - top宽度计算错误，如果总宽度为500px，有3个盒子，分离css宽度为200px、200px、100px，这个没问题会在一排显示不会错位，但假

2、如加入了css边框、padding、margin属性时，别遗忘这几个属性所占的宽度。特殊是padding与边框border占用宽度空间不要忽视了。假如有一个盒子加入左右边框，这个时候有一个盒子中刚合适的宽度条件下削减2px边框占用宽度，否则即会总3个盒子合计宽度大于了总宽度，造成错位。宽度问题造成css布局错位小结：内盒子宽度之和大于了外宽度造成错位，检查时候我们一定计算设置宽度、边框、paddind、margin之和。二、ie bug特殊是ie6和ie7造成错位 - top这个问题是最频繁的问题，我们检查完第一点宽度问题，而宽度没问题，这个时候在ie6、ie7中错位，在ie8及其它扫瞄器没有

3、错位问题，这个时候我们就要考虑到你是否用法了margin属性，通常我们用法了css浮动（css float）状况下用法margin（margin-right margin-left这里特殊是这个属性）此属性会产生双倍数值，这个时候我们需要用法css hack解决此问题。让ie6或ie7单独识别特指定margin样式。如：1、ie6单独识别（margin-left对于惟独ie6错位状况下）margin-left:5px;_margin-left:2px这个时候除ie6外其它扫瞄器设别margin-left:5px，ie6单独识别_margin-left:2px2、ie7与ie6都识别（margin-left对于ie6和ie7识别其它版本和品牌扫瞄器不设别）margin-left:5px;*margin-left:2px;这个时候除ie6和ie7外，其它扫瞄器设别margin-left:5px，ie6和ie7识别*margin-left:2px更多css hack学问大家可进入css hack栏目了解更多相关学问

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论