IE6下margin双倍边距Bug的处理办法
来源:互联网 发布:淘宝拖动滑块完成验证 编辑:程序博客网 时间:2024/05/22 15:17
一、什么是双边距Bug?
先来看图:
我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素。这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度。要实现这样的效果,我们给绿色盒模型应用以下CSS属性:
.floatbox { float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px; }
很简单,对吧?但是当我们在IE6中查看时,会发现左侧外边距100像素,被扩大到200个像素。如下图:
二、怎么会这样?
说实话,这个原因还真是不清楚。但是这样的结果确确实实在IE6中出现了。而且这种情况出现的条件是当浮动元素的浮动方向和浮动边界的方向一致时才会出现。如同上面的例子一样,元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理,元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有多个浮动元素,第一个浮动元素会出现这个双边距bug,其它的浮动元素则不会。
三、如何修正这个Bug?
很简单,只需要给浮动元素加上display:inline;这样的CSS属性就可以了。就这么简单?对,就这么简单。如下图:
CSS代码如下:
.floatbox { float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px; display: inline; }
阅读全文
0 0
- IE6下margin双倍边距Bug的处理办法
- IE6下margin双倍边距Bug的处理办法
- IE6下margin双倍边距Bug的处理办法
- 【IE6 Bug】margin双倍边距Bug的处理办法
- IE6下margin双倍边距Bug处理办法
- 【转】IE6下margin双倍边距Bug的处理办法
- IE6下margin双倍边距
- ie6 下双倍 margin bug 及解决方案
- IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法
- IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法
- IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法
- IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法
- IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法
- IE6的双倍边距bug
- 解决IE6下margin双倍边距问题
- IE6双倍边距BUG
- IE6双倍边距bug
- IE6 margin 双倍边距解决方案
- 初次接触tensorflow【转载】
- Krypton Factor UVA
- 使用JDBC的三种连接方式查表
- 关于Tomcat服务搭建及配置
- 为什么在main函数中run as application,执行正常;而通过tomcat发布后,就报错classnotfound?
- IE6下margin双倍边距Bug的处理办法
- std::function的用法
- 软件编写规范(质量保证篇)
- 第10篇-JAVA 集合框架-JAVA 泛型
- UDP的编程
- pandas层次化索引
- javascript 对象与字符串相互转换函数 JSON.stringify 和 JSON.parse 的使用
- OpenCV3.1丢失Nonfree模块
- 九度oj-1068-球的半径和体积