可以使用 flexbox 模拟“显示：内联块”吗？

Question

问题： 有没有办法使用inline-flex 和其他一些属性完美地模拟inline-block？理想情况下，不更改 DOM，因为在我的情况下，它是由 MathJax 生成的，我宁愿不必更改其源代码。

JSFiddle: https://jsfiddle.net/a9508cu6/1/

我为什么要这样做：我正在使用 MathJax 渲染数学公式，它创建了一个高度嵌套的 <span> 元素结构，其中大部分都设置了 display: inline-block。在某些情况下，当对这些 <span> 元素执行滚动触摸手势时，Chrome 会完全冻结。这个错误存在于我测试的所有 Chrome 版本中，包括 Beta、Dev 和 Canary，并且目前阻止我发布我的 Web 应用程序，所以我正在寻找解决方法。当然我会报告这个错误，但我担心修复它需要时间，甚至需要更多时间来分发修复。

我发现使用inline-flex 不会触发有问题的错误，所以我尝试用inline-flex 替换inline-block，同时不改变视觉结果。

MathJax 中原来的 CSS 规则是这样的：

.mjx-math * {
    display: inline-block;
}

我将其替换为：

.mjx-math * {
    display: inline-flex;
    align-items: baseline;
}

那种 有效，但并不完全。一些元素的垂直定位现在被破坏了。

display: inline-block的原始结果：

display: inline-flex; align-items: baseline 的结果：

如您所见，“7”和“2”显示在错误的垂直位置。

Answer 1

当您将子树中的每个元素设置为display:inline-flex 时，不在该子树根部的每个元素都将成为弹性项目，因此被阻塞。

这意味着这些元素将被计算 display:flex，因此不会受到 vertical-align 属性的影响，MathJax 使用该属性来定位“7”和“2”。

因此，如果不详细对 MathJax 进行逆向工程以查看可以在哪里使用哪些值，我认为这种方法是不可能的。

Answer 2

根据我的尝试，它只适用于这个类：

#new .mjx-math  {
  display: inline-flex;
}

Answer 3

稍微更细微的方法会起作用吗？

此代码使用 inline-block 查找 span，并将它们设置为具有显示类：inline-flex 和 align-items:baseline。

我没有足够的信息来尝试在触摸滚动失败的示例中进行尝试，因此无法说明它是否会对您的用例有所帮助，但它似乎确实可以正确显示问题中的公式。

<style>
/* remove the setting you have and replace with this */
.test  {
  display: inline-flex;
  align-items: baseline;
}
</style>

<button onclick="testinit();">
Click me to change inline-block spans to inline-flex and align-items: baseline</button>
  <div>
    \( \sqrt[7]{\log_2\left(x\right)} \)
  </div>
 <script>
  function testinit() {const spans = document.getElementsByTagName("span");
let count = 0;
for (let i = 0; i < spans.length; i++) {
  if (window.getComputedStyle(spans[i]).display == 'inline-block') {
    spans[i].classList.add('test');
    count++;
  }
}
alert('Number of spans changed: ' + count);
}
</script>