Mathjax 显示问题（仅在某些地方破坏格式）

Question

我正在展示一些 mathjax，它通常工作正常。例如。在一个 DIV 中。但是，当我将它插入 Bootstrap Accordion 时，它会破坏所述手风琴的格式，但仅在标题中 Mathjax 似乎插入了自己的跨度，这些跨度继承了我认为导致这种情况的填充和边距等内容。

请参阅下面的代码，如果您单击页面中间的 9 个图像上的了解更多链接之一，它也在此页面 www.clevertree.co.uk 上。下面的第一位坏了，第二位很好。

            <div class="panel panel-default">

                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="panel-toggle collapsed" data-toggle="collapse" data-parent="#accordion_core1" href="#core1content2">
                                <span>Coordinate Geometry in the (??x,y??) Plane</span>
                            </a>
                        </h4>
                    </div><!-- /.panel-heading -->

                    <div id="core1content2" class="panel-collapse collapse">
                        <div class="panel-body">
                            <ul class="circled">
                                <li>Equation of a straight line, including the forms ??y-y_{1}=m(x-x_{1})?? and ??ax + by + c = 0??</li>
                                <li>Conditions for two straight lines to be parallel or perpendicular to each other</li>
                            </ul><!-- /.circled -->
                        </div><!-- /.panel-body -->
                    </div><!-- /.content -->

                </div><!-- /.panel -->

Answer 1

问题在于 Boostrap 在其隐藏内容上使用 display:none。由于这意味着浏览器不会布置内容，这会阻止 MathJax 正确测量宽度和高度。 See this blog post for more details.

长话短说，为了安全起见，您需要触发手风琴中内容的重新渲染。

我对 boostrap 不太熟悉，但将 boostrap docs 与 MathJax docs 结合起来可能是一个开始。

或者，您可以配置 MathJax 预处理器（例如，the TeX one）以忽略手风琴，然后将 Rerender 替换为 Typeset（这样可以节省对该内容的一轮排版，但第二轮会更快所以这将取决于这是否值得）。

编辑例如，为您的站点修改您的配置为

 <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
            tex2jax:{
                inlineMath: [['%%%%','%%%%'], ['??','??']],
                displayMath: [ ['$$','$$'], ['@@', '@@']],
                ignoreClass: "panel"
            }
     });
</script>