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

hellomyprogram · 发表于 2023-10-3 20:50:19

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

我在使用 MathML 编写 HTML 的时候遇到了奇怪的情况：我通过使用 display: block 的界面可以在 Safari 上正常显示，而在 Edge 上显示诡异；而 display: block math 在 Edge 可用，却在 Safari 上不可用。
即：

最佳答案

月排行榜 / 总排行榜

歌者文明清理员

2023-10-4 14:32:44

hellomyprogram 发表于 2023-10-4 11:05
就是啊
所以怎么解决呢
我想设置css根据不同浏览器进行不同的排版，就是在 Safari (-webkit-) 上用 dis ...

可以写好几份css，Javascript 通过 navigator.userAgent 包含“Chrome” 就是 chromium内核，trident -> ie，gecko -> firefox，剩下的事safari，js判断，然后指定对应的css

跳转到最佳答案楼层

isdkz · 发表于 2023-10-3 20:50:30

在使用 MathML 编写 HTML 时，应该使用 display: block math。

MathML 是一种用于描述数学公式的标记语言，它可以与 HTML 和 CSS 一起使用。在使用 CSS 控制 MathML 公式的样式时，应该使用 display 属性来指定公式的显示方式。

在 MathML 中，公式本身就是一个块级元素，因此应该使用 display: block math 来让公式在页面中以块级元素的形式显示。如果使用 display: block，则可能会导致在某些浏览器上出现问题。

需要注意的是，不同的浏览器对 MathML 的支持程度不同，因此在编写 MathML 代码时需要进行兼容性测试，以确保在各种浏览器上都能正常显示。

Mike_python小 · 发表于 2023-10-3 20:51:02

问题： 在使用 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 上都能正常显示。

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 的问题。

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

陶远航 · 发表于 2023-10-3 20:51:05

在处理 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:20

浏览器内核问题？

hellomyprogram · 发表于 2023-10-4 11:05:42

歌者文明清理员发表于 2023-10-3 22:16
浏览器内核问题？

就是啊
所以怎么解决呢
我想设置css根据不同浏览器进行不同的排版，就是在 Safari (-webkit-) 上用 display: block ，在 Edge (-ms-) 上用 display: block math ，但是 css 又不让我用 -ms-display 和 -webkit-display

歌者文明清理员 · 发表于 2023-10-4 14:32:44

hellomyprogram 发表于 2023-10-4 11:05
就是啊
所以怎么解决呢
我想设置css根据不同浏览器进行不同的排版，就是在 Safari (-webkit-) 上用 dis ...

可以写好几份css，Javascript 通过 navigator.userAgent 包含“Chrome” 就是 chromium内核，trident -> ie，gecko -> firefox，剩下的事safari，js判断，然后指定对应的css

账号		自动登录	找回密码
密码			立即注册