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").

方法4：将Chrome退回到较低版本，比如：Chrome 40 稳定版，设置禁止自动更新。

相关链接：

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 

[HTML-CSS] [Chrome 48] visual artifacts due to Chrome now rounding up [was: rendering issue in chrome canary builds] · Issue #1300 · mathjax/MathJaxhttps://github.com/mathjax/MathJax/issues/1300