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

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

#margin问题

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

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

浏览器/html/css面试题----3
MingL520的博客
05-24 540
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明的viewport。参数是scroll时候，必会出现滚动条。参数是auto时候，子元素内容大于父元素时出现滚动条。参数是visible时候，溢出的内容出现在父元素之外。参数是hidden时候，溢出隐藏。
IE7下浮动元素margin-bottom失效
u013120516的博客
07-13 416
IE7下浮动元素margin-bottom失效，给浮动元素后加一个<div class='clear'></div>，清除浮动。 .clear{ clear:both; overflow:hidden; }  
解决IE6、IE7下浮动元素margin-bottom失效的问题
跟着信仰走
07-23 303
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 384
margin可以用position代替 <meta http-equiv="X-UA-Compatible"content="IE=9; IE=8; IE=7; IE=EDGE"> boc-shadow .content{  background:#F5F7FA;width:790px;height:380px; filter:progid:DXImageTransform.M...
IE6下设置float和margin的问题
dibitui7403的博客
02-22 125
如果在IE6下设置了浮动和margin的话，那么在IE6下距离就会加倍，代码如下： <div class="showHeadIcon"></div> .showHeadIcon /*文字前面的小图标*/{ width: 16px; height: 12px; float: left; margin-le...
前端入门学习之margin塌陷和浮动问题解决方法——day05
weixin_44194443的博客
04-01 273
margin塌陷(折叠,叠加)问题 前提:普通文档流内的 块元素,垂直方向的,没有padding,border时: 元素嵌套(父,子元素): 子元素的垂直方向的margin值会与父元素发生塌陷; 表现:子元素把margin传递给父元素; 一大一小取最大;两者相同取当前; 解决方法: 绕开问题: 转换思路,改变子元素的margin值或为父元素加padding值; 不影响最终效果的前提下给父元素加border,padding值 给父元素加overflow: hidden auto scrol
IE6兼容性问题及IE6常见bug详细汇总
12-13
8. **左浮元素margin-bottom失效** 左浮动元素的margin-bottom在IE6中可能无效。 解决方法：设定元素的高度，或者用父元素的padding-bottom替代子元素的margin-bottom，或利用额外的标签进行布局调整。 9. **img...
margin-left和right失效(斯芬克斯)之谜
01-24
在某些情况下，如在Internet Explorer浏览器中，即使设置了`margin-left`或`margin-right`的值，元素的实际布局却未发生变化，即所谓的“失效”。 **原因分析：** 1. **hasLayout 触发条件：**`margin-left`和`...
IE6常见bug附解决方法
09-25
#### 八、左浮动元素的`margin-bottom`失效 **问题描述**： 当一个元素左浮动后，其`margin-bottom`属性在IE6中可能不会生效。 **解决方法**： 1. 明确设置该元素的高度。 2. 使用父元素的`padding-bottom`代替子...
margin-bottom在IE6和IE7下失效的解决办法
weixin_30483013的博客
11-05 155
今天在处理页面边距时，又遇到这个问题，float元素在设定margin-bottom时在IE6和IE7下会失效，之前就碰到过，但是用其他的办法调试会就过去了，今天遇到就觉得非得正规整理一下，下面请看实例： #box{width:600px; background:#E6FECB; border:3px solid #933; overflow:hidden;} .float_div{floa...
解决IE7浏览器下margin或padding失效的问题
sinat_35391165的博客
08-10 2940
首先声明这里讨论的所有问题都是在浮动清除干净后产生的 在IE7浏览器下，margin或padding可能会出现失效的问题，尤其是外部两个div的margin-bottom或者padding-bottom margin可能会出现完全失效，padding则可能出现给出值但实际距离缩小的情况 这里举两个例子 1.先来看看原本想要的效果 但实际在IE7下会出现的效果 1）margin-bo...
margin-right、margin-bottom设置不起作用？
westdu的博客
12-18 6388
猜想，待验证： 浏览器默认是从左向右渲染 一个div .box默认是左上对齐，所以margin-right、margin-bottom设置不起作用
解决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">一些兼容性问题 * 浏览器兼容问题一：块属性
IE8 margin-bottom 不起作用
kogu的博客
04-05 4431
碰到一个很奇怪的问题，在IE8下，设置了margin-bottom，页面显示的时候不起作用，在网上找了一下， 都说是 float 搞的，把这个属性去掉后还是这样，后来找到一个关于 margin 折叠的帖子，终于解决问题了。 解决方法：在样式里加上  display:inline-block;属性。   参考：http://wenku.baidu.com/view/9abd2b41336c1
CSS: IE中的BUG之margin-bottom失效
weixin_33994429的博客
05-13 201
<div class="inp" id="userdiv"> <label for="UserID" class="inp_lab" id="LabelUserID" onfocus="nameFocus();"> 帐 号 </label> <input name="loginusername" type="text" id="tx...
margin击穿问题(margin折叠问题)
weixin_42206785的博客
11-19 1298
问题如下 一段很简单的代码： 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 287
我所遇到的问题是这样的，在页面的body中左边一大块sidebar，有高度，右边内容没高度，在给sidebar设置margin-bottom后与引入的footer的间距没有变化（在ie中） 在网上看到的解决方案overflow:hidden;zoom:100%;不知道是问题不同或者什么原因，依然无效。 最后解决方法，将sidebar的高度增加了10px，这时与footer的间距就有10px了。...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值