Bootstrap与MathQuill冲突导致LaTeX根号渲染异常问题

我之前也碰到过一模一样的问题！MathQuill 0.10.1和Bootstrap 4.0.0-beta.3的container类确实会有样式冲突，导致根号这类依赖精确排版渲染的符号变成扭曲的波浪线。下面是亲测有效的修复方法：

问题根源 #

Bootstrap的container类会给内部元素继承一些全局排版样式（比如line-height），而MathQuill渲染根号这类符号时，是通过计算元素尺寸生成SVG路径的，继承的异常样式会干扰这个计算过程，最终导致符号变形。

具体修复步骤 #

在你的项目样式文件中添加以下CSS代码（注意要放在Bootstrap和MathQuill的CSS之后，保证样式优先级）：

/* 修复MathQuill在Bootstrap容器中的排版冲突 */
.mathquill-rendered-math {
  line-height: normal !important;
  font-size: inherit !important;
}

/* 专门修正根号的SVG路径扭曲 */
.mathquill-rendered-math .mq-root-pseudo {
  transform: none !important;
}

验证方法 #

刷新页面后，把你的公式代码<span class="mq">\sqrt{36}</span>放回container类的div中，应该就能看到根号正常显示为标准的直角根号了。

补充说明 #

如果上面的代码还没解决问题，可以再尝试强制重置MathQuill渲染元素的内边距和外边距：

.mathquill-rendered-math {
  padding: 0 !important;
  margin: 0 !important;
}

不过大部分情况下，前面的两段CSS就足够解决问题了。

内容的提问来源于stack exchange，提问作者James Rowe