为什么Bootstrap4栅格CSS在Safari中错位-css教程-PHP中文网

safari 12–14 存在 flexbox 实现缺陷：flex-wrap: wrap 换行错位、form 嵌套破坏 flex 上下文、h-100 高度不生效、outline:focus 渲染异常，需分别通过拆解 flex 属性、修正嵌套结构、设置父级明确高度、调整 outline 策略来修复。

为什么bootstrap4栅格css在safari中错位

flex-wrap: wrap 在 Safari 12–14 中换行错位

这不是 Bootstrap 写错了，是旧版 WebKit 对 Flexbox 的实现缺陷：当 .row 设了 flex-wrap: wrap，但子项 .col 高度差异大时，Safari 会错误计算换行位置，导致下一行“被顶高”或列宽压缩。

典型现象：.col-4 里放长卡片（320px），相邻 .col-4 只有一行文字（60px），整行却按 320px 渲染，下一行从该高度底部开始，视觉上右移或断层
别依赖 min-width: 0 强制换行——Safari 13.1 及更早版本对它的解析不稳定
稳妥写法：把 flex: 1 拆开，显式设 flex-grow: 1; flex-shrink: 1; flex-basis: 0%
加 align-content: flex-start 到 .row，能修复 Safari 10.x 的换行错位（注意：不是 align-items）

form 标签嵌套破坏 row 的 flex 上下文

常见于 PHP 循环中把 <form></form> 放在 <div class="row"> 内部、但包裹所有 <code>.col-* ——这会让 .col-* 变成 <form></form> 的子元素，不再是 .row 的直接子项，Flex 布局彻底失效。

DevTools 里看 .row 的 computed display 是 flex，但子项却有 float 或 block 表现？大概率是嵌套层级被 <form></form>、<section></section> 等块级标签打断
正确结构必须是：<div class="row"><div class="col-md-4"><form>...</form></div></div>，.col-* 始终是 .row 的直接子元素
如果每个卡片需独立提交，就每个 .col-* 里单独包一个 <form></form>；不要用一个 <form></form> 包多个列

height: 100% 和 h-100 在 Safari 中不生效

h-100 是相对高度，而 Safari（尤其 12–14）对 flex 子项的百分比高度解析更严格：它要求父级不仅有 height 或 min-height，还得是已建立的 flex 上下文。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

.col 加 h-100 没反应？先检查 .row 是否有明确高度来源——.row 默认 min-height: auto，没有“100%”可参照
临时解法：给 .row 加 min-height: 200px（按业务最小卡片高度定），再给 .col 加 h-100
更稳方案：在 .col 上加 d-flex flex-column，内部卡片用 .card-body { flex-grow: 1 } 填满剩余空间
绝对避免直接写 height: 100% 在 .col 上——它不会继承 .row 的计算高度

outline:focus 在 Safari 中残留虚线或焦点卡死

这不是 Bootstrap 的样式问题，而是 Safari 对 outline 的状态管理异常：设 outline: none 后键盘 Tab 仍可能卡在按钮上，不设又出现难看的默认虚线。

别用 button:focus { outline: none } 粗暴清除——会导致可访问性中断，且 Safari 有时根本不重绘焦点状态
推荐方案：button:focus { outline: 2px solid transparent; outline-offset: 2px; }，再用 box-shadow 模拟聚焦效果，既保留键盘导航，又避开虚线渲染 bug
若必须隐藏 outline，改用 button:focus:not(:focus-visible) { outline: none }，让 Safari 仅在鼠标点击时隐藏，保留键盘用户的 :focus-visible

真正麻烦的不是某一行 CSS 写错，而是 Safari 12–14 把 flex 容器、百分比高度、outline 状态这些基础行为都解析得和标准不一致——你得同时兼顾布局逻辑、嵌套结构、高度上下文、焦点语义，缺一不可。