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.
- Failed to resolve: lib
- TypeError: Cannot destructure property 'company' of 'jobs[value]' as it is undefined
- React hooks: call component as function vs render as element
- View a Javascript method's contents in Chrome console
- Can the Monaco Editor use different line numbering based on the model?
- Creating Internal Loops Dynamically
- Time difference function giving negative value
- Get interaction's reponse message object discord.js
- How to specify browser language in Puppeteer
- JS array is adding the first selected items value plus the new one with it
- how to rate limit next.js server actions?
- Override functions of the page in a Firefox extension content script
- how to replace `bind(this)` in es6
- Change border colors of TinyMCE on focus and blur
- How do I get Tailwind's active breakpoint in JavaScript?
- How to implement click event or data point selection on apexCharts?
- How to send proactive message in a cron with botframework using javascript?
- why was `ResizeObserver` introduced to listen to resize changes and not a simpler Element.prototype.addEventListener('resize', callback)
- Js remove all classes from element
- localhost:300/api is not working : "This page isn’t working"
- Show a default image if src image is not found
- Sorting a HTML table
- Where are anonymous callback functions to setTimeout stored?
- Add numbers in a object within a JavasScript array from an index below a value and return value
- Axios CDN link refused to load
- Encode HTML entities in JavaScript
- How can I remove a specific item from an array in JavaScript?
- Fluid dynamic simulation, with obstacles
- Comparing two similar objects (holding same keys) and returning key value pairs that are different
- Defer execution for ES6 Template Literals