如何在Web應用程序中顯示所有分數？

Question

我想設計一個簡單的數學應用來訓練分數。 我想知道如何在所有最新的瀏覽器（Chrome，Safari，Firefox，IE）中顯示所有分數。

維基百科嵌入他們爲PNG，如：

但是，這似乎是一個動態的Web應用程序，我想生成隨機分數瞳孔應工作非常impracticle。

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