题

问候。我有麻烦了以下遗留的代码。这是现在的一切，除了IE7，其中提交按钮就会消失。空间仍然是留给它的网页，但它并不显示。我已经尝试了各种方式的强迫hasLayout，但没有成功。任何建议？

XHTML(XHTML1.0严格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;

}

有帮助吗？

解决方案 4

我最后，除去排序这样：

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

我一直包括在此与CSS图片更换阅读它的地方，很久以前的事之后，却留下它似乎并没有影响到任何其他的浏览器，并已在IE7中修复了这个问题。

其他提示

让你确信display:block已被添加到输入的CSS？即现在应该做的伎俩。

这听起来像一个文本的缩/图像，以替换键问题在IE6。0和7.0.这种解决方案具有为我工作了几次。

作一个单独的样式表供这些版本的浏览器，并把这个代码头：

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

在CSS文件，试图这样的事情(你可以改变这个输入#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;
}

"颜色"应该是相同的颜色以你的背景。

"width"应该像有20-30素更多的宽度比你的形象。

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

有两件事我可以从代码中看到，可能导致这样的：

1 - 图像btn.search.gif要么是完全透明的，背景的颜色或没有找到。按钮没有背景颜色和无边框，因此，如果不将不会出现在图像/文本

2 - 按钮能见度设置为无，这使在网页空间，但不显示该按钮。你可以看一下样式的萤火虫？

如果您添加的 name属性后，它的工作原理？

在问题可能来自闸刀错误。这是一个在IE6和IE7时的某些混合物发生了一个错误：悬停，float和布局是本（参见链接的详细信息）。我相信，此插入：

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

右</form>之前，然后应用以下CSS它：

.clear {clear:both;}

将修复它。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top