0%
这是一片思考的空间 -- arthinking
Spring 重构&代码整洁之道 软件设计 JVM 并发编程 数据结构与算法 分布式 存储 网络 微服务 设计模式
Java技术栈 - 涉及Java技术体系

IE6下常见的几个CSS兼容问题

IE6****浮动产生双边距的问题:

在IE6下面,有浮动时,margin-right:出现了两倍的边距。这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间,在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样,双倍边界同样神秘地显示在居右的相同方式。

解决办法很简单,就是在外部容器的CSS加入 display:inline 属性。

IE6下的marginpadding****的问题:

IE6里面的div会挤压外面的div:造成各个浏览器宽度不同是由于IE6使用margin或padding会挤压div的宽度,导致宽度变长造成的,而IE7,IE8不会。无论是IE7还是IE8使用padding都会往外挤,只是IE6不够位置了会挤压到变形,而其他浏览器不够位置则会各个模块的空间重叠在一起。

margin与padding的区别:

margin挤压别的容器,别的容器不一定会被挤压扩大 padding挤压自身,自身肯定会被挤压扩大 使用margin和padding调节宽度的注意事项,注意在IE6,IE7,IE8中测试;

注释bug3像素bug): IE6出现重复字符的bug(注释bug、3pixbug)

一个容器包含2两个具有“float”样式的子容器。 第二个容器的宽度大于父容器的宽度,或者父容器宽度减去第二个容器宽度的值小于3。(说到3,这里稍微多说一句——IE7还修正了IE6中的一个bug,bug名字就叫做“3像素bug”) 在第二个容器前存在注释(这也是为什么此bug也叫做“IE6注释bug”的原因)。

为何会出现重复文字

bug虽然的的确确的存在,但是为什么会出现这样的bug依然没有统一的定论。不同的高手也是各执一词,谁也说服不了谁。真正的原因也许只有当时的IE6团队才能道出来,但是现在仍然没有官方的说法。下面列出来的这两种说法,是只是现在网上认可度比较高的而已——

IE6浏览器对注释的解释存在bug引起的。

“3像素bug”的扩展后遗症。(“3像素bug”我们将在《IE7的web标准之道》系列以后的文章中讲到) 其他的一些说法

如何消灭重复文字

引起的原因,也许我们可以不知道,但是如何去消除却是我们一定要关注的。 “歌剧院魅影bug”已经在IE7中得到修正,在FireFox和Opera中也不会出现,所以bug的修正主要是针对IE6的。

针对于上文中讲到的“bug重现条件”,如果要修正bug,只要让任何一个条件不满足即可—— 改变结构,不出现【一个容器包含2两个具有“float”样式的子容器】的结构。 ——此解决方案的评论:疯了!因噎废食的做法。 减小第二个容器的宽度,使父容器宽度减去第二个容器宽度的值大于3,例如将本文示例中第二个子容器的宽度改为197px。 ——此解决方案的评论:在满足页面布局的前提下可以使用。但是当情况比较复杂的时候,可能实施起来比较困难。 去掉所有的注释。 ——此解决方案的评论:最直接的做法,但是“没有注释的代码”,的确不是一个好的代码写作习惯。 修正注释的写法。将 写成 ——此解决方案的评论:还不错的解决方案,但是并不是每个人都对这种注释写法很欣赏。 在第二个容器后面加一个或者多个

来解决。 ——此解决方案的评论:另人感觉很不爽的解决方案。但是的确能解决。

欢迎关注我的其它发布渠道

订阅IT宅
内功修炼
Java技术栈
Java架构杂谈是IT宅精品文章公众号,欢迎订阅:
📄 网络基础知识:两万字长文50+张趣图带你领悟网络编程的内功心法 📄 HTTP发展史:三万长文50+趣图带你领悟web编程的内功心法 📄 HTTP/1.1:可扩展,可靠性,请求应答,无状态,明文传输 📄 HTTP/1.1报文详解:Method,URI,URL,消息头,消息体,状态行 📄 HTTP常用请求头大揭秘 📄 HTTPS:网络安全攻坚战 📄 HTTP/2:网络安全传输的快车道 📄 HTTP/3:让传输效率再一次起飞 📄 高性能网络编程:图解Socket核心内幕以及五大IO模型 📄 高性能网络编程:三分钟短文快速了解信号驱动式IO 📄 高性能网络编程:彻底弄懂IO复用 - IO处理杀手锏,带您深入了解select,poll,epoll 📄 高性能网络编程:异步IO:新时代的IO处理利器 📄 高性能网络编程:网络编程范式 - 高性能服务器就这么回事 📄 高性能网络编程:性能追击 - 万字长文30+图揭秘8大主流服务器程序线程模型
📄 Java内存模型:如果有人给你撕逼Java内存模型,就把这些问题甩给他 📄 一文带你彻底理解同步和锁的本质(干货) 📄 AQS与并发包中锁的通用实现 📄 ReentrantLock介绍与使用 📄 ReentrantReadWriteLock介绍与使用 📄 ReentrantLock的Condition原理解析 📄 如何优雅的中断线程 📄 如何优雅的挂起线程 📄 图解几个好玩的并发辅助工具类 📄 图解BlockingQueue阻塞队列
📄 消息队列那么多,为什么建议深入了解下RabbitMQ? 📄 高并发异步解耦利器:RocketMQ究竟强在哪里? 📄 Kafka必知必会18问:30+图带您看透Kafka
📄 洞悉MySQL底层架构:游走在缓冲与磁盘之间 📄 SQL运行内幕:从执行原理看调优的本质 📄 洞悉Redis技术内幕:缓存,数据结构,并发,集群与算法