問題：有沒有辦法完美地模擬inline-blockusinginline-flex和其他一些屬性？理想情況下，不更改 DOM，因為在我的情況下它是由 MathJax 生成的，我寧愿不必更改其源代碼。
JSFiddle： 
結果與display: inline-flex; align-items: baseline：
如您所見，“7”和“2”顯示在錯誤的垂直位置。
uj5u.com熱心網友回復：
當你在子樹中創建每個元素時，display:inline-flex每個不在該子樹根部的元素都將是一個彈性專案，因此被阻塞。
這意味著這些元素將被計算display:flex，因此不會受到vertical-alignMathJax 用于定位“7”和“2”的屬性的影響。
因此，如果沒有對 MathJax 進行詳細的逆向工程以查看可以在何處使用哪些值，我認為這種方法是不可能的。
uj5u.com熱心網友回復：
稍微細致一點的方法會奏效嗎？
此代碼使用 inline-block 查找 spans，并將它們設定為一個類，即 display: 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>
uj5u.com熱心網友回復：
根據我的嘗試，它只適用于這個類：
#new .mjx-math {
display: inline-flex;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/367314.html