MathJax 中内容的意外 z-index答案

【问题标题】：Unexpected z-index of contents in MathJaxMathJax 中内容的意外 z-index
【发布时间】：2015-10-11 10:19:19
【问题描述】：

我正在用 HTML5/CSS3 编写网页草图，我观察到 MathJax 中的内容在 z-index 方面的意外行为。

我的想法是顶一个div，固定，有图片，姓名和联系人，下面的内容垂直滚动显示如下。

正如this updated JSFiddle 所示，一切似乎都有效，但只有一件事：由 MathJax 分隔符 \( 和 \) 分隔的数学流在 #top div 和图像上方，而不是像周围的文字一样在下方。

以下内容，更新 z-indexes，也应该在 Chrome 和 Opera（Windows 上）以及 Chrome 和 Android 浏览器（在三星 S3 和 S4 上测试）上重现该问题。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Name Surname</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <script type="text/x-mathjax-config">
    MathJax.Hub.Register.StartupHook("MathMenu Ready",function () {
    MathJax.Menu.BGSTYLE["z-index"] = 1;
    });
  </script>
  <script type="application/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<style>
#wrap {
  margin: 0px auto;
  padding: 10px;
  padding-top: 0px;
  width: 920px;
  text-align: left;
  background-color: #fff;
  }

p {
  margin: 0px;
  padding: 0px;
  text-align: left;
}

a {
  text-decoration: none;
  color: #096;
}

.clb {
  clear: both;
}

#top {
  background-color: #eee;
  position: fixed;
  margin: auto;
  margin-top: 0px;
  width: 900px;
  height: 330px;
  padding: 10px;
}

#topl {
  float: left;
  width: 450px;
  height: 310px;
  padding: 10px 0px;
  -webkit-position: relative;
  position: relative;
  -webkit-z-index: 200;
  z-index: 200;
}

#bimg {
  height: 306px;
  width: 306px;
  margin: 0px auto;
  border-radius: 22px;
  border: 3px solid #000;
  -webkit-position: relative;
  position: relative;
  -webkit-z-index: 200;
  z-index: 200;
}

#bimg img {
  height: 300px;
  width: 300px;
  margin: auto;
  border-radius: 20px;
  border: 3px solid #fff;
  -webkit-position: relative;
  position: relative;
  -webkit-z-index: 200;
  z-index: 200;
}

#topr {
  float: right;
  width: 450px;
  height: 310px;
  padding: 10px 0px;
  -webkit-position: relative;
  position: relative;
  -webkit-z-index: 200;
  z-index: 200;
}

#topr h1 {
  margin-top: 50px;
  margin-bottom: 20px;
  font-size: 24pt;
  font-weight: bold;
}

#topr p {
  font-size: 11pt;
  margin-bottom: 9pt;
}

#cont {
  margin: auto;
  margin-top: 0px;
  width: 900px;
  padding: 10px;
  padding-top: 355px;
}

#cont p {
  font-size: 13pt;
  margin-bottom: 10pt;
}
</style>
</head>

<body>
<div id="wrap">
  <div id="top">
    <div id="topl">
      <div id="bimg"><img src="http://matteoallegro.joomlafree.it/kb.png" alt="Image"></div>
    </div>

    <div id="topr">
      <h1>Name Surname</h1>

      <p><a>email@email.com</a></p>
    </div>

    <div class="clb"></div>
  </div>

  <div id="cont">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    <p>Elliptic curve \(y^2=x^3-x\) over \(\mathbb{F}_{89}\)</p>
    <p>Elliptic curve \(y^2=x^3-x\) over \(\mathbb{F}_{89}\)</p>
    <p>Elliptic curve \(y^2=x^3-x\) over \(\mathbb{F}_{89}\)</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p>  
</div>
</div>
</div>
</body>
</html>

第一个 <script> here 的参考。我根本不懂javascript，但我注意到https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML z-index 出现了两（三？）次，显然是101和102的值。

【问题讨论】：

未来注意事项：cdn.mathjax.org 即将结束生命周期，请查看mathjax.org/cdn-shutting-down 了解迁移提示。

标签： html css cross-browser z-index mathjax

【解决方案1】：

我不知道 Mathjax，所以我不知道应用程序的哪个部分可能导致此问题，但您可以通过将以下属性值添加到 #bimg 选择器来修复它：

#bimg {
    position: relative;
    z-index: 1;
}

根据您的 JSFiddle 中提供的代码，这不会破坏任何内容。这将适用于 Firefox 和 IE，但不适用于 Webkit 浏览器。

【讨论】：

好的 Firefox 和 IE11...chrome 和 Opera 待修复 ;)
@MattAllegro 这解释了它；由于某种原因，Chrome 的行为与其他浏览器不同...我并不感到惊讶 :-) 我认为您必须查看 MathJax 的代码才能了解导致该数学函数定位如此独特的原因。它是一个开源应用程序吗？也许提交一个错误是为了。
是的，MathJax 已打开！在 Chrome 上，甚至 #topl, #topr {-webkit-position: relative; position: relative; -webkit-z-index: 1; z-index: 1;} 都没有。更多，在cdn.mathjax.org/mathjax/latest/…z-index 中被提及两次，分别为 101 和 102，但甚至 #topl, #topr {-webkit-position: relative; position: relative; -webkit-z-index: 103; z-index: 103;} 都没有...
@MattAllegro 我看了看，甚至覆盖 MathTable 似乎也不起作用；我会向 MathJax 提交错误或评论，以至少让作者意识到这个问题。他们可能已经知道解决办法了！
@MattAllegro 明白了。我尝试将 z-index 设置为像 9999999 这样的高值，但我想调用的时间也很重要。