开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

IE/边缘边距-底部不起作用

IE/边缘边距-底部不起作用是指在使用IE浏览器时，设置元素的边缘边距（margin）属性时，底部的边距无法正常生效的问题。

这个问题通常出现在使用IE浏览器的旧版本中，由于旧版本的IE对于盒模型的解析存在差异，导致底部边距无法正确计算。解决这个问题的方法有以下几种：

使用IE Hack：可以通过在CSS样式中添加特定的IE Hack代码来解决该问题。例如，可以使用_margin-bottom或*margin-bottom来替代margin-bottom属性，使其在IE中生效。
使用IE条件注释：可以通过在HTML文件中使用IE条件注释来针对IE浏览器单独设置样式。例如：

<!--[if IE]>
<style>
    .element {
        margin-bottom: 10px;
    }
</style>
<![endif]-->

使用CSS Hack：可以通过使用特定的CSS Hack代码来解决该问题。例如，可以使用zoom: 1;或display: inline-block;来触发IE的hasLayout属性，从而解决底部边距不起作用的问题。
使用CSS Flexbox布局：如果项目允许，可以考虑使用CSS Flexbox布局来代替传统的盒模型布局。Flexbox布局在处理边距时更加灵活，可以避免IE浏览器的兼容性问题。

总结起来，解决IE浏览器中底部边距不起作用的问题可以通过使用IE Hack、IE条件注释、CSS Hack或者使用CSS Flexbox布局来解决。具体选择哪种方法取决于项目需求和兼容性要求。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
物联网平台（IoT Explorer）：https://cloud.tencent.com/product/explorer
移动开发平台（移动推送）：https://cloud.tencent.com/product/umeng_push
对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯区块链服务（TBaaS）：https://cloud.tencent.com/product/tbaas
腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe

相关搜索:Bootsrap固定导航栏没有页边距底部 github页面/ jekyll博客的底部边距较大 HTML页边距-响应导航栏的底部-固定-底部 IE7 HTML/CSS边距底部错误为什么填充/边距-底部在Image上不起作用？以编程方式设置边距不起作用使用JavaScript的页边距底部向边框拼接表格添加边距-底部圆滑的旋转木马-移除底部边距的问题在jQuery中设置边距-在IE11中不起作用

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

IE6下margin双倍边距Bug的处理办法转

最近在学前端, 转自沈夕博http://hi.baidu.com/skillshen/ “ 一、什么是双边距Bug？先来看图： ?...我们要让绿色盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度。...但是当我们在IE6中查看时，会发现左侧外边距100像素，被扩大到200个像素。如下图： ? 二、怎么会这样？说实话，这个原因还真是不清楚。但是这样的结果确确实实在IE6中出现了。...如同上面的例子一样，元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理，元素向右浮动并且设置右边距也会出现同样的情况。...同一行如果有多个浮动元素，第一个浮动元素会出现这个双边距bug，其它的浮动元素则不会。三、如何修正这个Bug？很简单，只需要给浮动元素加上display:inline;这样的CSS属性就可以了。

9572 0

深入学习下 CSS 间距相关的知识

在上面的模型中，一个元素具有底部边缘，而另一个元素具有顶部边缘。具有较大边距的元素获胜。为避免此类问题，建议根据本文使用单向边距。...61% 的选民更喜欢边缘底部而不是边缘顶部。...此外，你不需要关心网格项目的宽度或底部边距。 CSS Grid 为你做一切！...处理底边距假设以下组件堆叠。每个组件都有一个底部边距。请注意，最后一个元素有边距。这是不正确的，因为边距应该只在元素之间。....wrapper { margin-bottom: -16px; } 这就是发生的事情，它将元素推到底部，其值等于底部间距。注意不要超过边距值，因为它会重叠其兄弟元素。

13.4K4 0

一道面试题来看伪元素、包含块和高度坍塌

不会发生边距坍塌的情况根节点元素水平边距(Horizontal margins)不会崩溃「如果具有间隙的元素的顶部和底部相邻，他会与后续同级的元素边距一起坍塌，但是不会与父元素底部的一起坍塌（If...盒子的上边距和第一个流入子元素的上边距盒子的下边距和同级后一个流入元素的上边距如果父元素高度为“auto”，最后一个流入子元素的底部距和其父元素的底部距某个元素没有建立新的 BFC，并且 min-height...「如果'min-height'属性为零，并且框没有顶部或底部边框，也没有顶部或底部填充，并且框的'height'为0或'auto'，并且框不包含边距，则框自身的边距会折叠行框，其所有流入子页边距（如果有的话...，当边距全为正数的时候，结果页边距宽度是边距塌陷宽度的最大值。...2.当边距全为负数的时候，取最小值。 3.在存在负边距的情况下，从正边距的最大值中减去负边距的绝对值的最大值。

1.1K2 0

移动端样式问题汇总

省略号；显示：-webkit-box; -webkit-line-clamp：2; //控制多行的行数 -webkit-box-orient：垂直; } 5，水平/垂直居中定位 //绝对定位未知高度，距顶部...，左边50％，然后转换：translate（-50％，-50％），不支持IE9以下。...中央 { 保证金：自动；位置：绝对；最高：0; 底部：0 左：0；正确：0； } //绝对定位已知高度。...中央 { 位置：绝对；最高：50％；左：50％；边距：-50px 0 0 -50px; //假设宽高都为100px } //弹性布局。...浏览器* / //冒号前写input或textarea等元素 // IE9和Opera12以下版本的CSS选择器均不支持占位文本 8，去掉图片底部至少边距 img { 边界：0; 垂直对齐：底部； }

8462 0

WordPress 主题教程 #11：宽度和布局

详细解释： margin: 0 auto 0 auto; 意思是（注意顺序）：0上页边空白，自动右页面空白，0下页边空白和自动左页面空白。从现在开始，记得设置左右页边空白为自动将使得居中对齐。...你的布局可能你看起来是正确的，但对于使用早前版本的 IE 用户可能不正确。还记得设置左边和右边的页边空白为自动是居中吗？...margin: 0 0 0 10px; 具体的意思是：上边空白为0，右边空白为0，底部空白为0，左边空白为10像素。当大小为0的时候，px 单位不是必需的。...第8步（额外的步骤）：修正 IE 的双倍页边距 bug Internet Explorer 有个双倍页边距的 bug，这样在 IE 下，我们的页面距就是 20像素，20像素的页边距可能会破坏布局并把侧边栏挤到页面的底部...，因为一个20像素的页边距使得 Container 和 Sidebar 的宽度之和为 760px 而不是 750px。

1.2K2 0

一篇文章带你了解CSS对齐方式

居中对齐元素将块元素水平居中对齐(像 ) , 使用 margin: auto; 设置元素的宽度将阻止它伸展到容器的边缘。...然后元素将占用指定的宽度，剩下的空间将平分在两个边距之间：这个div是居中的。...DOCTYPE, IE8 和早期版本将添加 17px 外边距到右边. 这似乎是一条为滚动条预留空间. 因此，总是声明 !...right; width: 300px; border: 3px solid #73AD21; padding: 10px; } 提示：当将元素使用浮动对齐时，总是为body元素定义边距和填充...一个简单的解决方案是使用顶部和底部 padding: .center { padding: 70px 0; border: 3px solid green; } 水平和垂直居中, 使用

1.6K1 0

勇闯44关深入浅出CSS基础之第一篇

「第十九关」给元素每个边缘不同的内边距关卡名：Add Different Padding to Each Side of an Element 知识点有时候我们需要自定义一个元素，并且要给一个元素每个边缘一个不同的...这关卡主要教会我们：单独给每一个边缘不同的内边距； ? 答案 ? ?...这关卡主要教会我们：单独给每一个边缘不同的外边距； ? 答案 ? ?...5% 的边距 */ margin: 10px; /* 所有的边都是 10像素的边距 */ margin: 1.6em 20px; /* 上和下边是 1.6...字距, 左和右是 20像素边距 */ margin: 10px 3% 1em; /* 上边 10像素, 左和右 3%, 下边 1字距边距 */ margin: 10px 3px 30px

1.2K1 0

IMG图片下面出现下边距的解决办法

在不同浏览器下图片下面会出现莫名的下边距，经测算在FF中下边距大概是多出了3像素左右，而IE6更多，在IE8中展示却是完好的，以往的做法只需要将img定义为块状级就解决了问题；但其原理是：图片底部的空隙实际上涉及行内元素的布局模型...所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。...ps: 解决办法给img定义vertical-align或者定义为块状，最优的解决办是定义vertical-align，注：定义vertical- align为middle时在IE6中大概还有一像素的顶边距

6853 0

css笔记 - transform学习笔记(二)

比如正方形变平行四边形，再变圆形。都是形状变成另一个形状。但是如果配合上transition/animation，他就会从一个形状变成另一形状。只要有一段时间内的过渡效果，就形成了动画。...还和原来一边大。...另外，计算时不光是乘宽高，内边距padding、边框宽度border-width、甚至外边距margin都跟着升天乘了相应倍数 rotate：N°旋转，正值顺时针旋转，负值逆时针旋转。...轴的值位移同上 2 translateY(y) 只是用 Y 轴的值位移同上 3D translateZ(z) 只是用 Z 轴的值位移同上括号里边，数值后边一定要有单位值，如果没有单位值不起作用...perspective-origin 规定3D元素的底部位置规定3D元素的底部位置？？

1.7K1 0

clearfix改良及overflow:hidden详解

is wrong 中，他介绍了这种方法在跨浏览器兼容时会造成的问题，并建议仅对不邻近浮动元素的元素应用clearfix（例如弹出窗口），尽管这样做我们还需要处理由clearfix造成的边距折叠bug（译者注...：指clearfix的盒子内部元素的垂直边距被扩展到盒子之外）。...该页面中最开始的两个盒模型的边距叠加行为（底边距保留在盒子内部，顶边距则到了盒子外部）说明：生成的内容将盒子内部元素的边距保留保留在了盒子内部，而在其它浏览器下边距将被扩展到盒子边缘之外。...< 8 */ 如此一来可以使顶边距和底边距都保留在盒子内部，符合w3c关于垂直边距叠加的说明。...但是不要在现有的项目中简单地用这些代码替换你的clearfix规则，否则可能会与你原来为了解决边距重叠问题采取的解决方案产生冲突。

1.3K8 0

Android基础篇 RelativeLayout.LayoutParams

addRule(int verb, int subject) verb主要的参数有： ABOVE 上面 | 之上 ALIGN_BASELINE 对齐排列对准：基线 ALIGN_BOTTOM 对齐：底部...LEFT_OF 将孩子的右边缘与另一个孩子的左边缘对齐的规则 RIGHT_OF 将孩子的左边缘与另一个孩子的右边缘对齐的规则 START_OF 将孩子的末端边缘与另一个孩子的起始边缘对齐的规则 TRUE...setMargins(int left, int top, int right, int bottom) 当前控件设置边距，参数分别是左边，上边，右边，下边。单位是px。...setMarginStart(int start) 当前控件设置开始边距，国内默认是左边的边距，单位是px。...setMarginEnd(int end) 当前控件设置结束边距，国内默认是右边的边距，单位是px。

5021 0

【CSS】309- 复习 CSS盒模型

IE9 以上支持，除此外还可以取到相对于视窗的上下左右的距离。（6）dom.offsetWidth/offsetHeight 包括高度（宽度）、内边距和边框，不包括外边距。最常用，兼容性最好。...2.4 实例题（根据盒模型解释边距重叠）例：父元素里面嵌套了一个子元素，已知子元素的高度是 100px，子元素与父元素的上边距是 10px，计算父元素的实际高度。 ?...2.5 BFC（边距重叠解决方案） 2.5.1 BFC基本概念 BFC: 块级格式化上下文 BFC基本概念：BFC 是 CSS 布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素...父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取 margin 与 padding 的最大值。...）内部的 Box 会在水平方向，从含块的顶部开始一个接着一个地放置；（2）这些 Box 之间的水平方向的 margin，border 和padding 都有效；（3）Box 垂直对齐方式：以它们的底部

1.5K3 0

处理视觉冲突 | 手势导航 (二)

具体到本例中，FAB 位于底部右侧边缘附近，因此我们可以使用 systemWindowInsets.bottom 和 systemWindowInsets.right 值来增加 FAB 下方和右方的边距...增加边距后看到的效果如下: 本文后面会为大家介绍具体做法。简而言之，系统窗口区域 insets 最适合那些需要点击的控件，可以确保系统栏不遮盖住它们。...在 Android 10 上，当前唯一的强制区域是屏幕底部的主屏手势区域，系统保留这个区域就可以让用户在任何时候都可以退出当前应用: △ 底部 60dp 即为强制系统手势边衬区稳定显示边衬区方法:...我们来看一下例子，我们想给某个控件增加一些边距，让它不被导航栏遮挡: ViewCompat.setOnApplyWindowInsetsListener(view) { v, insets ->...// Return the insets so that they keep going down the view hierarchy insets } 在这里，我们仅将系统窗口区域的底部边距值赋给了控件的底边距

2.8K3 0

第141天：前端开发中浏览器兼容性问题总结（二）

1、默认的内外边距不同问题：各个浏览器默认的内外边距不同解决： *{margin:0;padding:0;} 2、水平居中的问题问题：设置 text-align: center ie6-...垂直居中的问题问题：在浏览器中想要垂直居中，设置vertical-align:middle; 不起作用。...IE6双倍边距的问题问题： ie6中设置浮动，同时又设置margin时，会出现双倍边距的问题例float:left;width:100px;margin:0 100px; 解决：设置...IE6-7 line-height失效的问题问题：在ie中img与文字放一起时， line-height不起作用解决：都设置成float 16. td自动换行的问题问题： Table...IE6-7 li底部有3px的问题问题：这个bug产生的充要条件是li的子元素浮动并且li设置了以下CSS属性之一：width、height、zoom、padding-top、padding-bottom

1.9K2 1

如何处理手势冲突 | 手势导航连载 (三)

这并不意味着让您的应用实现从边到边的全屏状态。需要隐藏的原因可能包括: 使用 FLAG_FULLSCREEN WindowManager 开关。...(包括在后退和返回主屏按钮区域滑动) 不少游戏通常会在此处回答 "是"，因为: 游戏屏幕上的控件往往非常靠近屏幕左/右边缘，或靠近屏幕底部。...因此，除了直接修改视图的边距，我们还可以修改布局，以避免出现空间浪费: △ 将进度条移到视图的顶部在这里，我们将进度条移到了播放控件的顶部，完全移出了手势交互区域。...而且这样做还使得我们不再需要额外插入太多无用的边距。...但请注意，我们依然需要在播放控件底部插入一个内边距，其值等于系统栏的高度，这样可以使歌曲名称等文本不会被系统导航条 (即屏幕底部的那条 "横线") 遮盖。

4.9K3 0

基础 | 这些年我用过的一些CSS技巧

1 负边距实现两边贴边的自适应布局这个看起来是一个很普通的四列布局，但要求是自适应宽度大小，而且两边的图片还要和边缘对齐，图片和图片之间还有有相同的间隙，这样光把空间平分成4份是不够的，还要在外层的两边扩展出一些空间来...，这里就用的负边距了以下是代码片段：当然，负边距的使用场景还有很多... 2 文字截取这个文字后面跟了图标，要求文字多的时候显示省略号而文字后面的图标要一直显示，代码如下： 3 padding-top...所以我认为以下方法是一个比较有效的解决方案（放弃ie6）：点击label的时候会触发文件上传控件的事件，不管按钮多大都能触发。...5 媒体查询写hack 之前在做一个活动时，要求在高级浏览器下面实现一些动画效果，使活动页面有更好的体验，当时使用了opacity属性让部分元素先隐藏，但由于ie9不支持动画，所有在ie9下面opacity

6231 0

六大布局之LinearLayout

布局或控件距离外部元素的边距 android:layout_padding ：内边距，布局或控件距离内部元素的边距 android:layout_weight：权重，除了被显示占据的空间以外的的空间，然后根据权重的大小来分配空间....即:left,right,center_horizontal 是生效的.当 android:orientation="horizontal" 时, 只有垂直方向的设置才起作用,水平方向的设置不起作用....其属性值分别为：center（整体居中）、center_vertical（垂直居中）、center_horizontal（水平居中）、right（居右）、left（居左）、bottom（底部）和top（...padding && margin:android:padding="10dp" (是本元素所有子元素的与父元素边缘的距离,设置在父元素上).android:layout_marginLeft="10dp..."(子元素与父元素边缘的距离,设置在子元素上). <?

1K2 0

译|CSS中的间距，前端开发中各种设置间距的优点缺点及实例

此外，CSS Tricks还在页边距底部和页边距顶部之间进行了投票。61%的开发者更喜欢 margin-bottom 而不是 margin-top。...那是因为它的边距折叠了。...处理底部margin 假设以下组件堆叠在一起，每个组件都有底边距。 ? 注意最后一个元素有一个空白，这是不正确的，因为边距只能在元素之间。...更好的解决方案是通过向父元素添加负边距来取消不需要的间距。 .wrapper { margin-bottom: -16px; } 它用一个等于底部间距的值将元素推到底部。...由于对父元素 .card__content 进行了填充，因此边框没有粘在边缘上。 ? 是的，你猜对了！负边距是解决办法。

11.9K1 0

前端入门学习--CSS

右边距元素的总高度最终计算公式是这样的：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距浏览器的兼容性问题一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容...也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。 IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。...Margin - 单边外边距属性在CSS中，它可以指定不同的侧面不同的边距：这是一个指定填充边距的段落。...使用CSS来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。

27.6K2 0

全栈第一步-CSS基础前言CSS基础总结

目前存在两种不同类型的盒模型，IE盒模型和W3C标准盒模型，区别在于我们在设置的width和height包含哪些部分，从而影响整个盒子的整体高度和宽度的计算。...上文提到了可以显式设置width、height，目前也存在一些设置width/height不起作用的元素。...inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top..., padding-bottom, margin-top, margin-bottom不会产生边距效果。...布局布局算是css非常重要的一块应用吧，常见的网页设计可能会分为顶部导航栏，左侧菜单栏，右侧内容区，底部版权声明等。

5102 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭