`

margin-left在IE6下左浮动加倍-20140102

 
阅读更多
一、IE6下如果line-height超出本身区块的height高度，则会把区块高度挤高。比如：li{line-height:25px;height:20px;}则实际li的高度为25px，而IE7和FF下则为20px.

二、 IE下的margin double bug，具体说来比如一个div你设置左浮动，然后又设置margin-left：5px，则实际margin-left会加倍变为10px。解决办法：加display：inline

所以说一般在距左浮动下要兼容ie6的情况下都最好加上display：inline 属性

display 属性规定元素应该生成的框的类型

inline 默认此元素会被显示为内联元素，元素前后没有换行符 

<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
</style>
</head>

<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>

<p>而 div 元素不会显示出来！</p>

<div>div 元素的内容不会显示出来！</div>
</body>
</html>


最有效的说明就是这个P标签本身带有换行的能力但是加上display: inline 就会链接到一起了
分享到：
| 浮动存在的问题-20131229
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    margin值在IE6变成双倍

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

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

    然而在IE6浏览器中，当这两个属性同时使用时，浮动元素的左边距值会莫名其妙地加倍，例如原本设置为10px的margin-left，实际显示效果会变成30px。 这个问题的出现，与IE6浏览器对于CSS渲染的内部算法有关，它在处理...

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

    例如，一个左浮动的div设置了`margin-left`，在IE6中会生成两倍的距离。通过设置`display:inline`可以消除这个现象，确保元素按照预期距离排列。 在理解和使用`block`与`inline`元素时，`block`元素通常用于占据...

    IE浮动边界BUG延伸探讨

    在特定条件下，IE浏览器中的这一BUG还存在着一种延伸现象：当第一个浮动元素没有设置外边距（margin-left为0）时，如果后续的浮动元素设置了较大的左外边距（margin-left），则会出现类似于双倍边界的效果，即外边距...

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

    2. **margin加倍问题**：当一个div设置为浮动(float)时，IE6会将其margin值加倍。解决办法是添加`display:inline`属性，比如： ```css .float-div { float: left; margin: 5px; display: inline; } ``` 3. *...

    如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.pdf

    IE6中，浮动元素的外边距可能会加倍。通过添加`display: inline;`可以解决这个问题。 8. **容器的包容性**： 当容器内有浮动元素时，可能需要使用`overflow: hidden;`或`zoom: 1;`来触发IE的布局属性，确保容器能...

    div+css兼容ie6ie7ie8ie9和FireFoxChrome等浏览器方法[借鉴].pdf

    设置为浮动的`div`在IE6下`margin`会加倍。通过`display:inline;`可以修复此问题，如`#IamFloat{float:left;display:inline;margin:5px;}`。 12. **容器宽度和高度**： 容器的宽度要精确设定，特别是在有浮动元素...

    IE6,7,8兼容

    - **问题描述**：设置了`float`属性的div，在IE浏览器下设置的`margin`会加倍。 - **解决方案**：在该div内部添加`display: inline;`可以修正此问题。例如： ```html &lt;!-- 内容 --&gt; ``` CSS: ```css ...

    IE6,IE7,IE8兼容性问题

    **问题描述**：当设置了`float`属性的div在IE下设置的`margin`会出现加倍现象。 **解决方案**： - 通过设置`display: inline;`来解决此问题。 **示例代码**： ```html #IamFloat { float: left; margin: 5px; ...

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

    解决这个问题的一个常见方法是在IE6下为该元素添加`display: inline;`。 ```css #IamFloat { float: left; margin: 5px; /* 其他浏览器使用5px */ *margin: 10px; /* IE6/7使用10px */ display: inline; /* ...

    css解决IE6,IE7,firefox兼容性问题.

    - IE6 下，设置了 float 的 div 其 margin-left 会被加倍计算。解决方法是在该 div 上添加： ```css display: inline; ``` 6. **处理div的margin和padding问题** - Firefox 设置 padding 后，div 的 height 和...

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

    掌握这些技巧，可以帮助开发者有效地解决CSS在IE6和IE7中的兼容性问题，使得网站在各种浏览器下都能呈现一致的视觉效果。随着技术的发展，现代浏览器对CSS的支持已经大大增强，但仍需关注老版本浏览器的兼容性，尤其...

    DIV CSS 网页兼容全搞定 IE6 IE7 IE8 IE9 火狐 谷歌

    2. **浮动元素的margin加倍问题**：在IE6中，设置为浮动的div的margin可能会加倍。解决方法是在div内添加`display: inline;`，如： ```css #imfloat { float: left; margin: 5px; display: inline; } ``` 3....

    div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法.pdf

    - 设置`float`的`div`在IE中`margin`会加倍。解决方法是添加`display:inline;`，如`#IamFloat{float:left;margin:5px;display:inline;}`。 12. **容器宽度**： - 当内层`div`宽度超过外层容器时，可能导致容器...

    IE6.0、IE7.0 与FireFox CSS兼容的解决方法

    9. **浮动元素的margin加倍**：在IE6中，浮动元素的`margin`可能会被错误地加倍。通过设置`display:inline;`可以修复这个问题。 10. **容器的宽度问题**：在平行布局中，IE的外层容器可能会被内部更宽的浮动元素挤...

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

    在IE6中，设置了`float`的div，其margin会被加倍计算。为了解决这个问题，可以添加`display:inline;`，如`#imfloat { float:left; margin:5px; display:inline;}`。 3. **浮动产生的双倍距离**： IE在某些情况...

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

    在Web开发中，尤其是涉及到前端布局时，`DIV+CSS`的兼容性问题常常困扰着开发者，特别是针对不同版本的Internet Explorer（IE6、IE7和IE8）。这些早期版本的IE浏览器存在许多解析CSS规则的不同方式，导致在实现预期...

    CSS浏览器兼容性与解析问题终极归纳[整理].pdf

    例如，一个左浮动的元素设置`margin-left: 30px`，在IE6下实际效果会变成60px。为解决这个问题，可以将元素的`display`属性设置为`inline`，这样IE6就不会加倍计算外边距。 接下来是**上下margin重合问题**。相邻的...

Magicbox
Global site tag (gtag.js) - Google Analytics