Html 如何在web应用程序中显示所有分数？

我想设计一个简单的数学应用程序来训练分数。 我想知道如何在所有最新的浏览器（Chrome、Safari、Firefox、IE）中显示所有分数

Wikipedia将其嵌入为png，例如：

但对于一个动态web应用程序来说，这似乎非常不合适，因为我想生成学生应该使用的随机分数

也许

Mathjax

能帮上忙

---

例如，我想显示

8/5x7/4=？

使用css有一种非常简单的方法。如果你想只显示分数，这很有用。对于更复杂的算术公式，此解决方案可能非常复杂

预览

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>

---

你可以看看这个：@Kangkan:看起来很棒！它似乎比Mathjax简单得多。。。

.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;
}