Mozilla firefox中的浏览器兼容性问题[关闭]答案

【问题标题】：Browser compatibility issue in mozilla firefox [closed]Mozilla firefox中的浏览器兼容性问题[关闭]
【发布时间】：2015-06-16 12:48:28
【问题描述】：

我需要在我的应用程序中展开和折叠按钮。

支持 IE 和 chrome，但 mozilla firefox 显示的图像在两侧带有小空白。

设置不正确，我的代码如下。

<div class="searchdiv">
    <b class="searchlabel">Advanced Search</b>
    <input type="button" class="Expand_button" onclick="javascript: Expand();"/>
</div>

css 是，

.Expand_button {
    margin-right: 5px;
    cursor: pointer;
    padding-bottom: 10px;
    padding-top: 5px;    
    background: #fff url('../images/Expand.jpg') no-repeat center ;
    height:1px;
}

【问题讨论】：

标签： html css browser cross-browser

【解决方案1】：

首先，内联 Javascript 不好。这就是所谓的“侵入式 Javascript”。相反，编写您的 Javascript 以便它对某个操作做出反应，并将其保存在一个单独的 Javascript 文件中（为了简洁，jQuery 风格）：

$(document).ready(function(){
    $('input.Expand_button').click(function(){
      Expand();
    });
})

然后删除元素中的 onclick 调用，如下所示：

<input type="button" class="Expand_button" />

也就是说，您是否试图通过设置height: 1px 使输入不可见？如果是这样，那就是你的问题。它仍然存在，并且仍然可见。更重要的是，它上面还有内边距和边距，所以它当然会显示出来。

您想要的是display: none; 或visibility: hidden，具体取决于您要查找的具体行为。 display: none; 会将项目完全从 DOM 树中取出，其他元素将相应地移动。 visibility: hidden; 只会使元素不可见，而不更改 DOM 树。

如果你使用一个库，比如 jQuery，那么你最好使用display: none;，因为你可以使用 jQuery 的内置隐藏/显示函数，它们会相应地更改 display。如果你不这样做，那么无论如何你都是在编写自己的行为反应，所以你可以使用任何你想要的。

【讨论】：