Question

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

支持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;
}

Answer 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。如果你不这样做，那么你正在编写自己的行为反应，所以你可以使用你想要的任何一个。

Mozilla Firefox中的浏览器兼容性问题

1 个答案: