I am encountering an issue with this inline JavaScript not working in Firefox. I need to figure out how to make it function correctly in Firefox.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
h2 {display:inline; padding:0px 7px 0px;}
h2 a {text-decoration:none}
h2 a:link {color:#FFFFFF;}
h2#s0 {background-color:black;}
</style>
</head>
<body>
<h2 id="s0"><a href="javascript:document.getElementById('d0').style.display='block';">
Click me!</a></h2>
<div id="d0"
style="width:98%;border: 5px solid #000000;padding:3px; display:none;">
When you click the heading, this text should appear with a black
outline, with no gap between that and the heading background.</div>
</body>
</html>
In Safari, everything displays as expected. However, in Firefox, there is a momentary glitch where the page appears like it's in quirks mode before everything suddenly disappears and only the word "block" remains visible. Initially, I thought Firefox was blocking the script, but it seems to say "inline".
EDIT: I have managed to solve the JavaScript issue, but now I'm facing a discrepancy in the appearance of the heading background. In Safari, it extends down to the div border, unlike in Firefox. Is there a way to achieve consistent behavior across both browsers?