margin-bottom在safari浏览器失效的问题

最新推荐文章于 2021-06-23 02:38:12 发布
最新推荐文章于 2021-06-23 02:38:12 发布
阅读量3.1k 收藏 1
点赞数
分类专栏： css/css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aerbaba/article/details/79724325
版权

今天遇到一个bug是底部明明有margin-bottom却无法作用，排查了一下改成用padding可以有效

但不找出原因是无法完成这篇博客的

问题概要描述：在safari中，当内容高度超出所有父容器时，内容的margin-bottom设置是无效的。

解决这个问题的办法也很简单，只要规避这种超出所有父容器的内容即可。父容器不设置高度即可。另外尽量少用html, body {height: 100%;}这种非常规代码。

最快捷就是改成padding

阿阿阿尔呀
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css margin-left在IE6下的问题的解决方法
09-25
margin-left本身不兼容IE6 其余主流浏览器如ie8、火狐都支持。
各浏览器padding、margin的差异
10-31
各浏览器padding、margin的差异
IOS margin-bottom失效问题
weixin_33753003的博客
12-21 1421
问题 webAPP中内嵌的H5页面设置margin-bottom，在模拟器及安卓机中的展示效果都与预想的一样。而在iPhone中无论嵌套多少层margin-bottom，均会失效。 原因 参考资料 从IOS8开始，UIView的属性var layoutMargins:UIEdgeInsets指定该View的subview同其edge的间距。AutoLayout使用margins来放置内容。其默认值...
safari 移动端适配问题 padding 不起作用
Young_Gao的博客
04-18 2691
苹果黑科技。。。。。。。。。[;padding:0;margin:0;];  
html垂直居中margin,html – Safari中的垂直居中
weixin_42363231的博客
06-23 78
在Safari中我有垂直居中的问题,使用margin：auto 0;在div上嵌入div的div：inline-flex;它在Firefox,Chrome,Opera中运行得很好……但是在Safari中失败了(在默认的Android浏览器上,但我正在考虑使用单独的CSS以及iPad使用的任何内容) 和.container-fluid {margin-right: auto;margi...
Safari中marginRight问题
李俊良
03-17 248
在safari中，通过js获取对象的marginRight style，并且这个对象的parent node设置了一个overflow为hidden的样式   那么将会计算出一个错误的marginRight值。   如何修复呢   建议如果存在这种情况   就将marginRight和marginLeft设置为相同值   然后再js函数中用marginLeft的值来替代marg...
一个关于css中margin-right没有效果的问题
09-25
margin-right其实有效果的，只是在默认即标准流的情况的下显示不出来效果。如果脱离标准流呢？想到这个，就立马在css文件中加了一个：float:right;然后在测试的时候就能看到margin-right的效果了
firefox margin-top失效的原因与解决办法
10-30
最近发现好多用margin-top实现的，上边距效果一直没有，一直都不知道什么原因，今天偶然看到了，特分享给大家
DIV多层嵌套margin-top的BUG问题
09-25
通过使用浮动、内边距或者调整元素的布局方式，可以有效地解决多层嵌套`margin-top`带来的问题，确保在多种浏览器下得到一致的显示效果。同时，这也提醒我们在进行前端开发时，应始终考虑浏览器兼容性，以提供更好的...
margin-top塌陷问题的现象与解决的具体方法
09-22
在CSS布局中，`margin-top`塌陷是一种常见的问题，它发生在当一个块级元素（子元素）的顶部外边距与其包含块（父元素）相遇时，导致父元素的上边界不是按照预期与子元素的上边界保持一定距离，而是被拉下了一段距离...
div标签中的元素margin-top失效的解决方法
09-28
元素上级标签是div，已经设置了width和height等的属性，可是，在对元素使用margin进行调整的时候，无法生效，下面有个不错的解决方法，感兴趣的朋友可以参考下
CSS 同级元素position:fixed和margin-top共同使用的问题
09-22
主要介绍了CSS 同级元素position:fixed和margin-top共同使用的问题的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
margin-left和right失效(斯芬克斯)之谜
01-24
一种情况是元素的确不支持margin-top/bottom(参看：关于margin-top/bottom在inline元素（non-Replaced）上不起作用的解释); 另一种情况则是元素产生了margin叠加（参看：如何避开麻烦的margin叠加(margin collapsing...
margin 负值引起的层级（z-index）问题
09-27
主要为大家介绍margin 负值引起的层级（z-index）问题的解决方法，需要的朋友可以参考下
盒子 padding 值无效
chris__XU的博客
09-01 994
box-sizing: content-box; box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素
移动端开发底部元素margin-bottom失效解决办法
热门推荐
往后橘生
01-02 1万+
移动端开发底部元素margin-bottom失效解决办法
IOS 底部margin失效
weixin_33755554的博客
01-04 438
➢ 问题和布局方式有关使用margin把底部设置一定的间距,IOS上 margin-bottom无效,安卓有效➢ 场景仅在底部需要撑开一定间距时,使用margin失效但是padding在撑开间距的同时也会伴随容器自带的底色,非白,所以不考虑如图所示➢ 解决方式1.更改整体布局2.在需要留白的区域添加空白块(DIV)➢ Tips具体兼容还与部分机型和系统版本有关,不必一概而论 转载于:https:...
margin-top失效的解决办法
前端岚枫
10-20 1594
最近工作时发现margin-top在火狐和谷歌中没预期的效果。失效， html代码：   蓝枫蓝枫 css样式 *{ margin:0; padding:0;} .box{ width:500px; height:300px; margin:0 auto; background-color:#0099FF;} .box2{ width:200px; height:1
margin-bottom
最新发布
08-18
`margin-bottom` 是 CSS 中用于设置元素底部外边距的属性。 通过设置 `margin-bottom`，可以控制一个元素与其下方元素之间的垂直间距。 以下是一些常见的 `margin-bottom` 的使用示例： 1. 设置固定数值的外边距...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值