背景:
接入某平台webview的一个H5页面出现布局错乱,大概是这个样子:
比较奇怪的是只有这个平台的iPhone手机系统版本为iOS12及以上才会出现,其他iOS版本和Android都是正常的。
一开始怀疑接入平台的iOS webview做了特殊设置,后来被义正言辞的回复并没有做处理,并且对方的前端开发也认为是H5布局的问题,只好自己动手。
代码实现:可滑动的tab选择控件(红框部分)是基于swiper.min.js实现,大概长这样:
<div class="menu">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slider"></div>
...
<div class="swiper-slider"></div>
</div>
</div>
</div>
给swiper-container加蓝绿色,给swiper-slide加橘色,大概是这样:
发现swiper-container比预期要高。此处swiper-container没有设置固定高度,但menu设置了高度44px,超出了父容器高度什么鬼?(问题一)
那给swiper-container设置高度,会变成这样:
发现swiper-container设置高度后,子元素swiper-wrapper(已验证,就不截图了)和swiper-slider高度同时和父容器swiper-container一样了,这里好像和(问题一:子元素不继承父元素高度)又不太一样了(问题二)。
给swiper-slider设置固定高度橘色容器高度改变,文字还是雷打不动。决定元素的高度应该只有内容元素的height或line-height,那么,“打印”一下:
$('.scrollable').append("<div style='font-size:14px;'>height:" + $('.swiper-slide').css('height') + ",line-height:" + $('.swiper-slide').css('line-height') + "</div>")
结果:
line-height怎么89了。。。
给swiper-slider设置了line-height,效果终于符合预期了。什么因素会“自动”决定line-height高度呢(问题三)。
考虑到如果不能解答以上问题的话,之后的开发大概率还会遇到类似问题,还是去问问度娘吧。。。
问题一:
搜索后了解到:
当子元素和父元素同为块级元素时,子元素默认width是100%,会继承父元素的宽度;但是不会继承其高度,可以通过内容把高度撑起来。
子元素高度不能继承父元素,但可以通过内容撑起,可以解释通。
问题二:
仔细看了遍布局,发现由于没有设置swiper-wrapper和swiper-slider高度,默认使用了swiper.min.js的swiper-wrapper和swiper-slider布局:height:100%,父容器设置高度后子容器同时改变高度,也可以解释了。
问题三:
尝试一、改变font-family,不生效。
尝试二:
通过了解 line-height属性:
在某些情形下,line-height可以和height互换,因为实现的效果一样。都能撑开一个高度,然而这两个css属性有一个较隐蔽的差异,就是使用height会使标签haslayout,而使用line-height则不会。以前只有IE6的时候曾流行使用height清除浮动,就是利用了IE下height使haslayout的属性。但有时候,haslayout并不需要,反而要避免。
一般情况下,需使用line-height代替了height,其原因在于:IE6,IE7下,类似inline-block属性的元素里如果有block属性的元素,如果该block haslayout,则该标签会冲破外部inline-block的显示而宽度100%显示,从使按钮自适应文字大小的效果失效,解决方法就是使用line-height代替height。
触发haslayout属性(其他属性见以上参考链接)
很多情况下,我们把 hasLayout的状态改成true 就可以解决很大部分ie下显示的bug。
hasLayout属性不能直接设定,你只能通过设定一些特定的css属性来触发并改变 hasLayout 状态。
width/height
启动hasLayout的值:除了auto以外的值
取消hasLayout的值:auto
设置swiper-slide属性,不生效。
.swiper-slide{
height: auto !important;
}
问题三暂时没招了。。。
请原谅我浪费了这么好的编辑器和菜菜哒技术,委屈了能看到这里的小伙伴。
如果有解决办法,欢迎回复解答,万分感谢~~
文章引用和参考(按出现顺序,侵删):
https://blog.csdn.net/actttt/article/details/79466734
https://www.douban.com/note/644059504/?from=tag
https://www.cnblogs.com/assada/p/6288374.html