两个DIV内容底部溢出问题排查：跨浏览器兼容性故障

看起来你遇到了典型的跨浏览器布局兼容性问题——部分浏览器里内容从DIV底部溢出，我们来一步步拆解问题并修复：

问题根源分析 #

从你的代码来看，几个关键点导致了这个问题：

• 固定高度限制：给#first-row-1、#first-row-2等容器设置了固定的像素高度，当文字在Firefox/Safari/移动端换行时，内容高度超过容器，直接溢出。
• inline-block的负边距hack：用margin-right: -4px来消除inline-block元素间的空白，这种方式在不同浏览器的解析逻辑不一致，容易导致布局错位。
• 浮动未正确清除：#open-hours和#contacts用了浮动，但仅靠<br>分隔，没有清除浮动，导致后续容器的高度计算错误。
• 缺少viewport元标签：移动端Chrome出现问题，大概率是没加viewport，导致页面缩放异常，内容溢出。
• body的height:100%限制：html和body都设了height:100%，这会让页面高度被限制在视口高度，内容超过时直接溢出底部。

分步修复方案 #

1. 移除固定高度，改用自适应布局 #

把所有容器的固定height属性去掉，让容器根据内容自动撑开高度：

#first-row-1, #second-row-2 {
  width: 362px;
  margin-right: 0; /* 删掉负边距 */
}
#first-row-2, #second-row-1 {
  width: 360px;
  border: 1px solid black;
  vertical-align: top;
}

2. 正确处理inline-block的空白 #

不要用负边距消除空白，改用更可靠的方法：给父容器设置font-size:0，子元素恢复字体大小：

#first, #second {
  text-align: center;
  font-size: 0; /* 消除inline-block元素间的空白 */
}
#first-row-2, #second-row-1 {
  font-size: 16px; /* 恢复原有字体大小 */
}

3. 彻底清除浮动 #

给包含浮动元素的容器添加清除浮动的伪元素，避免布局塌陷：

.header-container::after {
  content: "";
  display: table;
  clear: both;
}

同时修改HTML，把浮动元素包裹起来：

<div class="header-container">
  <div id="open-hours">пн-пт 10.00-20.00</div>
  <div id="contacts">
    <img class="ins" src="phone_pic.png"> text
    <img class="ins" src="envelope_pic.png">
    <span>text</span>
  </div>
</div>

4. 添加viewport元标签（必加！） #

在HTML的<head>里添加viewport，确保移动端布局正常：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

5. 调整页面高度限制 #

把html和body的height:100%改成min-height:100%，让页面可以根据内容自动延伸：

html { min-height: 100%; }
body {
  background-image: url("background.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: repeat;
  min-height: 100%; /* 替换height为min-height */
  font-family: 'Times New Roman', Times, sans-serif;
  font-size: 16px;
}

6. 优化移动端媒体查询 #

去掉移动端的固定最小宽度，让容器自适应屏幕：

@media only screen and (max-width: 393px) {
  #logo { display: none; }
  #first-row-2, #second-row-1 {
    width: 100%;
    min-width: auto; /* 移除固定min-width */
  }
}

验证效果 #

做完这些修改后，你可以在Firefox、Safari和安卓平板Chrome上测试，应该能解决内容溢出的问题——核心是让布局自适应内容，避免固定尺寸和hack式的负边距，同时保证跨浏览器的布局一致性。

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