align-self:flex-end 和 margin-bottom：xpx 在 Safari 和 iOS 设备中无法正常工作

Question

我在 iOS 忽略 align-self:flex-end 和 margin-bottom: 8px 的组合时遇到一些问题。

在 Android 设备上，各种 Windows 版本 Chrome 和 Firefox，以及 Chrome 在 macOS 上，#totalImg 显示如我所料它是 - 右下角，略微凸起。

在 macOS 和 Safari 的 Safri 和 iOS 的 Chrome 上，#totalImg 粘在底部。

查看下图了解当前行为：

我知道我可以通过应用 bottom: 8px 获得一致的跨浏览器行为，但这似乎只在我的测试用例中有效，并且在生产中失败，具体取决于 Android 或 iOS 设备。例如，对于 Android，在 Chrome 上，对于 bottom: 8px，#totalImages 可以位于其父 div 的中间，或者远低于它。

    .image.big.j_launch {
      display: flex;
      display: -webkit-flex;
    }
    .image.big {
      width: auto;
      height: auto;
      max-width: 320px;
      margin-bottom: 10px;
      float: none;
      position: relative;
    }
    #totalImg {
      display: block;
      height: 15px;
      position: absolute;
      right: 11px;
      background-color: rgba(0, 0, 0, 0.35);
      padding: 2px 6px;
      border-radius: 3px;
      color: white;
      font-size: 11px;
      text-align: center;
      align-self: flex-end;
      margin-bottom: 8px;
    }

    <div class="image big j_launch" data-index="0">
      <div id="totalImg"><span>1 / 18</span></div>
      <img src="https://via.placeholder.com/320x240">
    </div>

如何获得一致的跨浏览器解决方案，将 #totalImg 放在第一张图片中？ Safari（通常 iOS）是否有理由忽略似乎在其他平台/浏览器上运行的内容？

查看 Safari 中的文档检查器，我可以看到应用了边距 - #totalImg 下面有一个橙色矩形，当我更改 [=23] =] 样式表检查器中的值。它只是没有像我期望的那样在视觉上应用。

Answer 1

虽然这是一个解决方案，但不是最佳解决方案，我建议不要使用它，即使它有效。

首先，需要一点 JavaScript（见 this link）。

var b = document.documentElement;
b.setAttribute('data-useragent',  navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

此块的作用是向文档本身添加两个数据属性（如果是手持设备，则添加 touch class）。在我的例子中 - iPhone 和 Mac - data-platform 的值分别为 iPhone 和 MacIntel。 classname 和 data-useragent 在此上下文中是不必要的，但出于说明目的并未从原始代码中删除。

接下来，向 CSS 添加一些新规则。

html[data-platform*='Mac'] #totalImg,
html[data-platform*='iPhone'] #totalImg {
  bottom: 8px !important;
  margin-bottom: unset !important;
}

这依赖于平台的部分 macthings，并相应地调整规则 - 因为 bottom 被识别并应用于 *OS 设备，而 margin-bottom 没有，规则是改变了。

我不喜欢它的原因是它看起来像 Rube Goldberg machine，而且对于本应单独 CSS 解决的问题来说它过于复杂。

更不用说它依赖于已弃用/过时的功能。

align-self:flex-end 和 margin-bottom：xpx 在 Safari 和 iOS 设备中无法正常工作

align-self:flex-end and margin-bottom: xpx not working as expected in Safari and iOS devices

css

safari

flexbox