Bootstrap 4在Safari小屏幕下图片与文本重叠问题求助

我帮你排查了代码和问题根源，小屏幕Safari里出现图片和文本重叠，主要是两个原因：一是代码里存在语法错误干扰渲染，二是Safari对Flex布局和img-fluid的尺寸计算逻辑和其他浏览器有差异，导致图片没有被正确约束在容器内。

第一步：修复代码中的语法错误 #

你的<head>里多了一个无关的</script>标签，这会导致浏览器解析CSS时出现异常，先把它删掉：

<!-- 错误代码 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </script>

<!-- 修正后 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

第二步：针对Safari的Flex布局和图片约束优化 #

Safari在处理Flex容器内的图片时，有时候不会严格遵守img-fluid的自适应规则，加上以下几个调整就能解决问题：

1. 给包含图片的列添加align-items-start，避免Flex布局默认的stretch属性强制拉伸容器高度，导致图片挤压上方文本：

<div class="col-12 d-flex align-items-start">
  <img src="https://www1-lw.xda-cdn.com/files/2017/05/stack-overflow.png" class="mx-auto img-fluid">
</div>

2. 给图片额外添加flex-shrink: 0属性，防止它被Flex容器挤压变形，同时强制Safari遵守height: auto的宽高比规则：
   可以直接用内联样式，或者自定义CSS类：

<img src="https://www1-lw.xda-cdn.com/files/2017/05/stack-overflow.png" class="mx-auto img-fluid" style="flex-shrink: 0;">

3. （可选）如果图片仍然有高度异常，给图片的父容器添加min-height: auto，覆盖可能继承的h-100带来的高度约束：

<div class="col-12 d-flex align-items-start" style="min-height: auto;">
  <img src="https://www1-lw.xda-cdn.com/files/2017/05/stack-overflow.png" class="mx-auto img-fluid" style="flex-shrink: 0;">
</div>

完整修正后的代码 #

<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
    <div id="Step0" style="margin-left:auto; margin-right:auto;">
        <div class="container-fluid d-flex flex-column h-100 justify-content-between">
            <div class="row mt-5">
                <div class="col-12">
                    <h1 class="text-center">My Awsome - Tutorial</h1>
                </div>
                <div class="col-12 mt-4">
                    <h3 class="text-center">Welcome</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <p class="mx-5 text-center">
                        Welcome to the esatus Wallet - Tutorial. <br>
                        If you haven't installed the app allready you can donwload the App now for iPhone or Android. <br><br>
                        The tutorial has the follwoing topics.
                    </p>
                </div>
                <div class="col-12 d-flex">
                    <div class="mx-auto">
                        <ul>
                            <li>here some text</li>
                            <li>here some text</li>
                            <li>here some text</li>
                            <li>here some text</li>
                            <li>here some text</li>
                            <li>here some text</li>
                        </ul>
                    </div>
                </div>
                <!-- 修正后的图片容器 -->
                <div class="col-12 d-flex align-items-start" style="min-height: auto;">
                    <img src="https://www1-lw.xda-cdn.com/files/2017/05/stack-overflow.png" class="mx-auto img-fluid" style="flex-shrink: 0;">
                </div>
            </div>
            <div class="row justify-content-end mb-5">
                <div class="col-12 d-flex">
                    <button href="#" type="button" class="invisible btn btn-primary m-auto" >INVISBLE</button>
                    <button href="#" type="button" class="btn btn-primary m-auto" onclick="return show('Step1','Step0');">Next</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

为什么这些修改有效？ #

• 移除无效的</script>标签确保浏览器正确解析CSS和HTML结构，避免基础渲染异常。
• align-items-start让Flex容器内的内容按顶部对齐，不会强制拉伸容器高度导致图片挤压上方文本。
• flex-shrink: 0告诉Safari不要压缩图片尺寸，确保它按照img-fluid的规则自适应宽度，同时保持正确的宽高比。
• min-height: auto避免继承自h-100的高度约束导致容器高度超出预期，防止内容重叠。

内容的提问来源于stack exchange，提问作者MrMaavin