css - 在 MathML 数学元素上显示 ='inline' 和样式 ="display: ' inline';"之间有区别吗？

Question

有什么区别吗

<math display="inline"></math>

和

<math style="display: inline;"></math> ？

谢谢!

Answer 1

虽然 display="inline" 和 style="display:inline" 通常表现相似，但 MathML 的 display 属性和 CSS 的 display 属性是非常不同的东西。

虽然两者都应该类似地影响“外部”布局(即 MathML 表达式如何适应其周围的上下文)，但它们最终是不相关的，并且在发生冲突时会以意想不到的方式相互作用。这也许并不奇怪，因为它们是在完全不同的标准中指定的，并且它们的交互在任何地方都没有指定；有关某些示例，请参阅末尾的代码片段。虽然 SVG(另一种并入 HTML5 的 XML 语言)正在从 SVG 和 CSS 工作组积极开发以保持一致，但 MathML 不再处于积极开发状态，因此将来不会与 CSS 保持一致。

重要的区别可能如下:

• MathML 的属性只有两个值(inline 和block)，而 CSS 提供了 a large variety of display attributes ;这主要是因为 MathML 不知道其上下文(因为它是一种 XML 语言)。这意味着您经常需要同时设置这两个值，这可能会导致维护问题。

• MathML 的display 属性影响表达式的内部布局。这是因为它影响了 MathML 的 displaystyle 属性，例如，导致可移动限制的排版不同；见https://www.w3.org/Math/draft-spec/mathml.html#chapter2_interf.toplevel.atts了解更多相关信息。

此外，MathML 对 polyfill 的需求使事情变得更加复杂，因为它们可能会以不同的方式处理交互(如下面的示例中使用按钮加载 MathJax 时所示)。由于没有指定任何内容，因此这里当然没有对错之分。

var button = document.getElementById('button');
var loadMathJax = function() {
 script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=MML_CHTML-full';
  document.head.appendChild(script); 
}
button.onclick = loadMathJax;

<button id="button">Render with MathJax</button>

<h1>MathML inline, CSS inline</h1>

Hello <math xmlns="http://www.w3.org/1998/Math/MathML">
  <msup>
    <mrow>
      <mo>(</mo>
      <mrow>
        <munderover>
          <mo>&#x2211;<!-- ∑ --></mo>
          <mrow class="MJX-TeXAtom-ORD">
            <mi>k</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msub>
          <mi>a</mi>
          <mi>k</mi>
        </msub>
        <msub>
          <mi>b</mi>
          <mi>k</mi>
        </msub>
      </mrow>
      <mo>)</mo>
    </mrow>
    <mrow class="MJX-TeXAtom-ORD">
      <mn>2</mn>
    </mrow>
  </msup>
</math>
World.

<h1>MathML inline, CSS block</h1>
Hello.
<math style="display:block" xmlns="http://www.w3.org/1998/Math/MathML">
  <msup>
    <mrow>
      <mo>(</mo>
      <mrow>
        <munderover>
          <mo>&#x2211;<!-- ∑ --></mo>
          <mrow class="MJX-TeXAtom-ORD">
            <mi>k</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msub>
          <mi>a</mi>
          <mi>k</mi>
        </msub>
        <msub>
          <mi>b</mi>
          <mi>k</mi>
        </msub>
      </mrow>
      <mo>)</mo>
    </mrow>
    <mrow class="MJX-TeXAtom-ORD">
      <mn>2</mn>
    </mrow>
  </msup>
</math>
World.

<h1>MathML block, CSS inline</h1>

Hello <math display="block" style="display:inline" xmlns="http://www.w3.org/1998/Math/MathML">
  <msup>
    <mrow>
      <mo>(</mo>
      <mrow>
        <munderover>
          <mo>&#x2211;<!-- ∑ --></mo>
          <mrow class="MJX-TeXAtom-ORD">
            <mi>k</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msub>
          <mi>a</mi>
          <mi>k</mi>
        </msub>
        <msub>
          <mi>b</mi>
          <mi>k</mi>
        </msub>
      </mrow>
      <mo>)</mo>
    </mrow>
    <mrow class="MJX-TeXAtom-ORD">
      <mn>2</mn>
    </mrow>
  </msup>
</math>
World.



<h1>MathML inline with displaystyle, CSS inline</h1>

Hello <math xmlns="http://www.w3.org/1998/Math/MathML" displaystyle="true">
  <msup>
    <mrow>
      <mo>(</mo>
      <mrow>
        <munderover>
          <mo>&#x2211;<!-- ∑ --></mo>
          <mrow class="MJX-TeXAtom-ORD">
            <mi>k</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msub>
          <mi>a</mi>
          <mi>k</mi>
        </msub>
        <msub>
          <mi>b</mi>
          <mi>k</mi>
        </msub>
      </mrow>
      <mo>)</mo>
    </mrow>
    <mrow class="MJX-TeXAtom-ORD">
      <mn>2</mn>
    </mrow>
  </msup>
</math>
World.

<h1>MathML inline with displaystyle, CSS block</h1>
Hello.
<math style="display:block" displaystyle="true" xmlns="http://www.w3.org/1998/Math/MathML">
  <msup>
    <mrow>
      <mo>(</mo>
      <mrow>
        <munderover>
          <mo>&#x2211;<!-- ∑ --></mo>
          <mrow class="MJX-TeXAtom-ORD">
            <mi>k</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msub>
          <mi>a</mi>
          <mi>k</mi>
        </msub>
        <msub>
          <mi>b</mi>
          <mi>k</mi>
        </msub>
      </mrow>
      <mo>)</mo>
    </mrow>
    <mrow class="MJX-TeXAtom-ORD">
      <mn>2</mn>
    </mrow>
  </msup>
</math>
World.

<h1>MathML block without displaystyle, CSS inline</h1>

Hello <math display="block" displaystyle="false" style="display:inline" xmlns="http://www.w3.org/1998/Math/MathML">
  <msup>
    <mrow>
      <mo>(</mo>
      <mrow>
        <munderover>
          <mo>&#x2211;<!-- ∑ --></mo>
          <mrow class="MJX-TeXAtom-ORD">
            <mi>k</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msub>
          <mi>a</mi>
          <mi>k</mi>
        </msub>
        <msub>
          <mi>b</mi>
          <mi>k</mi>
        </msub>
      </mrow>
      <mo>)</mo>
    </mrow>
    <mrow class="MJX-TeXAtom-ORD">
      <mn>2</mn>
    </mrow>
  </msup>
</math>
World.