Bouton de soumission disparaissant dans IE7

Question

Salutations. J'ai des problèmes avec le code hérité suivant. Tout va bien sauf IE7, où le bouton de soumission disparaît. Il y a encore de la place pour cela sur la page, mais cela ne s'affiche pas. J'ai essayé différentes méthodes pour forcer hasLayout, mais sans succès. Des suggestions?

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

J'ai finalement trié cela en supprimant le:

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

Je l'avais toujours inclus dans les remplacements d'images CSS après l'avoir lu quelque part il y a très longtemps, mais le laisser paraître ne semble pas avoir affecté aucun autre navigateur et a corrigé le problème dans IE7.

Answer 2

vous êtes-vous assuré que display:block a été ajouté au fichier CSS sur l'entrée? Cela devrait faire l'affaire.

Answer 3

Cela ressemble à un problème d'indentation de texte / d'image à remplacer dans IE6.0 et 7.0. Cette solution a fonctionné plusieurs fois pour moi.

Créez une feuille de style distincte pour ces versions de navigateur et mettez ce code dans votre en-tête:

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

Dans le fichier CSS, essayez quelque chose comme ceci (vous pouvez le changer en entrée # btn_search ou tout ce que vous ciblez spécifiquement)

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

" couleur " devrait être de la même couleur que votre arrière-plan.

" width " devrait être comme 20-30 pixels PLUS de la largeur de votre image.

Plus d'informations et d'aide peuvent être trouvées ici: http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution

Answer 4

Il y a deux choses que je peux voir dans le code qui pourraient causer ceci:

1 - l'image btn.search.gif est complètement transparente, la couleur de l'arrière-plan ou introuvable. Le bouton n’a pas de couleur d’arrière-plan ni de bordure, il n’apparaît donc pas si ce n'est pour l'image / texte

2 - la visibilité du bouton est définie sur aucune, ce qui laisse un espace sur la page mais ne rend pas le bouton. Pouvez-vous regarder les styles de Firebug?

Answer 5

si vous ajoutez un attribut de nom , cela fonctionne-t-il?

Answer 6

Le problème provient probablement du punaise Guillotine . C'est un bogue dans IE6 et IE7 qui se produit lorsque certains mélanges de: survol, flottant et présentation sont présents (voir le lien pour plus de détails). Je crois que l'insertion de ceci:

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

juste avant </form> puis appliquez le code CSS suivant:

.clear {clear:both;}

le réparerait.