[已解决]MathML & css : display是block还是block math

Mike_python小

问题： 在使用 MathML 编写 HTML 时，display: block 在 Safari 上正常显示，但在 Edge 上显示异常；而 display: block math 在 Edge 上可用，却在 Safari 上不可用。如何解决这个问题？

解决方案：

这个问题可能是由于不同浏览器对 MathML 和 CSS 支持程度的差异导致的。为了解决这个问题，您可以尝试以下方法：

1. 使用跨浏览器的解决方案： 考虑使用一个跨浏览器的库，如 [MathJax](https://www.mathjax.org/)，它可以帮助您在不同浏览器上实现一致的数学公式显示效果。

2. 使用 CSS 的浏览器前缀： 有时候，浏览器对某些 CSS 属性的支持需要添加特定的前缀。尝试为 display 属性添加浏览器前缀，如 -webkit- 和 -ms-，以确保在 Safari 和 Edge 上都能正常显示。

  

1. ss
2.    .math-block {
3.      display: -webkit-block;
4.      display: -ms-block;
5.      display: block;
6.    }
7.    

复制代码

3. 使用媒体查询： 您可以使用 CSS 媒体查询针对不同的浏览器应用不同的样式。例如，您可以针对 Safari 和 Edge 分别设置 display 属性：

  

1. ss
2.    .math-block {
3.      display: block;
4.    }
6.    @media screen and (-webkit-min-device-pixel-ratio: 0) {
7.      .math-block {
8.        display: block math;
9.      }
10.    }
11.    

复制代码

   这样，display: block 将应用于所有浏览器，而 display: block math 仅应用于 WebKit 内核的浏览器（如 Safari）。

请尝试以上方法，看看哪种解决方案最适合您的需求。希望这些建议能帮助您解决在不同浏览器上显示 MathML 的问题。

球一个最佳答案谢谢啦！这对我非常重要！
本段回答来自Chat GPT-4，如有错误，多多包涵！