解决IE6浮动元素产生的“双边距”BUG问题及解决办法

最新推荐文章于 2020-04-14 12:17:28 发布

硬撑_青稞

最新推荐文章于 2020-04-14 12:17:28 发布

阅读量762

点赞数

本文链接：https://blog.csdn.net/sina1990125/article/details/49806673

版权

先来看看什么是“双边距”

看图，绿色盒子在蓝色盒子上左浮动了float：left；，并且以左边的外边距为100px，margin-left:100px;这样显示是正常的,那么下面我们到IE6里面去看看会是什么样。

是

看图，这是在IE6浏览器上呈现的效果，是不是看到了不同的效果，它比原来的多出了100px，那为什么会这样呢？那是因为这种情况出现的条件是:当浮动元素的浮动方向和浮动边界的方向一致时才会出现。也就是说浮动的方向与边距的方向是一致的时候就会出现！这就叫做”双边距“ 那该怎么解决呢？请继续往下看。。。。

其实很简单，在浮动元素里面添加个display:inline;就行了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

硬撑_青稞

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

IE6常见bug附解决方法

09-25

### IE6常见bug及其解决方法 #### 一、IE6怪异解析之padding与border算入宽高 **问题描述**：在没有指定文档类型声明的情况下，IE6会使用其特有的“怪异模式”（Quirks Mode）来解析页面布局。在这种模式下，元素...

IE6下兼容性常见的几个问题与解决方法

09-24

第七个问题，IE6的双边距bug，横向margin值会被放大两倍。使用display:inline可以修复这个问题，使元素不被视为块级元素，从而避免边距加倍。最后，问题八涉及到IE6下的外边距消失。当父元素宽度和内容宽度差异...

参与评论您还未登录，请先登录后发表或查看评论

IE6向左(右)浮动双倍边距bug

qq_42943107的博客

05-30

490

什么是IE6的双倍边距bug？在IE6中，当为一个向左浮动的元素设置左外边距或者为一个向右浮动的元素设置右外边距时，这个外边距将会是设置的值的2倍。通俗一点就是普通浏览器的左（右）外边距在IE6中的显示的效果是双倍，比如下图所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

兼容性—IE6下当元素浮动设置margin时会有双边距

weixin_34223655的博客

05-14

代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin: 0...

ie6下的双倍外边距问题

WEBCODE

10-19

132

一、ie6下的双倍外边距问题　.floatbox { 　　float: left; 　　width: 150px; 　　height: 150px; 　　margin: 5px 0 5px 100px; 　　　　} 　　很简单，对吧?但是当我们在IE6中查看时，会发现左侧外边距100像素，被扩大到200个像素。二、怎么会这样? ...

ie浏览器浮动出现双边距问题

weixin_30824479的博客

09-17

127

在我们的页面设计中，经常用到float这里属性，在IE中的浮动比较特别，会出现双边距的情况，下面来讨论下这个问题 1、什么情况会出现双边距 IE浏览器的浮动，如果浮动的元素的浮动方向设置的外边距，则浮动后的外边距是浮动前的两倍。如下图： div{ float:left; margin-left:10px } 代码执行后看到的margin-left其实是20px ...

IE6的双边距Bug以及解决办法

happyqyt的专栏

03-18

383

bug描述：就是你明明设置margin-left为10px，但是在IE6下显示的左边距却是20px。 bug出现的条件：当浮动元素的浮动方向和外边距的设置方向一致且浮动元素靠近浮动边界时才会出现。比如元素向左浮动时设置左边距，并且为一行中的第一个浮动元素时会出现这个bug，同样，向右浮动时设置右边距，且为一行中的最后一个浮动元素时也会出现这个bug。 bug的解决办法：给浮动元素块加上disp...

CSS制作网页时遇到BUG的解决方法

09-27

9. **IE的浮动双边距**：在IE中，浮动元素可能会出现额外的边距。使用`display: inline`可以消除这个现象。 10. **列表横向排列**：如果希望列表项横向排列，确保列表无缩进，并且列表项紧密相连。可以通过设置`...

IE6 双倍水平外边距BUG以解决方案

何东狮吼

07-27

2156

解决办法：设置display:inline解决。原因分析：块框对象默认的display属性值是block，当设置了浮动同时设置了外边距就会出现这情况。并且，因为浮动都有其相对应的对象，只有相对于其父对象的浮动才会出现这样的问题。第一个对象是相对父对象的，而第二个对象是相对第一个对

什么是IE的双边距bug和如何解决？

NeroSolomon的博客

06-19

702

display:inline和display:block区别一、什么是双边距Bug？先来看图：我们要让绿色盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度。要实现这样的效果，我们给绿色盒模型应用以下CSS属性：.floatbox { float: left; width: 150px; height: ...

如何解决IE6双边距问题？

草巾冒小子的博客

07-02

1226

解决IE6中浮动元素的margin双倍边距问题 IE6中，第一个浮动到父元素边上的元素，如果含有该方向的margin值，那么margin会以双倍显示。即：浮动元素的左边距在IE6上为所设定的左边距的两倍。这个问题只会发生在浮动行的第一个浮动元素上。准确的说：应该是每一行的第一个元素都会受此影响。为了解决该问题，需要给浮动元素添加属性display: inline，即可解决。除...

IE6浮动双边距

swallowliyan的专栏

03-17

471

什么是双边距？当我们编辑div的浮动样式时，原本设置的外边距会在IE6（360、兼容模式）下双倍显示。如下如何解决这个问题呢？

CSS在IE6浏览器中的bug及解决办法收集

尝试坚持

04-23

665

<br />1、双倍边距bug<br /> bug出现的状况： <br /> 满足下面3个条件才会出现这个BUG:<br /> 1）要为块状元素；<br /> 2）要左侧浮动；<br /> 3）要有左外边距(margin-left)； <br /> 解决办法：<br /> 只需要在相应的块状元素的CSS树形中加入“display:inline;”，代码如下：<br />#redBlock{<br />width:200px;<br />height:200px;<br /

IE6 浏览器常见兼容问题大汇总（23个）

somous_ly的专栏

08-02

1451

IE6以及各个浏览器常见兼容问题大汇总综述：虽然说IE6在2014年4月将被停止支持，但是不得不说的是，IE6的市场并不会随着支持的停止而立刻消散下去，对于WEB前端开发工程师来说，兼容IE6 兼容各个浏览器，依然是不得不面对的工作。在此总结了常见的浏览器兼容问题，里面也有IE6的常见兼容问题，供大家分享。 1.文档类型的声明。产生条件：IE6浏览器，当我们没有书写这个文档声

解决浮动后IE6会产生双倍的距离

coding

09-12

719

#box{ float:left; margin:0 0 0 100px; } 这种情况下IE6会产生200px的距离。 解决办法： 1、加上display:inline，使浮动忽略解释一下block,inline两个元素。 block:总是在新

css 一个200*200的div在不同分辨率屏幕上下左右居中

且听风吟的博客

08-01

3558

css 设置div在不同分辨率屏幕上下左右居中

面试题：一个200*200的div在不同分辨率屏幕上下左右居中，用css实现

zhou_2_2的博客

01-09

5211

利用负值来实现居中。可以脑补画面离左右都是50%，刚好可以居中，但是DIV位置在哪里，距左右外边框各负50%宽度。 <div id="div1"></div> body{margin: 0;} #div1{ width:200px;height: 200px;position: absolute;background-color: aqua; left: 50...

写出5 种以上ie6 bug 的解决方法，哪些你认为是解决起来最麻烦的？

LuckXinXin的博客

04-14

261

1）双边距BUG：float引起的，使用display:inline（在IE7,Firefox等浏览器下能正确解释左边距10px。但是在IE6下会理解为左边距20px。也就是说，在与浮动同方向的空白边会加倍，解决方法是为这个div的css中添加：display:inline，这样就可避免双倍边距bug） 2）3px空隙问题：float引起的，使用display：inline （当使用float浮动...

解决IE CSS bug：9个常见问题与修复技巧

2. **双边距问题（Double Margin Bug）**：在某些情况下，IE6会为浮动元素计算两次外边距。可以通过清除浮动或使用`display: inline-block;`来解决。 3. **透明度不兼容**：IE6-8不支持CSS的`opacity`属性。可以...