CSS qui s'applique uniquement à Chrome?

C'est mon site: http://portable-ebook-reader.net

La barre de recherche en haut est composé de deux images d'arrière-plan. L'un est pour où vous tapez l'expression de recherche, le second est le véritable bouton de recherche.

Mon problème est que dans google Chrome, la recherche de l'image du bouton est 2px trop ÉLEVÉ. Mais il a l'air parfait dans IE et FF. Et si je modifie le CSS (margin-top: 2px) puis Chrome semble bon, mais IE et FF sont foiré.

Des idées? J'ai cherché pendant des heures, sans aucune chance.

Merci!

source d'informationauteur Kane

  1. 2

    L'obtenir en regardant droit pour les FF en premier. Puis l'obtenir à la recherche pour le bien du FF et Chrome. Seulement après que vous avez à la recherche à droite dans FF et Chrome, devriez-vous commencer à vous concernant avec la façon dont il regarde dans IE. Après vous atteindre cet objectif, puis commencer à ajuster pour IE, si nécessaire, à l'aide de * avant vos règles de style, par exemple: *margin-top:2px; règle la marge du haut pour IE7 et IE6 exclusivement.

    Après avoir regardé votre code, il est difficile de dire exactement ce qui peut être à l'origine du problème, sans être en mesure de tester différentes solutions sur mon système. Mais voici quelques choses que vous pouvez essayer de modifier dans votre styles.fichier css (situé dans votre 'chronicle' dossier au sein de votre "thème" dossier) qui peut corriger le problème:

    • appliquer la même hauteur de la valeur à la fois votre #s et #searchsubmit règle-ensembles
    • supprimer font: 14px "century gothic", Arial, Helvetica, sans-serif; de #searchsubmit
    • après ce qui précède, si cela ne fonctionne toujours pas regarder droit dans les deux FF et Chrome, jeu de la première et deuxième valeurs de remplissage pour votre #s ensemble de règles à 0 (c'est à dire changer 8px à 0px), puis ajouter un margin-top: déclaration à la fois #s et #searchsubmit et de donner à la fois la même valeur, par exemple margin-top:8px;
    • si vous rencontrez toujours des problèmes, essayez de copier cette ligne: font: normal 100% "Tahoma", Arial, Helvetica, sans-serif; de votre #s ensemble de règles et l'ajouter à votre #searchsubmit ensemble de règles, de sorte qu'il apparaît à la fois la règle.

    Il y a tellement de possibilités différentes qui pourraient être à l'origine du problème, qui est pourquoi vous pouvez essayer l'un de ces hacks si vous ne pouvez pas comprendre la source du problème.

  2. 34

    À utiliser les CSS qui s'appliquent uniquement pour les navigateurs Webkit (Chrome et Safari):

    @media screen and (-webkit-min-device-pixel-ratio:0) { 
    #searchsubmit { height: 20px; }
    #s { margin-top: 5px; } 
}

    Un vilain hack, mais il peut fonctionner pour ceux frustrant problèmes de rendu.

  3. 3

    Vous pouvez vérifier pour voir si navigator.appVersion contient le mot "google Chrome" et définir le positionnement relatif du bouton vers le bas d'un couple de pixels via javascript.

    if (navigator.appVersion.indexOf("Chrome/") != -1) {
 //modify button 
}
  4. 1

    Essayez de changer votre doctype strict - ce qui fonctionne dans l'un devrait travaillent la plupart du temps la même dans les trois principaux navigateurs. La plupart du temps.

  5. 1

    Tout comme une référence, une liste de tous les possibles navigateur spécifique des hacks CSS. Bien que je déconseille l'utilisation de ces hacks, il peut convenir d'une solution rapide à votre problème.

  6. 1

    J'ai trouvé cette astuce il y a quelques semaines et il semble fonctionner de manière identique dans tous les navigateurs.

    Créer un graphique simple qui contient à la fois votre barre de recherche et le bouton de recherche. Faire le fond de votre forme par CSS style. Puis ajuster à la fois votre saisie de texte et le bouton de validation (probablement grâce à des classes ou Id) d'avoir {border:0; background:transparent} et ensuite il suffit de régler la hauteur et la largeur de la forme des éléments à adapter la mise en page de votre formulaire de fond. J'avais déjà utilisé <input type="image" ... /> mais ne pourrait jamais obtenir l'alignement tout à fait raison, peu importe comment je de style ou de collier. Cette méthode fonctionne assez bien après votre premier ajustement de la forme des éléments " margin, padding et le positionnement absolu si besoin par (vous pouvez laisser les frontières visibles pendant l'essai, de sorte que vous pouvez le placer correctement).

    Je trouve aussi que c'portée de main pour mettre {curseur:pointeur;} plus de ma recherche bouton soumettre et parfois même d'autres entrées de formulaire pour donner une indication visuelle que c'est un submittable forme et les gens sont invités à cliquer.

  7. -1

    Ont un coup d'oeil à http://rafael.adm.br/css_browser_selector/

    petit fichier js qui ajoute des classes de votre corps tag .de webkit .chrome, etc qui vous pouvez ainsi les utiliser dans votre feuille de style.