Question

我正在显示一些mathjax，它通常很好用。例如。在DIV内。然而，当我将它插入Bootstrap手风琴时，它会破坏所述手风琴的格式，但只有标题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结合起来this jsfiddle可能是一个开始。

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

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

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

Mathjax显示问题（仅在某些位置打破格式）

1 个答案: