问题：

MathJax中内容的意外z索引

燕宜修

2023-03-14

我正在用HTML5/CSS3编写一个网页的草图，我观察到MathJax中的内容相对于z索引的意外行为。

我的想法是有一个顶部div，固定的，带有图像，名称和联系人，下面显示的内容通过垂直滚动。

正如这次更新的JSFIDLE所显示的，除了一件事之外，一切似乎都正常：由MathJax分隔符\（和\）分隔的数学在#topdiv和图像上方流动，而不是像周围的文本那样在下方流动。

以下是更新后的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>

第一个

共有1个答案

魏书

2023-03-14

我不知道Mathjax，所以我不知道应用程序的哪个部分可能会导致这种情况，但是您可以通过向#bimg选择器添加以下属性值来修复它：

css prettyprint-override">#bimg {
    position: relative;
    z-index: 1;
}

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

类似资料：

中心容器(&Z)索引

我正试着对齐下面的下拉列表，但是不能让它工作。此外，我还有一个图层的问题，不幸的是下拉列表显示在下面的容器下。有人能帮帮我吗？有人有主意吗？ null null
通知中的意图没有额外内容

这似乎是一个常见的问题，我浏览了我已经可以找到的所有相关问题：活动没有获得新的意图，为什么没有在android通知意图中发送额外的数据（整数）？，通知传递旧的意图额外内容，无法在通知中放置意图的额外内容，android未决意图通知问题；但仍然无法解决这个问题。问题是一样的。我设置了一个带有一些额外信息的PendingIntent通知，但我在另一边没有得到它。以下是生成通知的代码：另一方面：
从一堂课中获得有意的额外内容

有没有一种方法可以只从一个类中接收意图附加内容？例如，我有两个使用意图打开第三个活动的活动。现在我只希望前两个中的一个通过附加内容，这样我就可以在第三个活动中接收它。我已经实现了所有功能，但它会崩溃，因为当我打开第二个没有添加额外功能的第三个活动时，它会崩溃我的应用程序。为了更清楚地描述它：活动1：通过意向附加活动1和2都使用意图来启动活动3，但我只需要活动1中的额外内容。
弹性搜索不是x内容例外

我一直在尝试使用以下代码通过进行弹性搜索：我得到了以下错误：发送'PUT'请求到URL：http://localhost:9200/testindex2/test/2放参数：[Content-Type： text/普通；charset=ISO-8859-1， Content-编码：Text， Content-Llong： 52，分块：false]响应代码： 400{"错误"：{"root_ca
使用jQuery加载内容后呈现MathJax

我用jQuery将一些包含数学的内容加载到html文件中。现在我想让Mathjax排版这个新内容，但它不起作用。这就是我的JavaScript代码的样子但它只加载内容，不应用MathJax。有什么建议说明它为什么不起作用吗？编辑我添加了第二个按钮，带有第二次单击功能，运行以下脚本如果我单击第一个按钮，它将加载新内容，而不应用MathJax。如果现在单击第二个按钮，它会将MathJax应用于新
选择查询中mssql中索引的意外锁定

我不断得到所以我用以下死锁信息打印在日志中：这些行表示已检测到死锁，进程1已被选为受害者。进程id_1的日志进程id_2的日志下面一行给出了process_id_1的细节，参考文献[1]是我们想要执行的查询。。。注意：这是对表名和表名的select查询。container\u id是来自表名vfditem的外键。 Ref[4]说它正在等待资源并被暂停下面一行给出了process_i

MathJax中内容的意外z索引

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档