IE 和 Firefox 下 CSS 中 margin-left IE显示为两倍的解决方法

最新推荐文章于 2021-08-03 21:58:02 发布
转载 最新推荐文章于 2021-08-03 21:58:02 发布 · 541 阅读 · 0
文章标签：

#ie #firefox #css #opera #float #html

本文介绍了一个HTML页面中div元素在IE浏览器下显示异常的问题，并给出了通过添加display:inline属性来修复该问题的方法。此外，还提供了一种解决margin属性在IE中不正常工作的通用方案。
问题描述
一个html页
<div style="width:190px; margin-left:10px; overflow:auto; background-color:#FFCCFF; float:left;">test</div>
但是左侧却显示缩进了20个px
此设置在firefox 和 opera 都是正常的
网上查找了原因发现是IE的一个BUG
在style里面添加display:inline;问题解决


另：当使用margin属性不能正确显示时，尝试使用display:inline;看能否解决问题
css margin-left在IE6下的问题的解决方法
09-25
在这个修复方案中，第一个`margin-left`声明是针对所有支持标准CSS的浏览器，包括IE8和Firefox等。第二个声明`_margin-left`是专门针对IE6的，它的值设为原值的一半，以抵消IE6的双倍边距bug。这样，在IE6下，元素的...
IE和FIREFOX下CSS的区别与解决方法第1/2页
10-30
### IE和FIREFOX下CSS的区别与解决方法 #### 对高度的解析差异及解决策略 在探讨CSS在不同浏览器下的表现差异时，IE（Internet Explorer）与Firefox是两个经常被提及的对象。这两种浏览器在处理CSS时有着显著的...
IE6下margin-left双倍bug问题
weixin_30449453的博客
11-06 168
熟悉 CSS 盒模型朋友相信对于 IE 双倍浮动边界 BUG 不会陌生，这个 BUG 只会产生在浮动行的第一个浮动元素（此处说法不准确，并不是第一个浮动元素，假如浮动的元素在一行显示不下，占用了多行，那么每一行的第一个元素都会受此 BUG 影响。啊呀教育网编注），所以如果第一个浮动元素没有使用外补丁 margin 就不会有双倍距离。不过最近发现 IE 对于这个 BUG 居然有延伸的现象。 问题 ...
ie6下 margin 是其它浏览器下两倍的解决方法
CSS fly
12-22 453
1、display:inline可以消除IE6和IE7下的浮动BUG ul li {          float:left;          margin:0 12px 12px 0;          display:inline; } display:inline的意思是基线显示 可以消除IE6和IE7下的浮动BUG display:inline 可以消
margin-left属性在IE6浏览器中解释为双倍填充的解决方法
weixin_33973609的博客
09-30 145
这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间，在这之后的任意有着相似边界的浮动元素不会呈现双倍边界，只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样，双倍边界的Bug同样会出现在右侧！方法一：在相应margin-left后加上display:inline;.div{ float:left; margin-l...
IE 和 Firefox 下 CSS 中 margin-left IE显示为两倍的解决
weixin_30572613的博客
05-05 133
IE 和 Firefox 下 CSS 中 margin-left IE显示为两倍的解决 时间:2009-08-19 16:25来源:未知 作者:admin 点击: 93次 另：当使用margin属性不能正确显示时，尝试使用display:inline;看能否解决问题 问题描述一个html页<div style="width:190px; margin-left:10px; overflow...
IE6/IE7/IE8/Firefox的CSS各种兼容margin问题解决办法
12-12
外置 .main{ float:left;#float:none;... } 第1行给Firefox以及其他浏览器看 第2行给safari/IE6/iE7看，如果safari/IE6/iE7 视觉效果不统一，就要在后面跟IE6/IE7的定义 第3行给IE7看 第4行给IE6以及
如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器
12-13
CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中4.FF: 设置 padding 后, div...
margin-left IE Firefox 浏览器下的不同
weixin_34191734的博客
08-02 159
margin-left  IE6双倍问题  http://hi.baidu.com/jyoe/blog/item/e5258733eb1c6812eac4af5b.html   padding-bottom IE6双倍问题 只需要设置font-size:0px;    
【转】CSS中IE6、7和火狐对margin、padding的兼容性解析
iteye_674的博客
07-16 381
1、IE与Fire Fox识别CSS属性区别标签 !important #page_body{ width: 1000px !important; height:30px !important; width: 980px ; height:36px ; } 以上样式 在IE6/7中只执行width: 980px与height:36px FireFox中则优先执行带有!...
IE下css常见问题总结及解决
fan_xiao0529的博客
03-09 452
本文整理了ie中div的垂直居中问题、margin加倍的问题、ie6下页面min-width/height与max-width/height问题、ie6 3px bug及ie6捉迷藏的问题等等，感兴趣的朋友可以参考下哈
css兼容浏览器火狐,常见IE和火狐的CSS兼容性问题
weixin_28722339的博客
08-03 1481
这里向大家介绍一下IE和火狐的CSS兼容性问题解决方法，在区别火狐和IE时最常用的是!important方法，对于区分其他不同浏览器和浏览器的不同版本的兼容性问题还有下面一些方法，比如:@import,注释,属性选择符,子对象选择符和voice-family等方法,这些方法在《CSS网站布局实录》中有讲述。下面是IE和火狐的CSS兼容性问题1.DOCTYPE影响CSS处理2.FF(火狐):DIV设...
html flex 的高度,html – css：flexbox的最后一行有两倍的高度
weixin_35712811的博客
06-27 281
我玩了一些flexboxes,并试图模仿一个类似LaTeX的桌子,顶部/中间/底部.我喜欢桌子很好地缩放并转移到小屏幕上的列表式显示.但是,我注意到,如果我在单元格的文本内容中使用空格,则单元格的高度可能会增加一倍甚至三倍而没有任何明显的原因.是否有一个我忽略的flexbox属性可以帮助我解决这个问题？为什么这个额外的高度甚至会产生？截图：片段：div.table {display: flex;f...
margin-left:10px; 不同浏览器距离为什么不一样？
weixin_34377919的博客
01-08 1176
这是一个ie的bug.. 如果你设置margin对象是浮动的。ie就会把你设置的值双倍处理。。可以设置浮动对象的 display:inline 解决
css关于margin在不同浏览器下的兼容
fjh1370505782的博客
02-05 3860
在学校中学的是Html,并没有学习Html5,工作后遇到这个问题。 发现只要把H4的标头改成H5的标头就能解决兼容性了（谷歌和火狐，没有去测试Ie的兼容性） 只要把改成就可以了。
CSS兼容性解决方案：IE6.0、IE7.0与Firefox
2. **居中对齐**：Firefox中，通过设置`margin-left`和`margin-right`为`auto`可以让`div`居中，但IE可能需要额外的处理，如设置`text-align: center`于`body`，并使`div`的`margin`自动。 3. **填充与尺寸**：Fire...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值