CSS, die nur für Chrome?

Dies ist meine Website: http://portable-ebook-reader.net

Die Suchleiste oben ist aus zwei hintergrund-Bilder. Einer ist, wo Sie würden in die Suche eingeben Satz, der zweite ist der eigentliche button zu suchen.

Mein problem ist, dass in Chrome die suchen-Schaltfläche, Bild 2px zu HOCH. Aber es sieht perfekt in IE und FF. Und wenn ich änderungen an der CSS (margin-top: 2px), dann Chrome sieht gut aus, aber IE und FF sind Durcheinander.

Irgendwelche Ideen? Ich habe lange gesucht für Stunden ohne Glück.

Dank!

InformationsquelleAutor Kane | 2010-02-04

  1. 2

    Bekommen es direkt für die erste FF. Dann bekommen es sah gut für beide FF und Chrome. Erst wenn Sie es direkt in FF und Chrome, sollten Sie anfangen über sich selbst mit, wie es aussieht im IE. Nachdem Sie dies erreichen, dann beginnen die Anpassung für den IE, falls erforderlich, mit * bevor Sie Ihre Stil-Regeln sind, Beispiel: *margin-top:2px; passt den oberen Rand für IE7 und IE6 ausschließlich.

    Nach einem Blick auf deinen code, es ist schwer zu sagen, was genau das problem verursacht, ohne in der Lage zu testen verschiedener Lösungen, die auf meinem system. Aber hier sind einige Dinge, die Sie versuchen können, zu ändern in Ihrem Stile.css-Datei (befindet sich in der 'Chronik' - Ordner in Ihrem "themes" - Ordner), kann das Problem behoben:

    • anwenden der gleichen Höhe, um sowohl Ihre #s und #searchsubmit Regel-sets
    • entfernen font: 14px "century gothic", Arial, Helvetica, sans-serif; aus #searchsubmit
    • nachdem Sie die oben, wenn es immer noch nicht richtig Aussehen, sowohl in FF und Chrome, legen Sie die ersten und zweiten padding-Werte für Ihre #s Regel-set zu 0 (d.h. ändern 8px zu 0px) und fügen Sie dann eine margin-top: Erklärung sowohl #s und #searchsubmit und geben beide den gleichen Wert, zum Beispiel margin-top:8px;
    • wenn Sie immer noch Probleme haben, versuchen kopieren Sie diese Zeile: font: normal 100% "Tahoma", Arial, Helvetica, sans-serif; von Ihrem #s Regel-set und fügen Sie es zu Ihrem #searchsubmit Regel so eingestellt, dass es angezeigt wird in beiden Regel-sets.

    Es gibt so viele verschiedene Möglichkeiten, die verursachen könnten das problem, das ist, warum möchten Sie vielleicht versuchen Sie einen der oben genannten hacks, wenn Sie nicht herausfinden können, die Ursache des Problems.

    +1 für den * - Stil-trick. Ich wusste nie, dass.
    Sweet - Ihren ersten Punkt Vorschlag funktionierte! Obwohl ich nicht legen Sie beide die gleiche Höhe, ich set #s 15px (vorher hat es keine Höhe festgelegt). Sieht toll aus in allen 3 Browsern jetzt. 🙂
    Nein. Man sollte es " funktioniert im IE ersten. Es ist weit mehr Aufwand an Arbeit in die andere Richtung. Man sollte es funktionieren im IE und dann in anderen Browsern.

    InformationsquelleAutor brookmarker

  2. 34

    CSS zu benutzen, dass nur für Webkit-Browsern (Chrome und Safari):

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

    Ein hässlicher hack, aber es kann für diejenigen frustrierend, die rendering-Probleme.

    InformationsquelleAutor reflexiv

  3. 3

    Könnten Sie überprüfen, um zu sehen, ob navigator.appVersion enthält das Wort "Chrome" und die relative Positionierung der Taste unten ein paar Pixel über javascript.

    if (navigator.appVersion.indexOf("Chrome/") != -1) {
 //modify button 
}
    Wahrscheinlich das beste, vor allem, weil es nicht trivial, zum deaktivieren von JavaScript in Chrome.

    InformationsquelleAutor Sampson

  4. 1

    Versuchen Sie, Ihre doctype auf strict - was auch immer funktioniert, sollte man meist die gleiche Arbeit in allen drei gängigen Browsern. Meistens.

    Nein, das hat leider nicht geholfen.

    InformationsquelleAutor James

  5. 1

    Nur als Referenz, eine Liste mit allen möglichen browser-spezifischen CSS-hacks. Obwohl ich raten von der Verwendung von diesen hacks, es kann für eine schnelle Lösung für Ihr problem.

    InformationsquelleAutor davydepauw

  6. 1

    Fand ich diesen trick vor ein paar Wochen und es scheint zu funktionieren identisch in allen Browsern.

    Erstellen Sie eine einzelne Grafik enthält sowohl Ihre search bar und search-Taste. Machen Sie den hintergrund des Formulars durch CSS-styling. Dann passen Sie Ihre text-input und submit-button (wahrscheinlich durch Klassen oder IDs), um {border:0; background:transparent} und dann stellen Sie einfach die Höhe und Breite der Formular-Elemente passen Sie das layout Ihres Formulars hintergrund. Ich früher <input type="image" ... /> konnte aber nie die Ausrichtung Recht egal, wie ich gestylt oder gepolstert. Diese Methode funktioniert so ziemlich nach der ersten Anpassung der form-Elemente' margin, padding und absolute Positionierung, wenn nötig durch (möchten Sie vielleicht lassen Sie die Grenzen sichtbar, während der Prüfung nur so können Sie legen Sie es richtig an).

    Ich finde es auch praktisch, zu setzen a {cursor:pointer;} über meine Suche submit-button, und manchmal auch andere Formular-inputs zu geben, einen visuellen Hinweis, dass dies ein submittable form und die Leute dazu animiert zu klicken.

    InformationsquelleAutor Scottie Mac

  7. -1

    Haben Sie einen Blick auf http://rafael.adm.br/css_browser_selector/

    wenig js-Datei, fügt Klassen Ihre body-tag wie .webkit, .Chrom usw., die können Sie so verwenden Sie in Ihrem stylesheet.

    InformationsquelleAutor Thomas Maas

Schreibe einen Kommentar