Safari 和 Chrome 浏览器 CSS 兼容性问题与解决方案

一、Flexbox 布局兼容性问题

Safari 对 align-items: stretch 的支持问题

在 Safari 中，align-items: stretch 会导致某些情况下的布局问题，特别是对于固定高度的项目。Chrome 支持这一属性时，元素会自动填充整个容器的高度，但 Safari 的某些版本（如 Safari 10.x）可能会出现样式不生效的问题。
确保在 flex 容器中使用时，不要给项目设置固定高度，而是让其自然伸展。例如：

bash 复制代码

.container {
  display: flex;
  align-items: stretch;  /* 使项目拉伸 */
}

.item {
  /* 不要设置固定高度，让其根据内容自适应 */
}

二、Grid 布局的兼容性问题

Safari 对 grid-template 的支持不完全；
如果需要支持旧版 Safari，可以使用 @supports 查询或者结合 display: flex 来实现一些兼容性处理。

bash 复制代码

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

@supports not (display: grid) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
}

三、position: sticky 支持差异

Safari 中的 position: sticky 问题；
Safari 10 和更早版本对于 position: sticky 的支持存在 bug，导致粘性定位失效，尤其是在嵌套元素的情况下。
如果需要支持较旧的 Safari 版本，可以考虑使用 JavaScript 来模拟粘性定位，或者使用 position: fixed 作为降级方案。

bash 复制代码

.sticky {
  position: sticky;
  top: 0;
}

@supports not (position: sticky) {
  .sticky {
    position: fixed;
    top: 0;
  }
}

四、vh 和 vw 单位的兼容性

Safari 和 vh 单位
Safari 和 iOS Safari 在计算视口高度时，存在一些不一致之处。尤其在移动端，Safari 会将地址栏等元素的高度计算到 vh 中，导致元素的实际高度比预期的要小。
可以通过 JavaScript 动态计算 vh，确保在移动端和桌面端的一致性。

bash 复制代码

// 动态计算 vh 高度
function setVhUnit() {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

window.addEventListener('resize', setVhUnit);
setVhUnit();

然后在 CSS 中使用：

bash 复制代码

.element {
  height: calc(100 * var(--vh));
}

五、calc() 的行为差异：

在 Chrome 中，calc() 函数的计算结果默认遵循 content-box 盒模型，而在 Safari 中，calc() 的计算结果却会受到 box-sizing 设置的影响。如果没有显式设置 box-sizing: border-box，Safari 会按照 content-box 模式来计算。
如果你使用了 calc() 并希望确保其计算结果在所有浏览器中保持一致，应该在全局或特定元素中统一设置 box-sizing: border-box。

六、margin 和 padding 的计算差异：

外边距合并（Margin Collapse）

Chrome：Chrome 会在大多数情况下正确地处理外边距合并，尤其是当两个相邻的元素之间存在外边距时，它会将外边距合并为较大的值。
Safari：Safari 在某些情况下，尤其是在嵌套元素中，处理外边距合并的方式与 Chrome 不完全相同，可能会导致外边距合并不符合预期。
解决方案：
为了避免外边距合并的影响，常见的解决方法是给元素添加 padding 或 border，或者使用 display: inline-block 来避免块级元素的外边距合并问题。

bash 复制代码

/* 解决外边距合并问题 */
.element {
  padding-top: 1px;  /* 添加一点内边距来避免合并 */
}