专栏首页大白技术控的技术自留地Chorme浏览器渲染MathJax时出现竖线的解决方法

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • MathJax让你爱上数学公式

    如果让我投票最优秀的开源项目,我会投给MathJax。MathJax是一个JavaScript引擎,用来显示网络上的数学公式。有些数学论坛的所有数学公式都用L...

    Enjoy233
  • 中国.NET:各地微软技术俱乐部汇总(持续更新中...)

    本文是转载文,源地址: https://www.cnblogs.com/panchun/p/JLBList.html by 史记微软.

    Enjoy233
  • 安装网络阅读器 - Tiny Tiny RSS Reader

    搜索引擎使用的是Google。阅读器原来有用过鲜果的,后来改用Google阅读器。

    Enjoy233
  • 区块链加上云存储,能玩出什么花样?

    一夜之间硬盘会坏掉,网站也会倒闭,难道就没有一个数据安全存储的地方吗?当然是有的! 当云存储首次出现时,被誉为革命性的,即使在今天的技术革命中,它仍然发挥着作用...

    企鹅号小编
  • 深入学习MySQL 03 Schema与数据类型优化

    schema就是数据库对象的集合,这个集合包含了各种对象如:表、视图、存储过程、索引等。为了区分不同的集合,就需要给不同的集合起不同的名字,默认情况下一个用户对...

    KEN DO EVERTHING
  • Android 8.0图标适配

       android 8.0中 如果不对图标进行适配就会出现白底图标,比如饿了吗,小黄车等软件

    黄林晴
  • 【Rust日报】 2020-03-19 Rust-IPFS 正在寻找 Rust 开发者

    该扩展可以让你直接在地址栏即时搜索 Rust 文档,crates.io 上相关的库,Rust 内建方法甚至 Rust 官方书籍等等。使用方法相当简单,在浏览器地...

    MikeLoveRust
  • 英伟达对小猫咪下手了!StyleGAN生成猫片“笑果”惊人

    英伟达去年推出的StyleGAN,生成的人脸让网友惊呼“太逼真了”。前几天,英伟达官方又公布了源代码。

    量子位
  • SwiftUI:按钮和图片

    制作按钮的最简单方法是当它仅包含一些文本时:传递按钮的标题,以及点击按钮时应运行的闭包:

    韦弦zhy
  • 服务端性能优化之双重检查锁

    早前的文章中讨论过服务端性能优化之异步查询转同步,在本文中,将讨论双重检查锁定设计模式。通过简单地事先检查锁定条件,该模式减少了锁定获取的次数,通常可以提高性能...

    八音弦

扫码关注云+社区

领取腾讯云代金券