Question

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

我的想法是通过垂直滚动来固定顶部div，图片，名称和联系人，以及下面显示的内容。

正如this updated JSFiddle所示，一切似乎都有效：MathJax分隔符\(和\)分隔的数学流经#top div和图像，而不是下面就像文字一样。

以下内容，已更新 z-index，还应该重现Chrome和Opera（在Windows上）以及Chrome和Android浏览器（在Samsung 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.

Answer 1

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

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

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

MathJax中内容的意外z-index

1 个答案: