Chorme浏览器渲染MathJax时出现竖线的解决方法
Chorme浏览器渲染MathJax时出现竖线的原因分析与解决方法
查资料知，Chorme中显示MathJax时出现竖线的原因如下：
新版的Chorme浏览器在解析css时，会对其中的值进行向上取整(四舍五入)，而其他浏览器不会，且Chrome较旧版本(比如Chrome 40 稳定版)也是不会出现此问题的。
This is caused by Chrome rounding up values which other browsers do not round up.
方法1：修改引用的MathJax路径
将MathJax的版本与官方cdn同步，使用最新版MathJax，目前MathJax 2.6已修复此问题，完成了兼容...
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 方法2：修改CSS
在需要引用MathJax的页面的css中加入：
.MathJax nobr>span.math>span{border-left-width:0 !important}; 用!important限定的定义却是优先级最高的.
!important 的语法
!important为开发者提供了一个增加样式权重的方法。应当注意的是!important是对整条样式的声明，包括这个样式的属性和属性值。这里有个简单的代码示例可以清晰地说明!important是如何应用于原本的样式中的：
#example { font-size: 14px !important; }
#container #example { font-size: 10px;} 在上面的代码示例中，由于使用了!important，id为“example”的元素字号将被设置为14px。
方法3：使用JavaScript强制修改MathJax的样式
修改
Math Setting -> Math Renderer . javascript:$('.math>span').css("border-left-color","transparent") 如果你的浏览器不允许以这种方式执行JavaScript。你可以在控制台Console中输入(Chrome中按 F12，然后选择"Console"即可)。
If your browser disallow executing JavaScript this way. You can try pasting it into console (in Chrome, press F12 and select "Console").
相关链接：
pandoc - Chrome rendering MathJax equations with a trailing vertical line - Stack Overflow http://stackoverflow.com/questions/34277967/chrome-rendering-mathjax-equations-with-a-trailing-vertical-line
查看15道真题和解析