---
title: <mfrac>
slug: Web/MathML/Element/mfrac
tags:
  - MathML
  - 'MathML:Element'
  - Referenz
translation_of: Web/MathML/Element/mfrac
---
<div>{{MathMLRef}}</div>

<p class="summary">Das Element <code>&lt;mfrac&gt;</code> wird in MathML verwendet, um Brüche darzustellen. (engl. fraction = Bruch, Teil)</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">&lt;mfrac&gt;<em>Zähler Nenner</em>&lt;/mfrac&gt;</pre>

<h2 id="Attribute">Attribute</h2>

<dl>
 <dt id="attr-bevelled">bevelled</dt>
 <dd>Dieses Attribut bestimmt die Art der Bruchdarstellung: Wenn es <code>true</code> gesetzt ist, werden Zähler und Nenner nebeneinander gesetzt und durch eine Schrägstrich verbunden. Der Vorgabewert ist <code>false</code>, wobei der Bruch mit einem waagerechten Bruchstrich gesetzt werden.</dd>
 <dt id="attr-class-id-style">class, id, style</dt>
 <dd>Zur Einbindung von <a href="https://developer.mozilla.org/de/docs/Web/CSS">CSS-Stylesheets</a> und zur direkten Anwendung von CSS-Angaben.</dd>
 <dt id="attr-denomalign">denomalign</dt>
 <dd>Die horizontale Ausrichtung des Nenners (unter dem Bruchstrich). Der Standardwert ist <code>center</code>, weiterhin sind <code>left</code> und <code>right</code> möglich.</dd>
 <dt id="attr-href">href</dt>
 <dd>Mit diesem Attribut kann ein Link gesetzt werden.</dd>
 <dt id="attr-linethickness">linethickness</dt>
 <dd>Die Dicke des waagerechten Bruchstrichs. Der Vorgabewert ist <code>medium</code>, außerdem können hier <code>thin</code>, <code>thick</code>, und andere <a href="/en-US/docs/CSS/length">Längenangaben</a> gemacht werden.</dd>
 <dt id="attr-mathbackground">mathbackground</dt>
 <dd>Die Hintergrundfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
 <dt id="attr-mathcolor">mathcolor</dt>
 <dd>Die Textfarbe. Folgende Notationen sind erlaubt: <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rgb</a></code>, <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#rgb%28%29">#rrggbb</a></code> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Werte">HTML-Farbnamen</a>.</dd>
 <dt id="attr-numalign">numalign</dt>
 <dd>Die horizontale Ausrichtung des Zählers (oberhalb des Bruchstrichs). Der Standardwert ist <code>center</code>, weiterhin sind <code>left</code> und <code>right</code> möglich.</dd>
</dl>

<h2 id="Beispiele">Beispiele</h2>

<p>Beispiel: <img alt="(a/b)/(c/d)" src="/files/3194/mfrac.png" style="margin-left: 10px; vertical-align: middle;"></p>

<p>Darstellung in Deinem Browser: <math> <mfrac bevelled="true"> <mfrac> <mi> a </mi> <mi> b </mi> </mfrac> <mfrac> <mi> c </mi> <mi> d </mi> </mfrac> </mfrac> </math></p>

<pre class="brush: html">&lt;math&gt;
  &lt;mfrac bevelled="true"&gt;
     &lt;mfrac&gt;
        &lt;mi&gt; a &lt;/mi&gt;
        &lt;mi&gt; b &lt;/mi&gt;
     &lt;/mfrac&gt;
     &lt;mfrac&gt;
        &lt;mi&gt; c &lt;/mi&gt;
        &lt;mi&gt; d &lt;/mi&gt;
     &lt;/mfrac&gt;
  &lt;/mfrac&gt;
&lt;/math&gt;
</pre>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Standard</th>
   <th scope="col">Status</th>
   <th scope="col">Bemerkung</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mfrac', 'mfrac') }}</td>
   <td>{{ Spec2('MathML3') }}</td>
   <td>Current specification</td>
  </tr>
  <tr>
   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mfrac', 'mfrac') }}</td>
   <td>{{ Spec2('MathML2') }}</td>
   <td>Initial specification</td>
  </tr>
 </tbody>
</table>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Merkmal</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatGeckoDesktop("1.0") }}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>5.1</td>
  </tr>
  <tr>
   <td><code>bevelled</code></td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatGeckoDesktop("1.0") }}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>href</code></td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatGeckoDesktop("7.0") }}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>mathbackground</code></td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatGeckoDesktop("2.0") }}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>5.1</td>
  </tr>
  <tr>
   <td><code>mathcolor</code></td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatGeckoDesktop("2.0") }}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>5.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Merkmal</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatGeckoMobile("1.0") }}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>bevelled</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatGeckoMobile("1.0") }}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>href</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatGeckoMobile("7.0") }}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>mathbackground</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatGeckoMobile("2.0") }}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>mathcolor</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{ CompatGeckoMobile("2.0") }}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Hinweise_zu_Gecko">Hinweise zu Gecko</h2>

<ul>
 <li>Seit Gecko 7.0 {{ geckoRelease("7.0") }} hat das <code>linethickness</code>-Attribut den korrekten Vorgabewert <code>medium</code>.</li>
</ul>