MathJax中的內容的意外Z索引

我正在寫HTML5/CSS3中的網頁的草圖，我觀察到MathJax中的內容與Z索引有關的意外行爲。MathJax中的內容的意外Z索引

我的想法是通過垂直滾動顯示以下圖片，名稱和聯繫人以及下面顯示的內容，並將其固定在頂部div。

由於this updated JSFiddle節目，似乎一切工作，但一兩件事：通過MathJax界定的數學定界符\(和\)流動的#top DIV和圖像上面，下面沒有像文字各地。

以下與更新z-index es，也應該在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 protected]</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.

來源

2015-07-21 MattAllegro

未來的注意事項：cdn.mathjax.org即將結束生命週期，請查看https://mathjax.org/cdn-shutting-down獲取遷移提示。 –

我不知道Mathjax，所以我不知道知道什麼是應用程序的一部分可能會導致這一點，但您可以通過添加以下屬性值的#bimg選擇修復：

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

根據您的jsfiddle提供的代碼這不會破壞任何東西。這可以在Firefox和IE中使用，但不能在Webkit瀏覽器中使用。

來源

2015-07-21 19:41:19 TylerH

好的Firefox和IE11 ...鉻和歌劇被固定;） – MattAllegro

@MattAllegro這解釋它;由於某些原因，Chrome瀏覽器的表現與其他瀏覽器不同......我不覺得奇怪:-)我認爲您必須查看MathJax的代碼才能瞭解導致數學函數定位如此獨特的原因。它是一個開源應用程序嗎？也許提交bug是爲了。 – TylerH

是的，MathJax是開放的！在Chrome上甚至沒有'#topl，#topr {-webkit-position：relative;位置：相對; -webkit-z-index：1; z-index：1;}'做到了。更多，在https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML或z-index中提到了兩次，值爲101和102，但是甚至沒有#topl ，#topr {-webkit-position：relative;位置：相對; -webkit-z-index：103; z-index：103;}'使它... – MattAllegro

MathJax中的內容的意外Z索引

回答

相關問題