Safari浏览器容器元素侵入重叠区块的兼容问题求助

问题分析 #

你遇到的是Safari与Chrome对Flex容器子元素margin的渲染差异：当.why-us作为Flex容器时，Safari会将子元素.why-us-boxes的margin-bottom计入容器高度，导致灰色背景延伸到下方的contacts区域；而Chrome中Flex容器不会包含子元素的外部margin，因此显示正常。同时，contacts-form的绝对定位超出父容器范围，进一步加剧了视觉重叠。

解决方案 #

方案1：调整Flex容器的margin位置（推荐） #

将.why-us-boxes的底部margin转移到.why-us容器上，避免Safari将子元素margin算入容器高度：

.why-us {
  display: flex;
  flex-direction: column;
  background-color: #efeeee;
  margin-bottom: 12.8rem; /* 把原属子元素的margin-bottom移到容器 */
}

.why-us-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 6rem;
  margin: 6rem 8rem 0 8rem; /* 移除原有的margin-bottom */
}

方案2：给Contacts容器留出表单空间 #

给.contacts-container添加底部内边距，确保绝对定位的表单不会超出父容器后与上方内容重叠：

.contacts-container {
  display: flex;
  margin: 11rem auto;
  position: relative;
  width: 50%;
  padding-bottom: 15rem; /* 新增：为表单预留高度空间 */
}

方案3：快速临时修复（提升层级） #

如果需要快速解决视觉遮挡问题，可给contacts区域设置更高层级：

.contacts {
  width: 100%;
  position: relative;
  z-index: 1; /* 让contacts显示在why-us上方 */
}

修改后的完整代码示例 #

CSS部分 #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Rubik", sans-serif;
  color: #444;
  padding: 0;
}

.why-us {
  display: flex;
  flex-direction: column;
  background-color: #efeeee;
  margin-bottom: 12.8rem; /* 调整：将margin-bottom移到容器 */
}

.why-us-title h2 {
  text-align: center;
  font-size: 3rem;
  margin-top: 3.2rem;
}

.why-us-title h3 {
  text-align: center;
  font-size: 2.4rem;
  font-style: italic;
  color: #f2a900;
  opacity: 85%;
  margin-top: 0.6rem;
}

.why-us-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 6rem;
  margin: 6rem 8rem 0 8rem; /* 调整：移除margin-bottom */
}

.why-us-boxes h2 {
  text-transform: uppercase;
  font-style: italic;
}

.prova2 h2 {
  display: inline-block;
  text-transform: uppercase;
  color: #f2a900;
  font-style: italic;
  line-height: 3rem;
  letter-spacing: 3px;
}

.contacts {
  width: 100%;
}

.contacts-container {
  display: flex;
  margin: 11rem auto;
  position: relative;
  width: 50%;
  padding-bottom: 15rem; /* 新增：给表单留出空间 */
}

.contacts-container img {
  height: 40rem;
  width: auto;
  background-size: cover;
}

.contacts-txt {
  position: absolute;
  top: 1.2rem;
  left: 13rem;
  color: #fff;
  font-size: 3rem;
  text-transform: uppercase;
  font-family: inherit;
}

.contacts-txt2 {
  color: #fceecc;
}

/* ----- form ----- */

.contacts-form {
  position: absolute;
  background-color: #fceecc;
  bottom: -9.8rem;
  left: 20rem;
  box-shadow: 4px 6px 5px rgba(115, 115, 115, 0.102);
  padding: 1.8rem;
  font-size: 1.8rem;
  color: #333;
}

.contacts-form h2 {
  text-transform: uppercase;
  margin-bottom: 1.8rem;
}

.form-title {
  color: #f7cb66; 
}

.form-title2 {
  color: #f2a900;
}

input[type="text"],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type="email"],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type="submit"] {
  background-color: #f2a900;
  color: white;
  padding: 1.3rem;
  border: none;
  border-radius: 1.8rem;
  cursor: pointer;
  font-size: 1.8rem;
}

input[type="submit"]:hover {
  color: #fceecc;
  padding: 1.2rem;
}

input:focus,
textarea:focus {
  outline: none !important;
  border-color: #f2a900;
  box-shadow: 0 0 8px #f2a900;
}

.contacts-btn {
  height: 50px;
}

HTML部分（无需修改） #

<section class="why-us" id="why-box">
  <div class="why-us-title">
    <h2>Why us</h2>
    <h3>..you won't regret chosing us</h3>
  </div>
<div class="why-us-boxes">
  <div class="container3">  <h2 class="why-title">fixed<br />
    commission</h2><br>
    <span class="why-txt"> At all our ATMs you will find a fixed commission of just <strong>8%</strong> from official quotation</span></div>
  <div class="container3"><h2 class="why-title">24/7<br />
    support</h2><br>
    <span class="why-txt">We have a customer service active 24/7 through the hotline or through this site</span></div>
  <div class="container3"><h2 class="why-title">4 years<br />
    expertise</h2><br>
  <span class="why-txt">Our team is formed by cryptocurrencies experts and is ready to help you anytime</span></div>

</div>
</section>

<section class="contacts">
  
 <div class="contacts-container">
  <img class="contacts-pic" src="images/atm2.png" />
  <div class="contacts-txt">
    contact <span class="contacts-txt2">us</span>
  </div>

  <div class="contacts-form">
    <form action="process-form.php" method="post">
      <h2 class="form-title">Get in <span class="form-title2">touch</span></h2>
      <label for="fname">First Name:</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">
      <label for="email">Enter your email:</label>
      <input type="email" id="email" name="email" placeholder="Write your email..">
      <label for="subject">Subject:</label>
      <textarea id="subject" name="subject" placeholder="Write something.." style="height:100px"></textarea>
      <div class="contacts-btn">
        <input type="submit" name="submit" value="Submit">
      </div>
    </form>
  </div>
</div>

</section>

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