How to fix the protruding lines in a MathJax table?

Question

$$ \begin{array}{|c|c|c|} \hline &A&B\\ \hline X&1&2\\ \hline Y&3&4\\ \hline \end{array} $$

Code:

$$
\begin{array}{|c|c|c|} \hline
&A&B\\ \hline
X&1&2\\ \hline
Y&3&4\\ \hline
\end{array}
$$

I've looked everywhere but can't seem to find a fix for this. All the tables I write or see written from others have these protruding lines on the right and on the bottom. In the above table, if you'll notice carefully, just on the right of the fourth vertical line you'll see two small protruding horizontal lines. Similarly, just on the bottom of the fourth horizontal line you'll see two small protruding vertical lines.

I do not believe this is the expected behavior of how tables should be displayed. Will this be fixed? Also, until this is fixed, how do I write neat tables without these protrusions?

---

Also, I have noticed that this code:

$$
\begin{array}{c|c|c|} \hline
&A&B\\ \hline
X&1&2\\ \hline
Y&3&4\\ \hline
\end{array}
$$

produces zero protruding lines:

$$ \begin{array}{c|c|c|} &A&B\\ \hline X&1&2\\ \hline Y&3&4\\ \hline \end{array} $$

but is missing the top and left vertical lines, which is unacceptable. (Based on this I also guess that the extra protrusion in the original table is due to the presence of the very lines which I removed here)

---

EDIT: Thanks to Nat for noticing this, if you \Huge the second table, and under Math Settings, you Scale All Math to 50%, then you'll also observe the same protrusions in it. Interestingly, the protrusions in the first table will become even longer.

Answer 1

The issue is that the CSS for this StackExchange site includes

body * {
  box-sizing: inherit;
}

which causes the <span> used by MathJax to produce the frame around the initial table to use box-sizing: border-box rather than box-sizing: content-box. That changes whether the borders are inside or outside its width and height, and because MathJax computes the size based on the border being outside the box, but the CSS sets them to be inside the box, the frame ends up being a little too small.

CSS rules bleeding through to the MathJax output is a common source of layout problems, but it is impossible for MathJax to protect itself against this perfectly. I will start an issue tracker on the MathJax site so that this CSS can be added to the list of resets that MathJax performs.

Adding

.MathJax span {
  box-sizing: content-box;
}

should resolve the issue. @IlmariKaronen, perhaps that can be added to the SOUP script.