iphone7中在块与块之间设置margin-bottom没有撑开，无法实现滚动效果

最新推荐文章于 2024-04-08 23:10:36 发布
最新推荐文章于 2024-04-08 23:10:36 发布
阅读量1.2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/dreamcarp/article/details/71439050
本文解决了iPhone7中块元素间margin-bottom不生效的问题，通过将margin-bottom更改为padding-bottom属性，成功实现了滚动效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在项目中，遇到了iphone7 的兼容性问题：iphone7中在块与块之间设置margin-bottom没有撑开，无法实现滚动效果

解决方案：把块与块之间margin-bottom改为块的padding-bottom属性，就实现了滚动效果。至于为什么这样设置，目前我还不太清楚。

Web-拾贝
oscar999的专栏
03-10 1万+
JavaScript MVC框架PK：Angular、Backbone、CanJS与Emberhttp://www.youkuaiyun.com/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站， 有browser兼容的介绍http://help.dottoro.co...
CSS中margin不会撑开盒子
HarryWg的博客
03-27 3664
  之前在上网查margin对盒子大小影响的时候发现全部都是关于“父子盒子同时定义margin-top|bottom，那么父盒子上边会塌陷至与子盒子上边重合”这样的问题，对于其他情况margin对盒子的影响没有涉猎，在此进行测试。   那么在一个盒子内放置两个盒子 <div id="father"> <div id="son1"> </div> <div id="son2"> </div&g
ios端 底部按钮挡住内容设置margin-bottom失效问题
weixin_42433708的博客
05-15 967
第一次在csdn上写博客 最近遇到的一个bug：ios端margin-bottom失效问题。 网上找了资料目前两种方法： 1.用padding-bottom。 2.添加一个div设置宽高
ios 关闭 margin
lylsh1993的博客
01-08 473
margin是苹果为了帮助开发者控制控件间关系的产物，然而实际上它默认显示的规律并不好掌握，对开发者是个鸡肋，也是个干扰。 本文所讲并非永久禁用margin，如果知道请留言告知，谢谢。 一.  我们在添加依赖的时候，一般有2种方式，一种是在界面上拉线 ，一种是使用编辑区右下角3个依赖按钮。 1. 界面拉线（或者左侧栏拉线），可以按住Option，切换对应开启/关闭的m
关于margin塌陷问题
qq_42263768的博客
04-08 409
代码中类名为box1的块元素所使用margin-top属性，并没有直接将父元素撑开（见图1中，box_father块元素的背景色，发现其确实没有被撑开），而是将此属性赋予给了父元素（这也是一种表象，形似有这种效果，实际上在浏览器中的开发者工具中可以看到父元素并没有这个margin属性，浏览器清晰地知道margin属性是属于box1的，详见图2）。总结：父元素的第一个或最后一个元素的margin-top属性和margin-bottom属性会导致出现margin塌陷问题，会致使父元素的height比预期中小。
margin塌陷问题
imkaifan的博客
02-18 609
margin塌陷问题1.同级盒子margin塌陷2.嵌套盒子margin塌陷1.BFC设置 1.同级盒子margin塌陷 方法一： 这一种塌陷处理方式： 期望两个盒子的上下间距为200px 1、 当设置两个盒子的margin-bottom: 100px; margin-top: 100px;由于塌陷会造成两个盒子的上下间距 仅为100px。 如果不想处理可以直接设置两个盒子的margin-bottom: 200px; margin-top: 200px; (注意：如果margin-bottom: 50px;
.signature-trace-drawer display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-direction: column-reverse; -moz-box-orient: vertical; -moz-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; position: fixed; height: 100%; width: 100%; left: 0; top: 0; z-index: 1001; background: rgba(0, 0, 0, 0.5); justify-content: center align-items: center overflow: scroll .signature-trace-content width 100% justify-content: center align-items: center .signature-trace-wrapper-body position relative background: white margin-left 20px margin-right 20px padding 0 20px border-radius: 12px .signature-trace-wrapper-close position: absolute left 50% bottom -50px height 24px width 24px @extends button.close // background: url(../images/close_lt.png) no-repeat center / cover background-size: 20px background-color: white; opacity: 1 border-radius: 100% transform: translate(-50%, -50%) text-align: center color : rgb(166,166,166) span font-size 20px line-height 24px .signature-trace-title font-size: 17px font-weight bold padding-top: 15px margin-bottom: 10px text-align: center color #202020 .signature-trace-image-container background: url('../images/miziGrid.png') no-repeat center/cover; background-size: 100% 100% background-repeat: repeat; position relative aspect-ratio 1 border-radius: 12px; background-color: #F5F5F5; display: flex justify-content: center align-items: center overflow hidden .ps-sign position absolute height 100% min-width 100% aspect-ratio 1 z-index 1002 .canvas height 100% width 100% .signature-trace-spinner display: none width 24px height 24px position: absolute top: 50% left 50% background: url('../images/loading.gif') no-repeat center/cover; transform translate(-50%, -50%) .signature-trace-template-img display: none; width 100% opacity: 0.4; background: no-repeat center/cover; .signature-trace-template-text display: none; justify-content: center align-items: center width: calc(100% - 50px); height: calc(100% - 50px) position: absolute top: 45% left 50% transform: translate(-50%, -50%) opacity: 0.4; .signature-trace-reload-content display: flex align-items: center justify-content: center position: absolute top: 50% left 50% transform: translate(-50%, -50%) .signature-trace-reload font-size 14px color #808080 white-space: nowrap; span color #808080 .signature-trace-button display: flex; justify-content: space-between; align-items: center; margin: 20px 20px 0 padding-bottom: 20px .signature-trace-resetting font-size 14px flex-grow:1; width 100px height 36px line-height 36px text-align: center background: #F5F5F5; margin-right: 10px border-radius: 16px color #202020 opacity: 0.3; .signature-trace-determine font-size 14px background-color: #ED5151 flex-grow:1; height 36px; width 100px line-height 36px text-align: center color #FFFFFF border-radius: 16px opacity: 0.3; .signature-trace-determine.center-block height 35px width 182px flex-grow 0 position relative left 50% transform translateX(-50%) @media only screen and (min-device-aspect-ratio:3/4) .signature-trace-drawer .signature-trace-content .signature-trace-wrapper-body margin-left 60px margin-right 60px .signature-trace-title font-size 12px 如上的样式，类名signature-trace-wrapper-body的尺寸是401*401 请问他的尺寸是哪里来的呢
最新发布
05-28
假设视口宽度为某个值，比如在移动设备上，比如375px（iPhone6/7/8的宽度），那么.signature-trace-wrapper-body的左右margin各20px，总margin是40px，所以父容器的可用宽度是视口宽度减去40px。然后，.signature-...
小程序安卓手机下面的样式怎么撑开
03-25
好的，用户遇到了在安卓手机上微信小程序样式无法撑开的问题，需要解决布局适配。首先，我需要回忆一下微信小程序的适配方案，尤其是关于rpx和弹性盒布局的知识。记得引用[1]里提到，小程序使用rpx作为单位，根据...
Vue实现饿了么外卖APP（部分）-笔记
wuzhaoqing325的博客
12-06 942
1.需求分析 2.图标字体 1.用icomoon生成图标字体，下载并解压 2. .eot,.svg,ttf,woff文件放在fonts目录下，style.css文件放在stylus目录下 3. 将stylus目录下的stye.css文件改名字，修改路径，删除{}，；等，使其符合stylus语法规范 3.后台数据 最新的vue.js没有dev-server.js文件，如何进行后台数据模拟？ 1.在w...
微信小程序从入坑到放弃二十三：都0202年了，textarea在ios上的bug咋还未修复呢？
yilingsj的博客
06-20 809
摘要： 2018年的时候，艺灵接单时搞过微信小程序。当时在写地址页时碰到了一个bug，主要是针对ios设备的。即：textarea有最小的padding且不可被设置。当时的解决方法是利用wx.getSystemInfo这个API获取设备信息，然后做进一步的兼容处理… 大纲一、光阴似箭，日月如梭二、复现bug2.1、发现不同2.2、精准误差2.3、常规的解决方案三、不服？代码测到你服为止！3.1、padding大法3.2、text-indent大法四、解决方案4.1、统一padding4.2、line-h.
解决CSS中padding（内边距）margin（外边距）撑大盒子的问题
qq_58671311的博客
07-22 3170
如果使用的时margin（外边距）来书写样式，margin是不会包含到盒子的总宽高中的，margin是会在盒子的外侧撑开，如图，黑色盒子中设置了margin-bottom，这时会在盒子外侧出现边距。在有添加padding（内边距）的样式中添加box-sizingborder-box;...
ios margin失效
lulu_678的博客
08-09 299
https://blog.youkuaiyun.com/weixin_34380781/article/details/88677837
margin的常见误区
weixin_44455764的博客
10-20 297
误区1：添加margin-top/margin-bottom可以撑开与父元素的距离 误区2：上下两个元素各自添加margin，那么撑开的距离是两个margin的总和 误区3：margin: 0 auto可以水平居中，那么margin: auto auto可以垂直水平都居中
css Margin塌陷问题（margin属性撑不开盒子）
weixin_30853329的博客
09-04 1937
问题 在两个盒子嵌套时，内部的盒子设置的margin-X会加到外边的盒子上，导致内部的盒子margin-X设置失败。。。 解决方案 1、外部盒子设置一个边框 2、外部盒子设置overflow:hidden; 3、使用伪元素类 .clearfix:before{ 　　content:””; 　　display:table; } 实例代码 <!DOCT...
父元素未被子元素的margin撑开
wangning_elsa的博客
12-18 1314
是因为外边距折叠的原因： 可以用BFC解决上述问题： http://www.w3help.org/zh-cn/kb/010/
父元素未被子元素的margin撑开-外边距折叠问题
On The Way
07-01 2869
如题先看一段代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .a { background-color: blue; width: 2
经典CSS缺陷--margin塌陷问题和margin合并问题
热门推荐
来自星星的博客
01-06 2万+
margin塌陷问题 问题描述： 在文档流中，父元素的高度默认是被子元素撑开的 也就是说 子元素有多高，父元素就有多高 但是当子元素设置浮动之后，子元素会完全脱离文档流 此时将会导致子元素无法撑开父元素的高度，导致父元素高度塌陷 代码示例： margin塌陷 .parent{ border
iPhone前端兼容性问题汇总
程序员的博客
07-15 1万+
背景： 在做一个微信Web项目开发过程中，遇到iPhone（主要iPhone4/4S）兼容性问题，记录如下。 问题： 1. 页面在iPhone下出现左右滑动的问题； 2. 顶部标题在iPhone4/4S下宽度不能100%； 3. iPhone4/4S下在input弹出输入法时，不支持position:fixed的问题（即 本来固定在顶部的菜单下移）； 分析： view
ios手机margin-bottom失效问题
mingquantingxue的博客
11-13 1766
问题 小程序中的页面设置margin-bottom，在模拟器及安卓机中的展示效果都与预想的一样。而在iPhone手机中margin-bottom会失效。 原因 从IOS8开始，UIView的属性var layoutMargins:UIEdgeInsets指定该View的subview同其edge的间距。AutoLayout使用margins来放置内容。其默认值为8pt。 如果一个View是ViewController的rootview，系统会自动设置和管理margins，top和bottom。margins
掌握iPhone网页制作中的平滑滚动效果
对于苹果公司的iPhone设备，其硬件的高性能和操作系统（iOS）的优化，为网页开发者实现平滑滚动效果提供了良好的平台支持。 ### iPhone平滑滚动效果的技术实现 iPhone的平滑滚动效果可以通过CSS和JavaScript（JS）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值