MathJax works on Firefox Browser but on the rest of the Browsers it doesn't work
I use MathJax on a Website I have done. On Firefox, it all works fine, and I don't have a Problem with the MathJax input, but if I open the Site on Opera by example it doesn't work well. This is the Code that doesn't work on other Browsers:
<math id="mitHoch">
<mstyle displaystyle="true">
<mtext>- ln * </mtext>
<mtext style="font-size: 300%; font-weight: 100;">(</mtext>
<mfrac>
<msup>
<semantics>
<annotation-xml encoding="application/xhtml+xml">
<input
xmlns="http://www.w3.org/1999/xhtml"
type="text"
size="2"
name="VCT"
/>
</annotation-xml>
</semantics>
<semantics>
<annotation-xml encoding="application/xhtml+xml">
<input
xmlns="http://www.w3.org/1999/xhtml"
style="text-align: right"
type="text"
size="1"
name="VCTH"
/>
</annotation-xml>
</semantics>
</msup>
<msup>
<semantics>
<annotation-xml encoding="application/xhtml+xml">
<input
xmlns="http://www.w3.org/1999/xhtml"
type="text"
size="2"
name="VCL"
/>
</annotation-xml>
</semantics>
<semantics>
<annotation-xml encoding="application/xhtml+xml">
<input
xmlns="http://www.w3.org/1999/xhtml"
style="text-align: right"
type="text"
size="1"
name="VCLH"
/>
</annotation-xml>
</semantics>
</msup>
</mfrac>
<mtext style="font-size: 300%; font-weight: 100;">)</mtext>
<mo> * </mo>
<mfrac>
<mtext>5 730 a</mtext>
<mtext>ln(2)</mtext>
</mfrac>
<mtext> = </mtext>
</mstyle>
</math>I think it's because of the different Versions of Mathjax. But how do I know which Version Firefox uses, and how do I change it that all use the same Version?
PS: On Firefox, it looks like this: 
And on Opera and other Browsers it looks like this: 
I need it for a School Project and I would be really happy if anyone could help me. Thanks in advance!
The output you show in your screen captures is not from MathJax; these are the native MathML renderings in those browsers, so you may not have Mathjax running properly in your website.
Technically, the MathML you give is invalid because the first child of <semantics> is supposed to be a presentation MathML node, not an annotation node. Early versions of Firefox did not enforce this requirement, and so it provided a hack to allow mixing HTML content with MathML, and because people had started to use it, they never changed that. MathJax provided support for that as well, for the same reason, but the newer MathML implementations in Chrome, Edge, and Opera don't.
The MathJax rendering for your expression is the following:
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js" defer></script>
<math id="mitHoch">
<mstyle displaystyle="true">
<mtext>- ln * </mtext>
<mtext style="font-size: 300%; font-weight: 100;">(</mtext>
<mfrac>
<msup>
<semantics>
<annotation-xml encoding="application/xhtml+xml">
<input
xmlns="http://www.w3.org/1999/xhtml"
type="text"
size="2"
name="VCT"
/>
</annotation-xml>
</semantics>
<semantics>
<annotation-xml encoding="application/xhtml+xml">
<input
xmlns="http://www.w3.org/1999/xhtml"
style="text-align: right"
type="text"
size="1"
name="VCTH"
/>
</annotation-xml>
</semantics>
</msup>
<msup>
<semantics>
<annotation-xml encoding="application/xhtml+xml">
<input
xmlns="http://www.w3.org/1999/xhtml"
type="text"
size="2"
name="VCL"
/>
</annotation-xml>
</semantics>
<semantics>
<annotation-xml encoding="application/xhtml+xml">
<input
xmlns="http://www.w3.org/1999/xhtml"
style="text-align: right"
type="text"
size="1"
name="VCLH"
/>
</annotation-xml>
</semantics>
</msup>
</mfrac>
<mtext style="font-size: 300%; font-weight: 100;">)</mtext>
<mo> * </mo>
<mfrac>
<mtext>5 730 a</mtext>
<mtext>ln(2)</mtext>
</mfrac>
<mtext> = </mtext>
</mstyle>
</math>which should show the input boxes in all browsers.
You may notice that the parentheses, for example, are not well placed, and are excessively heavy. This is because the MathML you are using is not really very good, as you are using <mtext> elements inappropriately, and are not taking advantage of the features that MathML offers. A better version of your expression is the following:
<script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js"></script>
<math id="mitHoch" displaystyle="true">
<mo>-</mo>
<mi>ln</mi>
<mrow>
<mo>(</mo>
<mfrac>
<msup>
<semantics>
<annotation-xml encoding="application/xhtml+xml">
<input xmlns="http://www.w3.org/1999/xhtml"
type="text"
size="2"
name="VCT"
/>
</annotation-xml>
</semantics>
<semantics>
<annotation-xml encoding="application/xhtml+xml">
<input xmlns="http://www.w3.org/1999/xhtml"
style="text-align: right"
type="text"
size="1"
name="VCTH"
/>
</annotation-xml>
</semantics>
</msup>
<msup>
<semantics>
<annotation-xml encoding="application/xhtml+xml">
<input xmlns="http://www.w3.org/1999/xhtml"
type="text"
size="2"
name="VCL"
/>
</annotation-xml>
</semantics>
<semantics>
<annotation-xml encoding="application/xhtml+xml">
<input xmlns="http://www.w3.org/1999/xhtml"
style="text-align: right"
type="text"
size="1"
name="VCLH"
/>
</annotation-xml>
</semantics>
</msup>
</mfrac>
<mo>)</mo>
</mrow>
<mo symmetric="true" rspace=".15em">*</mo>
<mfrac>
<mrow>
<mn>5 730</mn>
<mi>a</mi>
</mrow>
<mrow>
<mi>ln</mi>
<mo>(</mo>
<mn>2</mn>
<mo>)</mo>
</mrow>
</mfrac>
<mo>=</mo>
<mi></mi>
</math>This still uses the <semantic> hack to get the input elements into the expression, but in version 4 (now in alpha release), there is support for HTML in MathML directly (as in the HTML5 specification); see the release notes for v4.0-alpha for details.
- PDF file creation using html-pdf is not working in my deployment server?
- Not iterating over map in node js
- Select text in textarea, delete it by backspace/delete to add CSS for another element
- Jquery : Uncaught SyntaxError: Failed to execute 'appendChild' on 'Node': missing ) after argument list
- center megamenu div under nav button
- Firebase Authentication: Where is the token stored in web?
- plugin:vite:import-analysis - Failed to parse source for import analysis because the content contains invalid JS syntax. - Vue 3
- SCRAM-SERVER-FIRST-MESSAGE: client password must be a string
- Where Am I Going Wrong Here - JAVASCRIPT
- Why does the function expression in an IIFE have to be wrapped in parentheses?
- In an object-destructuring declaration, what do the identifiers on the target side refer to?
- Can I destructure an object property into a property of another object?
- How does the object destructuring syntax work in ES6?
- How does nested destructuring work in ES6?
- Why does choosing module imports not work like destructuring?
- What is “fail-soft destructuring”?
- navigator.clipboard.readText() is not working in Firefox
- Why does console.log on a WeakSet give <items unknown> in node.js?
- Why do I need a WeakMap to store private data, as opposed to just closing over a variable with limited scope?
- Get url params in API route handler in Next.js
- How to move all Custom Element related into separate file to be imported & reused
- How to fetch data server-side in the latest Next.js? Tried getStaticProps but it's not running and getting undefined
- How to render my components in a tree structure, like default file structure in IDE using React
- Contentful API returning 'version mismatch' on entry update
- jqGrid dynamically change search operator type on button click
- JS making loop animation for a progress-bar
- Given an array of numbers(arr) and the length of the array(n) as arguments, how do you create a tribonacci sequence?
- "Could not read source map for chrome-error..." when using Visual Studio Code to debug JavaScript in Edge
- LeetCode Question - 2634. Filter Elements from Array
- How to get {[space][caret][space]} and {{[space][caret][space]}}