MathML & css : display是block还是block math
我在使用 MathML 编写 HTML 的时候遇到了奇怪的情况：我通过使用 display: block 的界面可以在 Safari 上正常显示，而在 Edge 上显示诡异；而 display: block math 在 Edge 可用，却在 Safari 上不可用。即：
在使用 MathML 编写 HTML 时，应该使用 display: block math。
MathML 是一种用于描述数学公式的标记语言，它可以与 HTML 和 CSS 一起使用。在使用 CSS 控制 MathML 公式的样式时，应该使用 display 属性来指定公式的显示方式。
在 MathML 中，公式本身就是一个块级元素，因此应该使用 display: block math 来让公式在页面中以块级元素的形式显示。如果使用 display: block，则可能会导致在某些浏览器上出现问题。
需要注意的是，不同的浏览器对 MathML 的支持程度不同，因此在编写 MathML 代码时需要进行兼容性测试，以确保在各种浏览器上都能正常显示。 问题： 在使用 MathML 编写 HTML 时，display: block 在 Safari 上正常显示，但在 Edge 上显示异常；而 display: block math 在 Edge 上可用，却在 Safari 上不可用。如何解决这个问题？
解决方案：
这个问题可能是由于不同浏览器对 MathML 和 CSS 支持程度的差异导致的。为了解决这个问题，您可以尝试以下方法：
1. 使用跨浏览器的解决方案： 考虑使用一个跨浏览器的库，如 (https://www.mathjax.org/)，它可以帮助您在不同浏览器上实现一致的数学公式显示效果。
2. 使用 CSS 的浏览器前缀： 有时候，浏览器对某些 CSS 属性的支持需要添加特定的前缀。尝试为 display 属性添加浏览器前缀，如 -webkit- 和 -ms-，以确保在 Safari 和 Edge 上都能正常显示。
ss
.math-block {
display: -webkit-block;
display: -ms-block;
display: block;
}
3. 使用媒体查询： 您可以使用 CSS 媒体查询针对不同的浏览器应用不同的样式。例如，您可以针对 Safari 和 Edge 分别设置 display 属性：
ss
.math-block {
display: block;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.math-block {
display: block math;
}
}
这样，display: block 将应用于所有浏览器，而 display: block math 仅应用于 WebKit 内核的浏览器（如 Safari）。
请尝试以上方法，看看哪种解决方案最适合您的需求。希望这些建议能帮助您解决在不同浏览器上显示 MathML 的问题。
球一个最佳答案谢谢啦！这对我非常重要！{:10_254:}{:10_254:}{:10_254:}
本段回答来自Chat GPT-4，如有错误，多多包涵！ 在处理 MathML 时，不同浏览器可能会有不同的表现。这是因为浏览器对 MathML 的支持程度不同。在您的情况下，Safari 和 Edge 浏览器在处理 display: block 和 display: block math 时有所差异。为了解决这个问题，您可以尝试使用一种兼容性更好的方法，例如使用 MathJax 库。
MathJax 是一个流行的 JavaScript 库，可以让您在各种浏览器中显示数学公式。它可以自动处理 MathML 和 LaTeX，并在不同浏览器中提供一致的显示效果。要使用 MathJax，您需要在 HTML 文件中引入 MathJax 库，然后使用 MathML 或 LaTeX 编写数学公式。
以下是如何在 HTML 文件中引入 MathJax 库的示例：
<!DOCTYPE html>
<html>
<head>
<script src=\"https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.0/es5/tex-mml-chtml.js\" id=\"MathJax-script\" async></script>
</head>
<body>
<!-- 在此处编写您的数学公式 -->
</body>
</html>
在引入 MathJax 库之后，您可以使用 MathML 或 LaTeX 编写数学公式，MathJax 会自动处理它们并在不同浏览器中提供一致的显示效果。
这种方法应该可以解决您在 Safari 和 Edge 浏览器中遇到的显示问题。
如果问题已经解决，请设置最佳答案 浏览器内核问题？ 歌者文明清理员 发表于 2023-10-3 22:16
浏览器内核问题？
就是啊
所以怎么解决呢
我想设置css根据不同浏览器进行不同的排版，就是在 Safari (-webkit-) 上用 display: block ，在 Edge (-ms-) 上用 display: block math ，但是 css 又不让我用 -ms-display 和 -webkit-display hellomyprogram 发表于 2023-10-4 11:05
就是啊
所以怎么解决呢
我想设置css根据不同浏览器进行不同的排版，就是在 Safari (-webkit-) 上用 dis ...
可以写好几份css，Javascript 通过 navigator.userAgent 包含“Chrome” 就是 chromium内核，trident -> ie，gecko -> firefox，剩下的事safari，js判断，然后指定对应的css
页:
[1]