关于IE6/IE7中浮动元素margin-bottom值失效的问题解决办法。

最新推荐文章于 2021-04-01 16:57:53 发布
原创 最新推荐文章于 2021-04-01 16:57:53 发布 · 483 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#margin问题

本文主要介绍了在网页布局中遇到的margin兼容性问题，并提供了一种解决方案：通过为浮动元素的父级设置相同的padding-bottom值来替代使用margin，以此来避免不同浏览器间的显示差异。

margin的兼容性问题比较多，解决办法就是给浮动的元素的父级设置一个同样的padding-bottom值，避免使用margin。

解决IE7浏览器下margin或padding失效的问题
sinat_35391165的博客
08-10 2917
首先声明这里讨论的所有问题都是在浮动清除干净后产生的 在IE7浏览器下，margin或padding可能会出现失效的问题，尤其是外部两个div的margin-bottom或者padding-bottom margin可能会出现完全失效，padding则可能出现给出值但实际距离缩小的情况 这里举两个例子 1.先来看看原本想要的效果 但实际在IE7下会出现的效果 1）margin-bo...
解决IE8下的一些兼容性问题
热门推荐
lifeblood123的博客
09-23 2万+
1.使用meta标签调节浏览器的渲染方式，告诉浏览器用哪种内核渲染，360双核浏览器就是在ie和chrome之间来回切换,帮我们判断使用webkit还是chrome。 使用meta标签来强制IE8使用最新的内核渲染页面，代码如下：<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">一些兼容性问题 * 浏览器兼容问题一：块属性
IE7下浮动元素margin-bottom失效
u013120516的博客
07-13 405
IE7下浮动元素margin-bottom失效，给浮动元素后加一个&lt;div class='clear'&gt;&lt;/div&gt;，清除浮动。 .clear{ clear:both; overflow:hidden; }  
解决IE6、IE7下浮动元素margin-bottom失效的问题
跟着信仰走
07-23 292
IE6、IE7下浮动元素margin-bottom失效的问题： 不是IE6、IE7的情况下效果是这样的： 在IE6、IE7情况下效果却变成了酱紫： margin-bottom:10px;无效了   怎样解决呢？   那就用padding吧（这意味着div class="warp clear"的区域包括红色区域和padding-bottom这10个像素），不要用marg...
ie兼容性视图下（ie6,7,8）margin失效，box-shadow
cherry_zhang18的博客
07-24 379
margin可以用position代替 &lt;meta http-equiv="X-UA-Compatible"content="IE=9; IE=8; IE=7; IE=EDGE"&gt; boc-shadow .content{  background:#F5F7FA;width:790px;height:380px; filter:progid:DXImageTransform.M...
IE6下设置float和margin的问题
dibitui7403的博客
02-22 119
如果在IE6下设置了浮动和margin的话，那么在IE6下距离就会加倍，代码如下： <div class="showHeadIcon"></div> .showHeadIcon /*文字前面的小图标*/{ width: 16px; height: 12px; float: left; margin-le...
前端入门学习之margin塌陷和浮动问题解决方法——day05
weixin_44194443的博客
04-01 255
margin塌陷(折叠,叠加)问题 前提:普通文档流内的 块元素,垂直方向的,没有padding,border时: 元素嵌套(父,子元素): 子元素的垂直方向的margin值会与父元素发生塌陷; 表现:子元素把margin传递给父元素; 一大一小取最大;两者相同取当前; 解决方法: 绕开问题: 转换思路,改变子元素的margin值或为父元素加padding值; 不影响最终效果的前提下给父元素加border,padding值 给父元素加overflow: hidden auto scrol
margin-bottom在IE6和IE7下失效的解决办法
weixin_30483013的博客
11-05 146
今天在处理页面边距时，又遇到这个问题，float元素在设定margin-bottom时在IE6和IE7下会失效，之前就碰到过，但是用其他的办法调试会就过去了，今天遇到就觉得非得正规整理一下，下面请看实例： #box{width:600px; background:#E6FECB; border:3px solid #933; overflow:hidden;} .float_div{floa...
margin-right、margin-bottom设置不起作用？
westdu的博客
12-18 6382
猜想，待验证： 浏览器默认是从左向右渲染 一个div .box默认是左上对齐，所以margin-right、margin-bottom设置不起作用
IE8 margin-bottom 不起作用
kogu的博客
04-05 4409
碰到一个很奇怪的问题，在IE8下，设置了margin-bottom，页面显示的时候不起作用，在网上找了一下， 都说是 float 搞的，把这个属性去掉后还是这样，后来找到一个关于 margin 折叠的帖子，终于解决问题了。 解决方法：在样式里加上  display:inline-block;属性。   参考：http://wenku.baidu.com/view/9abd2b41336c1
CSS: IE中的BUG之margin-bottom失效
weixin_33994429的博客
05-13 195
<div class="inp" id="userdiv"> <label for="UserID" class="inp_lab" id="LabelUserID" onfocus="nameFocus();"> 帐 号 </label> <input name="loginusername" type="text" id="tx...
IE6中margin-bottom为负值时失效
懒人改变世界
08-26 1450
为什么要用负值就不多说了，反正重复的使用
margin击穿问题(margin折叠问题)
weixin_42206785的博客
11-19 1283
问题如下 一段很简单的代码： css如下： &amp;lt;style type=&quot;text/css&quot;&amp;gt; *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; heig...
关于ie中margin-bottom设置无效的问题
weixin_30916125的博客
09-05 280
我所遇到的问题是这样的，在页面的body中左边一大块sidebar，有高度，右边内容没高度，在给sidebar设置margin-bottom后与引入的footer的间距没有变化（在ie中） 在网上看到的解决方案overflow:hidden;zoom:100%;不知道是问题不同或者什么原因，依然无效。 最后解决方法，将sidebar的高度增加了10px，这时与footer的间距就有10px了。...
padding-bottom在IE6下失效的原因
weixin_30721077的博客
01-14 231
<li><a><a/><li/>CSS:a{ float:right; }li{ padding-bottom; overflow:hidden}因为 li 使用了 overflow（清除浮动），padding-bottom失效解决办法有： 一、将overflow去掉，使用float。 二、 .clearfix{ 　　*zoom: 1; 　　&...
解决IE浏览器常见布局Bug：浮动元素双倍Margin与BoxModel问题
"本文主要探讨了在前端开发中遇到的两个与Internet Explorer（尤其是IE6）浏览器相关的常见问题，即浮动元素的双倍Margin Bug和BoxModel的Bug，并提供了相应的解决方案。" 在前端开发中，IE浏览器特别是较旧版本如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值