html - 如何显示网络应用程序中的所有分数？

我想设计一个简单的数学应用程序来训练分数。
我想知道如何在所有最新的浏览器（chrome，safari，firefox，ie）中显示所有的分数。
维基百科将它们嵌入为PNG，例如：
但对于一个动态web应用程序来说，这似乎是非常不合适的，我想在这个应用程序中生成学生应该使用的随机分数。
或许Mathjax能帮上忙？
例如，我想显示8/5 x 7/4 = ?。

最佳答案

css有一个非常简单的方法。如果你想只显示分数，这很好。对于更复杂的算术公式，这个解可能会很复杂。
预览
Fraction Example Preview http://imageshack.com/a/img824/218/c6y7.png
CodePen demo
HTML格式

<div class="fraction">
  <span class="top">8</span>
  <span class="bottom">5</span>
</div>

<div class="fraction">
  <span class="operator">*</span>
</div>

<div class="fraction">
  <span class="top">7</span>
  <span class="bottom">4</span>
</div>

<div class="fraction">
  <span class="operator">= &nbsp; ?</span>
</div>

CSS

.fraction, .top, .bottom {
    padding: 0 5px;
}

.fraction {
    display: inline-block;
    text-align: center;
}

.bottom{
    border-top: 1px solid #000;
    display: block;
}

.operator {
  overflow: auto;
  display: block;
  margin-bottom: 5px;
}