一次解决html页面显示问题历程

背景：
接入某平台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属性(其他属性见以上参考链接)
很多情况下，我们把 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