JSFiddle - React, Tailwind, and code Playground
HTML
you see that <sup>"this text is smaller in IE" <span>"and this even more if inherit is not used"</span></sup><br><br>
also note that <span class="simulated_sup">"this time" <span>"it is not affected"</span></span><br><br>
but <span class="simulated_sup ie">"this time" <span>"it behaves very similarly as if <sup> with inherit is used"</span></span>
CSS
body {font-size:160%}
sup,span {font-size:100%; font-size:inherit;}
.simulated_sup {vertical-align:super;}
.simulated_sup.ie {font-size:80%;}
/*
In the case of IE8 and IE9, if font-size:inherit is removed,
the bug is propageted to <sub>'s children
*/