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

Question

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

维基百科将它们嵌入为 png，例如:

但这对于我想要生成学生应该使用的随机分数的动态网络应用程序来说似乎非常不切实际。

也许 Mathjax 可以提供帮助？

例如，我想显示 8/5 x 7/4 = ?。

Answer 1

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