display='inline' 和 style="display: 'inline';" 有区别吗在 MathML 数学元素上？答案

【问题标题】：Is there a difference between display='inline' and style="display: 'inline';" on the MathML math element?display='inline' 和 style="display: 'inline';" 有区别吗在 MathML 数学元素上？
【发布时间】：2017-01-06 19:06:50
【问题描述】：

有什么区别

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

和

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

谢谢！

【问题讨论】：

标签： css html attributes mathml

【解决方案1】：

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

虽然两者都应该类似地影响“外部”布局（即，MathML 表达式如何适应其周围的上下文），但它们最终是不相关的，并且在冲突时可以以意想不到的方式交互。这可能并不奇怪，因为它们是在完全不同的标准中指定的，并且它们的交互没有在任何地方指定；对于一些示例，请参见最后的代码 sn-p。虽然 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.

【讨论】：

【解决方案2】：

不，先生，它们完全一样，您可以查看 Mozilla 开发者网络 here 上的 Math 标签文档

【讨论】：