悲催的IE6 七宗罪大吐槽(带解决方法)第一部分
一、奇数宽高
悲剧的IE6啊,为何有如此多bug,但用户市场又那么大,真让我们搞网站的纠结。今天就遇到了一个非常奇怪但又很细节的一个bug,一个外部的相对定位div,内部一个绝对定位的div(right:0),如下图所示:
可是在IE6下查看,却变成了right:1px的效果了,是特效吗,不像:
结果发现只要外部div的高或宽为奇数时,就会出现如上1px的问题,修复问题的解决方案就是把外部div的高或宽设为偶数。
以下是css代码:
#outer {
width: 609px;/*这里宽度为奇数,bug就出现了!!改成偶数就OK了*/
height: 300px;
position: relative;
background:#CC9900;
color:#FFF;
}
#inner {
width: 200px;
height: 250px;
position: absolute;
top: 0px;
right: 0px;
background:#FFCC00;
}
以下是html代码:
<DIV id=outer>
#outer 相对定位
<DIV id=inner>#inner 绝对定位</DIV>
</DIV>
虽然这只是1px的问题,非常非常细节,但对于那些最求完美网页设计的人来说这个bug是难以忍受的,虽然上面的解决方案有点投机取巧,但我可以告诉你,解决的ie6 bug的方法大部分都这样,勉强用着吧。
二、双倍边距
IE6 的bug算是让人头疼甚至蛋疼到了极点,有时候他的种种bug会带给你无限的惊奇,有时候一个在其他浏览器上非常完美的网页到IE6上就乱成一团。今天就遇到了这个问题,在firefox上调试页面时页面都没问题,但一到IE6上,吓了一跳,布局完全乱掉。后来发现是IE6下浮动层双倍边距的bug引起的,于是就把问题整理了一下,分享给大家,相信写网页的朋友一定会遇到这种神奇的事情的。
1、bug问题描述:
一个浮动的div在IE6下可能会产生双倍边距的bug问题,具体产生的条件是:如果左浮动,则左边距加倍;如果右浮动,则右边距加倍。见下图:
正常的情况下margin-left是50px
IE6下margin-left变成了100px,加倍了:(
2、解决办法:
解决办法也很简单,只要给浮动层加一个css属性display:inline即可解决问题。
最新文章
- 【leetcode】Compare Version Numbers
- 如何为编程爱好者设计一款好玩的智能硬件(八)——LCD1602点阵字符型液晶显示模块驱动封装(中)
- org.eclipse.ui.menus扩展点学习
- android 61 logcat
- 2014.8.4我出的模拟赛【NTR酋长】
- YII2 实现后台操作记录日志
- Oracle按不同时间分组统计
- 使用Asp.Net MVC开发兼职文章系统
- split()方法
- C++ 知识点总结复习
- 【Canal源码分析】Canal Instance启动和停止
- 2、阿里云ECS发送邮件到腾讯企业邮箱(ECS默认不开启25端口)
- 理解 Memory barrier(内存屏障)无锁环形队列
- httplib和urllib2常用方法
- BZOJ1565[NOI2009]植物大战僵尸——最大权闭合子图+拓扑排序
- 网络编程基础【day10】:我是一个进程(三)
- 51Nod1634 刚体图 动态规划 容斥原理 排列组合
- Android:进程优先级
- EF For Mysql
- Kettle命令行使用说明
热门文章
- AWS EC2安装docker时的问题
- url 地址含参数较多如何拼接
- Git查看与修改用户名、邮箱(转载)
- vue 使用出现的问题(持续记录)
- vue中的数据双向绑定
- Java乐观锁、悲观锁
- java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986
- 解题:HEOI 2015 最短不公共子串
- fzyzojP2984 -- 序列变换问题
- nodejs调用脚本(python/shell)和系统命令