`

IE6双倍margin间距两大解决方案

 
阅读更多

本文向大家描述一下IE6双倍margin间距解决方法,这里主要从两个方面来向大家介绍,相信本文介绍一定会让你有所收获。

你对IE6双倍margin间距解决方法是否比较熟悉,这里和大家简单分享一下,希望通过本文的学习你对此解决方法有深刻的认识。

IE6双倍margin间距解决方法

方法1:

假设:一个div代码为

  1. <divstyledivstyle="float:left;margin-left:10px;"> 
  2. </div> 
  3.  

当一个css样式同时设置了float和margin的属性的时候,在ie7+及火狐上,该元素显示正常。但是在ie6下,将会出现双倍的margin-left属性值,也就是上面那段代码中的div在ie6下的实际margin-left的值是20px;

解决此办法的最简单的方法是,在style中添加:display:inline;

如上面的代码将改为

  1. <divstyledivstyle="float:left;display:inline;margin-left:10px;"> 
  2.  
  3. </div> 
  4.  
  5.  

方法2:

可以使用以下办法来书写兼容浏览器的css代码:

第一种

  1. :.div{  
  2. background:orange;/*ff*/  
  3. *background:green!important;/*ie7*/  
  4. *background:blue;/*ie6*/  
  5. }  
  6.  

第二种

  1. :.div{  
  2. margin:10px;/*ff*/  
  3. *margin:15px;/*ie7*/  
  4. _margin:15px;/*ie6*/  
  5. }  
  6.  

第三种

  1. :#div{color:#333;}/*ff*/  
  2. *html#div{color:#666;}/*IE6*/  
  3. *+html#div{color:#999;}/*IE7*/  
  4.  
分享到:
评论

相关推荐

    关于IE6 双倍间距的真正原因

    1. **重置CSS样式**:一种常见的解决方案是使用CSS重置(reset.css),它清除了所有浏览器默认的样式,包括可能引起双倍间距的行高。例如,可以添加`*{margin:0;padding:0;line-height:1;}`到你的CSS文件中,但这...

    IE6盒子模型没问题 详测双倍边距

    对于IE6的双倍边距bug,还有其他一些解决方案,例如使用`*margin` Hack,这是一种专为IE6设计的CSS技巧,将星号(*)放在属性前,可以使得该规则只对IE6生效。例如,`*margin: 0` 将只影响IE6,并且会覆盖正常的margin...

    DIV+CSS相对IE6、IE7和IE8的兼容问题

    在IE6和IE7中,设置了`float`属性的DIV元素,其`margin`可能会被错误地解释为两倍大小。这是一种已知的bug,可以通过添加`display:inline;`来修正。例如: ```css #IamFloat { float: left; margin: 5px; ...

    div错位解决IE6、IE7、IE8样式不兼容问题IE6里DIV错位的问题.doc

    本文档主要关注在IE6、IE7、IE8中遇到的一个典型问题——**DIV错位**,并提供了解决方案。 #### 二、DIV错位现象分析 在文档中提到,采用`float: left;`样式的DIV在IE8和IE7中表现正常,但是在IE6中会出现向下偏移...

    IE6,7,8兼容

    本文主要针对IE6、IE7和IE8以及Firefox浏览器在DIV+CSS布局下的兼容性问题进行分析,并提供一系列解决方案。 #### 二、CSS兼容性技巧 ##### 1. **垂直居中** - **问题描述**:在某些情况下,需要将文字或元素在...

    IE6,IE7,IE8兼容性问题

    本文将针对IE6, IE7, IE8中常见的兼容性问题进行深入探讨,并提供相应的解决方案。 #### 二、CSS兼容性问题及解决方案 ##### 2.1 div的垂直居中问题 **问题描述**:在某些情况下,开发者希望将一个元素在其父容器...

    最全的CSS浏览器兼容问题—HTMLCSS教程1

    本文总结了CSS浏览器兼容问题的解决方案,涵盖了div的垂直居中问题、margin加倍的问题、浮动ie产生的双倍距离、IE与宽度和高度的问题、页面的最小宽度、DIV浮动IE文本产生3象素的bug、IE捉迷藏的问题等七个方面的...

    css兼容问题的解决方案

    /* 解决IE双倍间距问题 */ } ``` 通过设置`display: inline;`,可以解决IE浏览器下的间距问题。 ##### 4. Block与Inline元素的特性 **特点**: - **Block元素**:总是在新行上开始,高度、宽度、行高、边距都可以...

    DIV+CSS相对IE6、IE7和IE8的兼容问题[借鉴].pdf

    以上是针对IE6、7和8的常见CSS兼容性问题及解决方案。在进行跨浏览器开发时,理解这些差异并采取适当的解决措施,能够确保网页在各种浏览器下表现一致,提升用户体验。随着技术的发展,现代浏览器对CSS的支持更全面...

    CSS在IE6 IE7与FireFox下的兼容问题整理

    5. **页面最小宽度的JavaScript解决方案**:对于IE,可以使用JavaScript表达式实现min-width的效果: ```css #container { min-width: 600px; width: expression(document.body.clientWidth ); } ``` 6. **...

    IE和Firefox之间兼容性问题

    本文将详细探讨IE浏览器和Firefox浏览器之间的兼容性问题,并提供一些解决方案。 #### 二、CSS浏览器兼容性概述 CSS(Cascading Style Sheets)是用于描述HTML文档外观和格式的语言。不同的浏览器可能对CSS的支持...

    div+css兼容性问题解决方案

    ### div+css兼容性问题解决方案 ...以上就是针对IE7、IE6以及Firefox等浏览器在使用`div+css`布局时常见的兼容性问题及其解决方案。通过这些技巧,可以有效提高网页在不同浏览器间的兼容性和用户体验。

    解决浏览器兼容问题的CSS语法技巧大全.doc

    解决浏览器兼容问题的 CSS 语法技巧大全 ...解决浏览器兼容问题的 CSS 语法技巧大全涵盖了 IE 和 Firefox 浏览器的兼容性问题,提供了一些实用的解决方案,可以帮助 web 开发者更好地解决浏览器兼容性问题。

    CSS浏览器兼容,描述ie6 7 8和火狐浏览器上的css区别

    更通用的解决方案是使用Flexbox或CSS Grid布局。 2. **margin加倍的问题**: 在IE6中,设置了`float`的div,其margin会被加倍计算。为了解决这个问题,可以添加`display:inline;`,如`#imfloat { float:left; ...

    css浏览器兼容.docx

    解决方案是使用`#left{ margin-right:-3px; }`。 7. IE 捉迷藏的问题 当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。解决办法是对#layout使用line-height属性或者给#layout使用...

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

    本文将详细介绍几个与IE6相关的常见BUG及其解决方案。 首先,我们来看第一个问题,即“3px间距BUG”。当在IE6中,一个`div`元素使用背景图片或直接插入图片时,图片的下边缘会与下一行元素之间产生3px的空白间隔。...

    CSS浏览器兼容问题整理(IE6.0、IE7.0_与_FireFox)

    本文将根据给定的部分内容,深入探讨几个关键的CSS兼容性问题及其解决方案。 ### 1. DIV的垂直居中问题 在CSS布局中,垂直居中一直是一个常见的挑战。一种常用的方法是将`vertical-align:middle;`应用于内联或内联...

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

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

    CSS兼容IE和Firefox的技巧集合

    - **问题描述**:设置了`float`的元素,在IE中可能会出现实际的`margin`值比预期的两倍大的情况。 - **解决方案**:通过添加`display:inline;`来解决此问题。 - **示例代码**: ```css #box { float: left; ...

Global site tag (gtag.js) - Google Analytics