如何实现HTML/CSS代码全浏览器兼容？Chrome正常，Safari/Edge异常

一、「关于我」(#about)区块黑色背景缺失 #

问题根源 #

1. CSS语法错误：.about选择器末尾多了一个多余的*/，导致后续相关CSS规则在Safari中失效；
2. #about的上下内边距都设为0，若内部元素高度不足，黑色背景可能无法正常显示；
3. .about .col-lg-6设置了固定高度50px，容易导致内容被截断，间接影响区块背景的显示。

修复代码 #

/*******************************/
/********** About CSS **********/
/*******************************/
#about { 
  background-color: #000000;
  padding-top: 20px; /* 调整内边距，确保背景可见 */
  padding-bottom: 20px;
  margin-top: 10px;
  margin-bottom: 0px;
  color: #ffffff;
  min-height: 300px; /* 添加最小高度，避免内容为空时背景消失 */
}
.about-img { 
  display: -webkit-flex; /* 兼容旧版Safari */
  display: flex;
  align-items: center;
  justify-content: center;
}

.about {
  position: relative;
  width: 100%;
  margin: -45px 0 45px 0;
} /* 移除多余的 */

.about .col-lg-6 {
  padding: 0;
  height: auto; /* 取消固定高度，让内容自适应 */
}

.about .section-header {
  margin-bottom: 20px;
}

.about .about-img {
  position: relative;
} 

二、Footer元素位置错误（上移） #

问题根源 #

footer的position: bottom;是无效的CSS属性，Safari不识别该值，导致布局定位混乱，进而出现上移问题。

修复代码 #

根据需求选择以下两种方案之一：

方案1：Footer随文档流正常排列（推荐）

/* Footer START */
footer {
  background-color: #1d1b1b;
  text-align: justify;
  padding-top: 5px;
  position: relative; /* 使用标准定位属性 */
} 

方案2：Footer固定在页面底部

/* Footer START */
footer {
  background-color: #1d1b1b;
  text-align: justify;
  padding-top: 5px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
} 

注意：使用固定定位时，需给body添加padding-bottom: [footer高度]，避免页面底部内容被遮挡。

通用兼容建议 #

• 检查所有CSS语法，确保没有多余的符号或无效属性，Safari对语法错误的容忍度远低于Chrome；
• 对于flex、渐变等属性，可添加-webkit前缀兼容旧版Safari；
• 避免给容器设置固定高度，优先使用height: auto或min-height适配内容。

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