Navigateurs webkit déplaçant le bouton

J'ai donc un div de 36px avec un formulaire (#refine_search) dedans. Le formulaire ne contient qu'un bouton de 35 pixels (#refine_search_button). Tout va bien jusqu'à ce que j'ajoute un span après le formulaire avec une taille de police de plus de 17px. À ce stade, le bouton sera affiché à 2 ou 3 pixels du haut de la div.Navigateurs webkit déplaçant le bouton

enter image description here

Vous pouvez le voir en action ici: http://nolasatellitegovernment.tulane.edu/search.php

CSS:

#bluenav { 
    width:1124px; 
    height:36px; 
    position:relative; 
    background:url(/g/internal_page_blue_nav_bg.jpg) repeat-x #afdeff; 
} 

    #refine_search { 
     display:inline; 
     padding:0 0 0 110px; 
     margin:0; 
    } 

    #refine_search_button { 
     width:92px; 
     height:35px; 
     background:url(/g/refine_search_button.jpg) no-repeat; 
     border:0; 
     padding:0; 
     margin:0; 
    } 

    #refine_search_button:hover { 
     background:url(/g/refine_search_button_over.jpg) no-repeat; 
    } 

    .big_heading { 
     font-size:22px; 
     font-weight:bold; 
    }

Et le code ressemble

<div id="bluenav"><form action="refine_search.php" id="refine_search"><input type="submit" id="refine_search_button" name="submit" value="" /></form><span style="padding:0 10px 0 20px; font-size:22px"> 
</div>

Est-ce que quelqu'un sait pourquoi 18px texte déplacerait le précédent g dans un conteneur de 35px?

Source

2011-09-09 jerrygarciuh

#refine_search { 
    display:block; 
    float: left; 
    padding:0 0 0 110px; 
    margin:0; 
}

Source

2011-09-09 00:32:12 atma

Fonctionne bien! Merci! – jerrygarciuh

Ajoutez simplement un line-height:36px à votre ID #refine_search_button et cela devrait résoudre le problème.

Source

2011-09-09 00:29:05

fonctionne très bien! Merci! – jerrygarciuh

Ajouter vertical-align: top à #refine_search_button.

La valeur par défaut est vertical-alignbaseline, et en ajoutant le span avec différents font-size ajuste le niveau de référence est. Si vous souhaitez également centrer verticalement le texte "Index Results", ajoutez line-height: 36px au span.

Source

2011-09-09 00:29:13 thirtydot

Fonctionne bien! Merci! – jerrygarciuh

Parce que vous utilisez display: inline ils dépendent les uns des autres, comme des images et du texte sur la même ligne. Essayez plutôt d'utiliser display: block; float: à gauche; sur les deux éléments, ils flotteront toujours vers le haut :)

Il pourrait même fonctionner avec l'affichage: inline-block;

OMI son mieux ne generel mieux que d'utiliser le codage-hauteur de la ligne etc pour résoudre un problème dynamique (ie. Vous changez la taille de la police, etc.)

Source

2011-09-09 00:29:40

Navigateurs webkit déplaçant le bouton

Répondre

Questions connexes