Disappearing Submit-Button in IE7

Question

Grüße. Ich habe Probleme mit dem folgenden Legacy-Code. Es ist in Ordnung in alles außer IE7, wo der Submit-Button verschwindet. Der Raum ist nach wie vor auf der Seite für sie verlassen, aber es zeigt nicht. Ich habe verschiedene Möglichkeiten ausprobiert hasLayout zwingen, aber ohne Erfolg. Irgendwelche Vorschläge?

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;

}

Answer 1

I sortiert schließlich dies durch die Entfernung:

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

Ich hatte immer dieses mit CSS Bild Ersatz enthalten, nachdem es vor irgendwo Alter lesen, aber verlassen scheinen, um es aus keinem anderen Browser betroffen zu sein und habe das Problem in IE7 behoben.

Answer 2

Sie haben dafür gesorgt, dass display:block hat die CSS am Eingang hinzugefügt? Das oughta den Trick.

Answer 3

Das klingt wie eine text-indent / Bild-zu-ersetzen-Schaltfläche Ausgabe in IE6.0 und 7.0. Diese Lösung hat sich für mich ein paar Mal gearbeitet.

Erstellen Sie eine separate Sheet für diese Browser-Versionen und setzt diesen Code in der Kopfzeile:

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

In der CSS-Datei, versuchen Sie so etwas wie dieses (Sie können dies zur Eingabe # btn_search ändern oder was auch immer Sie Targeting spezifisch)

#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;
}

„Farbe“ soll die gleiche Farbe wie Ihr Hintergrund sein.

„Breite“, wie 20 bis 30 Pixel größer als die Breite des Bildes sein sollte.

Weitere Informationen und Hilfe finden Sie hier: http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution

Answer 4

Es gibt zwei Dinge, die ich aus dem Code zu sehen, dass dies dazu führen könnte:

1 - das Bild btn.search.gif entweder vollständig transparent, die Farbe des Hintergrunds oder nicht gefunden. Die Taste hat keine Hintergrundfarbe und keine Grenze, so wäre nicht angezeigt, wenn nicht für das Bild / Text

2 - die Schaltfläche Sichtbarkeit zu keinem gesetzt, dem Platz auf der Seite läßt aber macht nicht die Taste. Können Sie die Stile in Firebug aussehen?

Answer 5

Wenn Sie fügen Sie ein Attribut name , funktioniert es?

Answer 6

Das Problem kommt wahrscheinlich aus dem Guillotine Bug . Es ist ein Fehler in IE6 und IE7, die auftritt, wenn bestimmte Mischungen aus: Schweben, Schwimmer und Layout vorhanden sind (siehe Link für weitere Details). Ich glaube, dass dies das Einfügen:

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

Recht vor </form> und dann Anwenden der folgenden CSS, um es:

.clear {clear:both;}

würde es beheben.