Question

这是一个非常奇怪的错误，我似乎无法弄明白。我试图从http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/

复制可扩展搜索除了一个恼人的bug之外，我几乎完成了它。它在FireFox中绝对没有任何作用。在Chrome，IE和Edge中，当我点击小搜索图标时，搜索会展开，我可以输入内容然后提交。

然而，当我将鼠标悬停在FireFox中的搜索图标上时，绝对没有任何反应。我的光标甚至没有变化，告诉我它可点击。

所有这些都有大量的代码，而且我没有真正的Javascript经验，这是我想象的导致问题。

值得注意的是，我正在将其与我的wordpress网站和wordpress搜索集成。正如我之前所说，除了FireFox之外，它在我测试的所有浏览器中都能很好地工作。

这是我在wordpress导航菜单中包含的HTML：

<li id="sb-search" class="sb-search">
     <form name="search-form" role="search" method="get" id="searchform" class="searchform" action="/">
          <input class="sb-search-input" placeholder="Enter your search term..." type="text" value="" name="s" id="s" />
          <button type="submit" form="searchform" formmethod="get" ><i class="fa fa-search"></i></button>
     </form>
</li>'

这是我在wordpress网站标题中包含的javascript：

<script>
    $( document ).ready(function() {
        new UISearch( document.getElementById( 'sb-search' ) );
    });
</script>

以下是与其相关的三个javascript文件：

classie.js - http://pastebin.com/Wk5nXfkV

modernizr.custom.js - http://pastebin.com/5A7NXWLV

uisearch.js - http://pastebin.com/bQc4XkEd

还有很多CSS伴随着它的造型，但我无法想象这就是问题所在。但是，如果有人想要CSS，那么请让我知道，我会更新帖子。

Answer 1

今天早上花了2个小时在互联网上寻找这个神秘问题的答案后，我能够弄清楚这一点。

我遇到了this article.

我向下滚动到底部，在更新（2013年4月7日）后他说要做的事情对我来说非常合适。我不得不改变我的一些风格，但除此之外它完美无缺。

以下是对我有用的摘录：

正如几位评论者提到的那样，我的建议导致了一个空元素。起初我并不是太在意这件事，但随着我的思考越来越多，我的纯粹主义者有点不高兴。是的，在理想的世界中，您应该能够删除所有JavaScript和CSS，并且页面仍然有意义。在这种情况下，您将留下一个没有任何描述性文本的按钮。这转变了我的胃，我回到绘图板试图找到一种方法，让文本在元素内部，而不是隐藏在屏幕外。经过一些修补，这就是我想出的：

<style>
.btn-label {
font-size: 0;
height: 1px;
overflow: hidden;
display: block;
}
</style>

<button class="icon-envelope"><span class="btn-label">Email</span></button>

我们的想法是在<button>元素上放置描述性文本，同时将Font Awesome类放在<button>本身上。这允许您与<span>分开修改内部<button>元素。使用0的字体大小，一个像素的高度（使VoiceOver高兴），<span>几乎不可见。其余用于确保<span>永远不会变大。

在本文中提到的所有浏览器和屏幕阅读器中，使用此模式宣布“电子邮件按钮”文本。解决方案使我的纯粹主义方面非常舒适。你不是通过在屏幕外移动文本来诱惑命运，但<button>元素仍然包含文本。在这种情况下，您不必使用ARIA为屏幕阅读器提供额外的上下文。

- Source

所以我的新代码是：

<li id="sb-search" class="sb-search">
     <form name="search-form" role="search" method="get" id="searchform" class="searchform" action="/">
          <input class="sb-search-input" placeholder="Enter your search term..." type="text" value="" name="s" id="s" />
          <button type="submit" aria-label="Submit" class="fa fa-search"><span class="btn-label">Submit</span></button>
     </form>
</li>

<button type =“submit”>无法在FireFox中使用

1 个答案: