首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Chorme浏览器渲染MathJax时出现竖线的解决方法

Chorme浏览器渲染MathJax时出现竖线的解决方法

作者头像
Enjoy233
发布2019-03-05 14:36:50
9610
发布2019-03-05 14:36:50
举报

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016年05月20日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • !important 的语法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档