IE7中的提交按钮消失答案

【问题标题】：Disappearing submit button in IE7IE7中的提交按钮消失
【发布时间】：2011-04-29 16:04:12
【问题描述】：

您好。我在使用以下遗留代码时遇到问题。除了提交按钮消失的 IE7 之外，一切都很好。页面上仍有空间留给它，但它没有显示。我尝试了各种强制 hasLayout 的方法，但没有成功。有什么建议吗？

XHTML（XHTML 1.0 Strict DOCTYPE）：

<div id="headerFunctionality" class="clearfix">
<div id="headerSearch" class="clearfix">
<form action="http://foo.com" method="GET">
<label for="q">Search</label>
<input id="q" name="q" type="text" class="text" />
<input type="submit" id="btn_search" value="Search">
</form>
</div>
</div>

CSS：

#headerFunctionality {
    float: right;
    display: inline;
    margin: 24px 14px 25px 0; 
}

#headerSearch{
    float: left;
    margin-left: 20px;
    width: auto;
}

#headerSearch label{
    position: absolute;
    top: -5em;
    color: #FFF;
}

#headerSearch input.text{
    width: 133px;
    height: 18px;
    border: 1px solid #999;
    font-size: 0.69em;
    padding: 2px 3px 0;
    margin: 0 6px 0 0;
    float: left;
}

/* Replace search button with image*/
input#btn_search {
    width: 65px;
    height: 20px;
    padding: 20px 0 0 0;
    margin: 1px 0 0 0;
    border: 0;
    background: transparent url(../images/btn.search.gif) no-repeat center top;
    overflow: hidden;
    cursor: pointer; /* hand-shaped cursor */
    cursor: hand; /* for IE 5.x */
}
form>input#btn_search { /* For non-IE browsers*/
    height: 0px;
}

input#btn_search:focus, input#btn_search:hover {

background: transparent url(../images/btn.search.over.gif) no-repeat center top;

}

【问题讨论】：

标签： css button internet-explorer-7 submit

【解决方案1】：

您确定display:block 已添加到输入的css 中吗？这应该可以解决问题。

【讨论】：

【解决方案2】：

这听起来像是 IE6.0 和 7.0 中的文本缩进/图像替换按钮问题。这个解决方案对我有用几次。

为这些浏览器版本制作单独的样式表并将此代码放在您的标题中：

<!--[if lt IE 8]>
        <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

在 CSS 文件中，尝试这样的操作（您可以将其更改为 input#btn_search 或任何您指定的目标）

#btn_search {
   width: 85px;
   height: 20px;
   padding: 20px 0 0 0;
   margin: 1px 0 0 0;
   border: 0;
   background: transparent url(../images/btn.search.gif) no-repeat center top;
   cursor: pointer; /* hand-shaped cursor */
   cursor: hand; /* for IE 5.x */
   font-size: 0;
   color: #fff;
   text-align: right;
   text-indent: 0;
}

“颜色”应与背景颜色相同。

“宽度”应该比图像的宽度大 20-30 像素。

更多信息和帮助可以在这里找到：http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution

【讨论】：

【解决方案3】：

我可以从代码中看到两件事可能导致这种情况：

1 - 图像 btn.search.gif 要么完全透明，要么是背景颜色，要么没有找到。按钮没有背景色和边框，所以如果不是图片/文字就不会出现

2 - 按钮可见性设置为无，这会在页面上留出空间但不呈现按钮。你能看一下firebug中的样式吗？

【讨论】：

哈，我的第一个想法也是，但不幸的是，这些都不是。我什至尝试将可见性明确设置为“可见”。该问题仅在 IE7 中。

【解决方案4】：

我终于通过删除：

form>input#btn_search { /* For non-IE browsers*/
    height: 0px;
}

在很久以前读过它之后，我总是将它包含在 CSS 图像替换中，但将其排除在外似乎并没有影响任何其他浏览器，并且已经解决了 IE7 中的问题。

【讨论】：

【解决方案5】：

如果你添加一个name属性，它会起作用吗？

【讨论】：

【解决方案6】：

问题可能来自Guillotine Bug。这是 IE6 和 IE7 中的一个错误，当存在 :hover、float 和 layout 的某些混合时会发生（有关详细信息，请参阅链接）。我相信插入这个：

<div class="clear"><!-- --></div>

就在 </form> 之前，然后对其应用以下 CSS：

.clear {clear:both;}

会解决的。

【讨论】：

感谢您的输入和链接，但也没有这样做。我终于修复了它并会发布答案。