`
zhouyrt
  • 浏览: 1162178 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

IE6双空白边bug

    博客分类:
  • BUG
阅读更多

在IE5.5,6下,如果一个元素向左浮动(float:left),且添加了向左空白边(margin-left:10px)。那么会自动的加一倍变成20px。

如下html:在IE5.5,6下测试会发现marginLeft变成了20px

<style type="text/css">
#div2{
	margin:0 0 0 10px;
	float:left;
	width:300px;
	height:50px;
	border:1px solid gray;
}
</style>
<div style="border:1px solid red;">
	<div id="div2">
		IE6双空白边bug		
	</div>
	<div style="clear:both;"></div>
</div>

 

解决方法是给#div2加:display:inline,当然只针对IE6一下,可以使用下划线加属性_display:inline,这样只有IE6能识别了。

 

ps:边距翻倍只有当元素的边距碰到包含块时才发生。当一个元素被浮动到另一个浮动元素时不会翻倍。另marginTop和marginBottom都不会翻倍。

 

 

0
0
分享到:
评论

相关推荐

    9个最常见IE的Bug及其fix

    描述:“9个最常见的IE6 Bug,快解决头疼的IE6吧” 在本文中,我们将深入探讨IE6中最为常见的九个Bug,并提供相应的解决方案,帮助Web开发者们解决这个曾经令人头疼的问题。 ### 1. 居中布局问题 在CSS布局中,将...

    IE6 float:left margin-left出现两倍像素

    在IE6下(标准模式/怪异模式) 一个元素向左浮动(float:left),...IE6双空白边Bug&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div xss=removed&gt; &lt;div id=”d1″ style=”margin:0 0 0 10px;float:left;border:1px s

    css常见的bug(ie)

    以下是一些针对IE浏览器的CSS常见bug及解决策略: 1. **浮动元素的双倍margin问题**: 在IE6中,如果一个浮动元素设置了margin属性,可能会导致实际的外边距比预期的要宽一倍。为了解决这个问题,可以将浮动元素的...

    最常见的9种IE_css_bug及fix

    ### 最常见的9种IE_css_bug及fix:深入解析与解决方案 #### 1. 居中布局问题 在Web开发中,将元素居中是极为常见的需求。通过设置`margin: auto;`通常能够轻松实现这一目标,但在IE6中,这种方法却会遇到问题。...

    IE 常见bug 及其fix

    在Web开发领域,Internet Explorer(IE)曾是程序员们的一大挑战,尤其是对于前端开发者来说,因为IE中存在许多特有的bug。这些bug不仅让开发者头疼,还严重影响了开发效率。本篇将详细介绍9个最常见的IE bug及其...

    IE6兼容性问题及IE6常见bug详细汇总

    以下是一些关于IE6兼容性和bug的详细解释及其解决方案: 1. **IE6怪异解析模式**:在没有文档声明的情况下,IE6会采用非标准的盒模型解析布局。为解决这个问题,应在文档开头添加`&lt;!doctype html&gt;`声明,使浏览器...

    IE6双倍边距 IE6浏览器会出现双倍边距解决方法

    在网页设计领域,IE6(Internet Explorer 6)双倍边距问题是一个历史悠久且让开发者头疼的兼容性问题。这个现象特指在IE6浏览器中,如果一个元素同时设置了浮动(float)属性和外边距(margin),那么在实际渲染时,这个...

    margin值在IE6变成双倍

    标题中的“margin值在IE6变成双倍”指的是在Internet Explorer 6(简称IE6)浏览器中,当设置元素的外边距(margin)时,可能会遇到一个知名的兼容性问题,即所谓的“双边距问题”(Double Margin Bug)。这个问题主要...

    关于Vue在ie10下空白页的debug小结

    前几天写的一段Vue,在ie下一片空白,f12显示script1003: expected : 。于是就有了这篇文章… 解决过程 baidu、google之,说是json最后一项有多余的逗号,例如 { a: 5, b: 4, // 最后一项不能有逗号 } 检索修正...

    ie6,ie7兼容性总结

    **问题描述**:在IE6和IE7中,`img`标签后若有空白字符,会导致图片下方出现额外的空白空间。 **解决方案**:通过设置`img`的`display`属性为`block`来解决。 ##### 9. 失去`line-height`效果 **问题描述**:在IE...

    IE6的双倍,3px,注释引起的文字错位等几个BUG解决方法

    以下将详细介绍IE6中常见的几个BUG及其解决方法,包括DIV中背景图片下方出现的3px空白间隔问题、双倍浮动BUG、注释引起的文字错位BUG以及著名的3px间隙BUG。 1. DIV中背景图片下方的3px空白间隔问题 在IE6中,当...

    解决在iframe页面里使用了DD_belatedPNG后显示空白的bug

    6. **更新浏览器**:鼓励用户升级到较新版本的浏览器,以获得更好的PNG透明度支持和更少的兼容性问题。 7. **备用方案**:对于仍然遇到问题的旧版IE用户,可以提供一个降级的非透明PNG图像或使用其他CSS技巧,如`...

    最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)

    当一个`float`元素旁边还有一个非`float`元素时,在IE6/7中可能会出现一个3像素的空白区域。解决方法是为`float`元素添加负的`margin-right`。 ```css #left { float: left; width: 50%; } *html #left { /*...

    IE6常见bug附解决方法

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

Global site tag (gtag.js) - Google Analytics