IE6常见Bug2:双边距问题
来源:全网云cms网站管理系统 日期:2015-09-08 12:47:31 属于:浏览器兼容问题
先看以下代码:
在IE6显示效果如下:
在火狐显示效果如下:
在IE6显示效果如下:
可以看到,在IE6中显示的红色区域的左边距实际为40px,是CSS代码中设置的20px的两倍,这是IE6的双边距BUG。当满足下面这三个条件时,就会出现这个BUG:
1、要为块状元素;
2、要左侧浮动;
3、要有左外边距(margin-left)。
解决这个BUG,只需在相应的块状元素的CSS属性中加入“display:inline;”。
出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现。也就是说,并不是只有块状元素左浮动,且具有左外边距时才有这个BUG,当一个盒子右浮动的同时有一个向右的margin-right的时候,IE6也会把margin-right解析为原来的2倍。当有多个同行元素都浮动了,而且都有同方向的margin,只有最靠近浮动方向的元素才会有双边距bug。
解决这个bug有两个方法:
1、给float的元素添加一个display:inline
2、给ie6写一个hack,其值是正常值的一半,即_margin-right:10px;这个方法不推荐,因为要加hack写法,而这个是要尽量避免写的。但是这个正好能够说明这个bug的真实存在。
将display设置为inline后,就改变了BUG产生的条件之一(即必须是块状元素)。
但是熟悉规则的人知道:浮动元素自动设置为”block”元素,而不管他们之前是什么。这说明浮动元素上的{display: inline;}会被忽略,事实上所有的浏览器没有呈现任何改变,包括IE。但是,在IE6中阻止了浮动元素的边界翻倍。
1、要为块状元素;
2、要左侧浮动;
3、要有左外边距(margin-left)。
解决这个BUG,只需在相应的块状元素的CSS属性中加入“display:inline;”。
出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现。也就是说,并不是只有块状元素左浮动,且具有左外边距时才有这个BUG,当一个盒子右浮动的同时有一个向右的margin-right的时候,IE6也会把margin-right解析为原来的2倍。当有多个同行元素都浮动了,而且都有同方向的margin,只有最靠近浮动方向的元素才会有双边距bug。
解决这个bug有两个方法:
1、给float的元素添加一个display:inline
2、给ie6写一个hack,其值是正常值的一半,即_margin-right:10px;这个方法不推荐,因为要加hack写法,而这个是要尽量避免写的。但是这个正好能够说明这个bug的真实存在。
将display设置为inline后,就改变了BUG产生的条件之一(即必须是块状元素)。
但是熟悉规则的人知道:浮动元素自动设置为”block”元素,而不管他们之前是什么。这说明浮动元素上的{display: inline;}会被忽略,事实上所有的浏览器没有呈现任何改变,包括IE。但是,在IE6中阻止了浮动元素的边界翻倍。
上一浏览器兼容专题: IE6常见Bug3:3像素bug
下一浏览器兼容专题:IE6常见Bug1:透明问题
相关浏览器兼容专题
- 2015-09-08IE6常见Bug6:定位位置错误
- 2015-09-08 IE6常见Bug5:表单元素偏离
- 2015-09-08 IE6常见Bug4:图片链接无效
- 2015-09-08 IE6常见Bug3:3像素bug
- 2015-09-08IE6常见Bug1:透明问题
首页 / 产品介绍 / 微信/手机站模板 / 电脑站模板 / 小程序模板 / 建站问答 / 应用下载 / 产品手册 / 网站百科 / 建站代理 / 网站案例 / 论坛 / 关于我们 / sitemap
合作伙伴:
开智机器人 | 赴美生子 | 400电话 | 中文分类目录 | 400电话办理 | 香港空间 | 泰国试管婴儿 | 全网目录 | 推拿按摩培训 | 山东春考 | DMOZ目录 | 开放分类目录 | 孙悟空 | 分类目录 | 全网云360
友情链接: 临沂律师 | 临沂批发 | 按摩培训 | 小儿推拿培训 | 临沂400电话 | 推拿培训 | 空间域名 | 山东seo | 临沂网络公司 | 手机网站模板 | 微信网站建设
友情链接: 临沂律师 | 临沂批发 | 按摩培训 | 小儿推拿培训 | 临沂400电话 | 推拿培训 | 空间域名 | 山东seo | 临沂网络公司 | 手机网站模板 | 微信网站建设
联系人:李先生 电话:13013553001 传真:0539-8172033 邮件:969421668@qq.com
网址:http://www.qwycms.com 《全网云网站管理系统》官方QQ:969421668
地址:山东省临沂高新技术产业开发区应用科学城A座518
临沂木火网络科技有限公司 2021-2026 保留所有权利 鲁ICP备16043239号 鲁公网安备37131102371370号 工商亮照
网址:http://www.qwycms.com 《全网云网站管理系统》官方QQ:969421668
地址:山东省临沂高新技术产业开发区应用科学城A座518
临沂木火网络科技有限公司 2021-2026 保留所有权利 鲁ICP备16043239号 鲁公网安备37131102371370号 工商亮照