`href`中的内联JavaScript在Firefox中无法正常工作_Javascript_Html_Css_Firefox

`href`中的内联JavaScript在Firefox中无法正常工作

javascript html css firefox

`href`中的内联JavaScript在Firefox中无法正常工作,javascript,html,css,firefox,Javascript,Html,Css,Firefox,为什么这种内联javascript在Firefox中不起作用？我怎样才能让它在Firefox中正常工作 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> h2 {display:inline; padding:0px 7px 0px;} h2 a {text-decoration:none} h2

为什么这种内联javascript在Firefox中不起作用？我怎样才能让它在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>


h2{显示：内联；填充：0px 7px 0px；}
h2 a{文本装饰：无}
h2a:link{color:#ffffffff；}
h2#s0{背景色：黑色；}
单击标题时，此文本应显示为黑色
大纲，与标题背景之间没有间隙。

在Safari中，这似乎是应该的。在Firefox中，它会暂时出现一个空白（就好像浏览器在运行一样）怪癖模式）然后页面上的所有内容都消失了，取而代之的是单词“block”。起初我以为这意味着Firefox阻止了它，但如果我设置了显示的样式，它会改为“inline”

编辑：我的问题的Javascript部分现在已经解决。但标题背景的显示方式仍然存在差异：它在Safari中向下延伸到div边界，但在Firefox中没有。有没有办法在Firefox中做到这一点？

在OSX Firefox 41.0.1版上，我在fiddle中也遇到了同样的问题。我不知道为什么它不起作用，这可能是FireFox中的一个bug，但您可以这样做，以获得一个类似的工作解决方案：

<!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>

<a href="#" onclick="document.getElementById('d0').style.display='block';">

用以下内容替换您的链接：

<a href="javaScript: void(0);" onclick="javascript:document.getElementById('d0').style.display='block';">

据我所知，如果将javaScript调用放入

href

属性，Firefox会尝试打开URL。（您可以在位置栏中看到）相反，将其放入

onclick

可以使其正常工作

我想你也可以使用一些

preventDefault

之类的，你也可以尝试

a href=“#”

，但是

a href=“javaScript:void（0）；”

工作得很好，并且在我迄今为止测试过的所有浏览器中都很健壮。

最接近的工作形式是：

<a href="javascript:void(document.getElementById('d0').style.display='block');">

：
当浏览器跟随javascript:URI时，它会计算
然后用返回的
值，除非返回值未定义
。void操作符可以
用于返回未定义的

onclick
是这里更好的选择。
哈哈哈-这个问题的标题很经典！！这在Windows上的Firefox42中对我很有效。你用的是什么版本？还有，是否有任何扩展正在运行？哦，您必须先单击按钮。你在帖子中遗漏了这条说明。可能只是一个输入错误，但我相信onclick是区分大小写的。谢谢你，@AtheistP3ace，我改变了它，正式地说，它是小写的，虽然camelcase在我的系统上工作。是的，我认为一些浏览器比其他浏览器更宽容。=]@AtheistP3ace HTML标记名和属性名不区分大小写。XHTML是区分大小写的OneHanks Alex和@Burki。这解决了Javascript问题。添加一个«#»到href，强制某些浏览器滚动到当前页面的顶部（例如IE），因此这不是一个好的做法。