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

Chorme浏览器渲染MathJax时出现竖线的解决方法的更多相关文章

  1. 关于php读mysql数据库时出现乱码的解决方法

    关于php读mysql数据库时出现乱码的解决方法 php读mysql时,有以下几个地方涉及到了字符集. 1.建立数据库表时指定数据库表的字符集.例如 create table tablename ( ...

  2. linux上备份Oracle时EXP-00091的错误解决方法

    unix/linux上备份Oracle时EXP-00091的错误解决方法 unix/linux上备份数据时的错误解决方法 EXP-00091: Exporting questionable stati ...

  3. PL/SQL Developer 使用中文条件查询时无数据的解决方法(转)

    原文地址: PL/SQL Developer 使用中文条件查询时无数据的解决方法 PL/SQL Developer 使用中文条件查询时无数据,这是由于字符集的不一致导致的. 执行以下sql命令:sel ...

  4. WPF拖动DataGrid滚动条时内容混乱的解决方法

    WPF拖动DataGrid滚动条时内容混乱的解决方法 在WPF中,如果DataGrid里使用了模板列,当拖动滚动条时,往往会出现列表内容显示混乱的情况.解决方法就是在Binding的时候给Update ...

  5. 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法

    在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...

  6. Android开发环境搭建时遇到问题的解决方法

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/linux_loajie/article/details/33823637 Android开发环境搭建 ...

  7. 弹出USB大容量存储设备时出问题的解决方法

    我的计算机->管理->系统工具->事件查看器->自定义视图->Kernel-Pnp->详情->进程ID 然后在任务管理器里找到该进程(任务管理器->查看 ...

  8. 页面渲染时js阻塞的解决方法

    一般地,一个包含外部样式表文件和外部脚本文件的HTML载入和渲染过程是这样的: 浏览器下载HTML文件并开始解析DOM. 遇到样式表文件link[rel=stylesheet]时,将其加入资源文件下载 ...

  9. 在IE浏览器中执行OpenFlashChart的reload方法时无法刷新的解决方法

    由于项目需求,需要在网页上利用图表展示相关数据的统计信息,采用了OpenFlashChart技术.OpenFlashChart是一款开源的以Flash和Javascript为技术基础的免费图表,用它能 ...

随机推荐

  1. Codeforces 741B Arpa's weak amphitheater and Mehrdad's valuable Hoses (并查集+分组背包)

    <题目链接> 题目大意: 就是有n个人,每个人都有一个体积和一个价值.这些人之间有有些人之间是朋友,所有具有朋友关系的人构成一组.现在要在这些组中至多选一个人或者这一组的人都选,在总容量为 ...

  2. golang struct 和 byte互转

    相比于encoding, 使用unsafe性能更高 type MyStruct struct { A int B int } var sizeOfMyStruct = int(unsafe.Sizeo ...

  3. 04flask_scripts使用

    1,flask_script作用 flask_script的作用是可以通过命令行的实行来操作Flask,例如通过命令跑一个开发版本的服务器,设置数据库,定时任务等, 我们把脚本命令代码放在一个叫做ma ...

  4. Android应用程序如何使用Internet资源?

    思路:连接Internet资源-->分析XML资源-->使用Download Manager下载文件 Android的Internet连接模型和用于分析Internet数据源的Java技术 ...

  5. nsqadmin

    nsqadmin 结构体定义 type Options struct { LogLevel string `flag:"log-level"` LogPrefix string ` ...

  6. CSS水平垂直居中!

    总结一下,最经典的面试题 分两种情况,宽高确定和不定宽高 (一)宽高确定 初始条件如下: 1. 绝对定位 + 负margin 里面的盒子相对于父盒子绝对定位,距离上面和左边分别为50%,此处的50%是 ...

  7. 使用bootstrap本机调试时,应该使用本地服务器地址访问,如http://192.168.19.112/rjshop/,否则360浏览器会出现不兼容的情况

    使用bootstrap本机调试时,应该使用本地服务器地址访问,如http://192.168.19.112/rjshop/,否则360浏览器会出现不兼容的情况

  8. jieba中文分词

      jieba中文分词¶   中文与拉丁语言不同,不是以空格分开每个有意义的词,在我们处理自然语言处理的时候,大部分情况下,词汇是对句子和文章的理解基础.因此需要一个工具去把完整的中文分解成词. ji ...

  9. Java-IO流之BufferedReader 和BufferedWriter的使用和原理

    BufferedReader和BufferedWriter出现的目的是为了对FileReader以及FileWriter的读写操作进行增强,而怎么增强呢,原理类似于使用StringBuilder,是把 ...

  10. zuoye

    a=input('请输入一个数字:') b=input('请再输入一个数字') sum2=int(a)+int(b) print('两个数字的和是:{}'.format(sum2)) a=input( ...