Firefox 2
html>/**/body .selector, x:-moz-any-link {
color: lime;
}Firefox 3
html>/**/body .selector, x:-moz-any-link, x:default {
color: lime;
}Jeder Firefox
@-moz-document url-prefix() {
.selector {
color: lime;
}
}CSS-Hacks für Firefox
Chris Coyier am
Vielleicht kann ich es testen oder erraten, aber was macht es?
Es zielt nur auf Firefox-Browser ab, sodass Sie CSS-Ausnahmen machen können. Sie würden es für Hacks verwenden, um Ihre Website funktionaler zu gestalten. (Falls erforderlich).
Die meisten Hacks sind für I.E., da sie sich sehr anders rendern können als andere Browser.
Wahrscheinlich der beste kleine Hack, auf den ich seit Ewigkeiten gestoßen bin! Ein kleines goldenes Nugget. Danke.
Hey,
Danke für den Tipp, aber es funktioniert in Firefox 3.6.x nicht mehr..
@-moz-document url-prefix() {
.selector {
color:lime;
}
}
Das hat auch für Firefox 31 funktioniert!!!!!
aber dieser hier funktioniert!
.selector, x:-moz-any-link, x:default { color:lime; } /* FireFox 3 */@Tom Danke! Das hat für mich funktioniert :)
Danke Tom
es hat mir sehr geholfen
@tom: vielen Dank! funktioniert bei mir!
Danke für die bereitgestellten Informationen.
Bitte informieren Sie mich über Firefox 4.0 und IE9 CSS-Hacks….
Es ist ein sehr schöner Hack für Mozilla.
es hat mein Mozilla-Firefox-Problem gelöst.
Danke
Vindesh Mohariya
IE 9 Hack …
.selector { color: #fff\9; }
Firefox 4 Hacks für jemanden?
"\9" funktioniert sowohl für IE8 als auch für IE9.
\9 funktioniert für alle IEs
Es funktioniert auch auf meiner Website, danke fürs Teilen
.selector { color: #fff\9; }
Funktioniert nicht mehr für IE11
Gibt es Hacks?
Ähm.. was macht es? hehe sorry, ich bin ein Neuling darin. :))
Elemente werden in IE nicht immer gleich angezeigt wie in Firefox.
Daher zielt \9 auf nur IE ab.
Beispiel
.whatever { margin: 20px 0 0 0;
margin: 25px 0 0 0 \9;
}
In allen Browsern außer IE ist margin-top 20px, aber in IE ist margin-top 25px.
Ich hoffe, das hat Ihnen geholfen!! :)
@Riyaadh .. “\9” bedeutet weniger als IE 9
Ist es möglich, bestimmte Klassen zu verwenden, wenn FF die Seite lädt?
Das können Sie mit PHP auf der Serverseite tun – oder mit JavaScript
Wenn Sie jQuery haben, funktioniert der auskommentierte Code und liest sich leichter.
@-moz-document url-prefix() scheint in Firefox 7 nicht zu funktionieren. Andere Ideen?
schreiben Sie, dass Ihre -moz-webkit-appearance in Ihrem tatsächlichen CSS steht.
Mmhhh, wenn ich den Any-FF-Hack mit einem a:hover oder so verwende. Es funktioniert nicht …
@-moz-document url-prefix() {
a:focus {padding-bottom: 7px;}
}
Hat jemand Hilfe dafür?
Ich habe es gelöst. Es war ein Strukturproblem …
Danke für den heißen Tipp :-)
Wie hast du es gelöst? Ich stecke fest.
@ahmet,
Leute antworten nicht mehr, sobald ihr Problem behoben ist, mee ist nur eine von diesen Arten. Ich suche tatsächlich auch nach der Lösung.
Beste Grüße
Wie hast du das gemacht?
Großartig! Danke.
Weißt du, wie man nur FF9 anspricht? Ich habe tatsächlich ein Problem mit der CSS-Darstellung unter Mac und PC, die die gleiche FF-Version verwenden. Früher hatte ich diese Probleme nicht. Danke
Schöne Liste. Danke
Großartig und rechtzeitig. Danke für die Hilfe bei den Hacks!
Hallo Chris,
Ich hatte nie wirklich die Gelegenheit, Ihnen zu danken. Ihre Website ist die erste, die ich besuche, wenn ich etwas über CSS lernen oder herausfinden muss. Ihre Website ist für uns Webentwickler von unschätzbarem Wert. Ich habe wirklich viel von Ihrer Website gelernt, machen Sie weiter so.
Danke
Das scheint nicht gültig zu sein
@-moz-document url-prefix() {
#divhere {
color: red;
}
}
Der CSS scheint mit den umgebenden Klammern verwechselt zu werden, was ihn ungültig macht. Haben Sie Gedanken dazu?
Vielleicht Einrückung hinzufügen? Hier ist mein Code
Es scheint jetzt zu funktionieren, allerdings nur, wenn ich !important am Ende des Werts hinzufüge… seltsam. Auch erwähnenswert ist, dass ich ein SCSS-Blatt verwende
Danke für den Beitrag. Hat perfekt funktioniert. Ich schätze, die meisten Programme, mit denen wir arbeiten (AKA Dreamweaver, CSSEdit usw.), werden einen Fehler bei diesem Hack melden, da er doppelte Klammern hat {.
Zumindest glaube ich, dass das bei CSSEdit passiert, wenn ich es dort schreibe.
Ich habe diesen Beitrag hier ins Spanische übersetzt.
http://corchoweb.com/2012/codigo/hacks-de-css-especificos-para-firefox/
Nochmals vielen Dank.
Funktionierte perfekt :)
Danke
Kann mir jemand bei der Lösungsfindung helfen?
Ich benutze diesen Code
@-moz-document url-prefix() {} – es funktioniert in allen Firefox-Versionen außer Mac
Bitte beraten Sie mich.
Danke im Voraus..
Ich benutze einen Slider zum Entsperren mit jQuery. Aber es funktioniert nicht gut mit Firefox. Können Sie mir bitte sagen, was die Alternative zu -webkit-animation für Firefox sein könnte?
Danke im Voraus!
Wie bekommt man das bei Hover- oder Focus-Zuständen zum Laufen? Danke.
Wenn ich diesen Code verwende
@-moz-document url-prefix() {
.selector {
color:lime;
}
}
funktioniert er auf meinem PC, aber wenn ich die Website auf cPanel hochlade, funktioniert sie nicht
Ich bin keineswegs ein Webdesign-Guru, aber ich habe im Laufe der Erstellung von etwa 25 Websites festgestellt, dass, wenn es einen Unterschied zwischen Firefox und IE9 gibt und Sie nicht besonders experimentell mit fortgeschrittenen CSS-Selektoren umgehen, es sinnvoll ist, eine wirklich grundlegende Sache zu überprüfen: dass Ihr Code sowohl HTML- als auch CSS-konform ist. Moderne Browser sind wirklich ziemlich konsistent, besonders wenn Sie ein Reset-CSS wie das von Eric Meyer verwenden, aber sie tun sicherlich unterschiedliche Dinge, um fehlerhaften Code zum Laufen zu bringen. Wenn Sie also noch nicht validiert haben, lohnt es sich auf jeden Fall, Ihren Code zuerst dort zu überprüfen. IMHO.
Was ist mit anderen Webbrowsern (wie Safari und Opera)??
Das funktioniert in Opera.
noindex:-o-prefocus, .selector{
margin-left: 3em;
}
Für Safari. Sie benötigen die zusätzlichen Klammern, um Ihren Selektor und Ihre Regeln in den Hack für Webkit zu packen. Ich habe bemerkt, dass es beim Aufschreiben die zweite Klammer auf derselben Zeile setzt. Diese beiden Klammern unten müssen auf einer separaten Zeile stehen.
@media all and (-webkit-min-device-pixel-ratio:0){
.selector{
margin-left: 3em;
}
}
Es funktioniert.. Danke :-) gute Arbeit
Du bist der BESTE, Mann!!! Hast mir den Hintern gerettet.
Das ist großartig. Nur, dass der Code, der alle FF-Versionen anspricht, nicht validiert. :(
Entschuldigung @chris – kein Erfolg mit @import, aber ich benutze Import schon lange nicht mehr, warum also du?
@buelem danke für den Link, warum müssen wir das für all diese Browser tun… wo ist die Zeit, als 2 oder 3 Browser auf dem neuesten Stand waren und nicht so viele mehr…
Danke vielmals, sehr nützlicher Beitrag für mich
Gibt es spezifische CSS-Hacks für MAC Chrome??
Für alle, die versuchen, Opera und Safari anzusprechen, sollten Sie sich das hier auch ansehen
http://www.webmonkey.com/2010/02/browser-specific_css_hacks/
Ich habe ein hartes Problem mit meiner Firefox-CSS-Breite, gibt es Ratschläge?
Hat jemand Erfolg mit @import innerhalb von moz-spezifischem CSS gehabt?
Etwas wie das
@-moz-document url-prefix() {
@import url(“ff_font.css”);
}
Ich hätte gerne einen Hack, der Chrome anspricht und nicht Safari. Das Problem ist, dass beide Webkit-Plattformen sind. Wenn ich Safari anspreche, muss ich sozusagen die Mitte zwischen Safari und Chrome aufteilen.
Super Hack für Firefox….vielen Dank…
Ich benutze das schon seit einiger Zeit und wollte hier zurückkommen und mich bei Ihnen bedanken, da diese Hacks die Arbeit bei der plattformübergreifenden Fehlerbehebung von Websites erheblich erleichtert haben.
Hallo!
Ich habe eine Frage!
Wie schreibe ich spezielle Styles für Firefox MOBILE? (Für die Firefox-Mobile-Anwendung)
Vielen Dank
Mit freundlichen Grüßen
Hallo Adrian,
Sie packen Ihre Firefox-Sachen einfach in eine Media Query
z.B.
Hallo Summit Web Solutions,
Danke für die Weitergabe! Ich brauchte Firefox-spezifische Media Queries, um eine Kundenwebsite zu perfektionieren.
Vielen Dank, Summit Web Solutions. Das hat mein Problem gelöst :)
Ich bin wirklich überrascht, dass das bei Ihnen nicht funktioniert. Es sieht definitiv so aus, als hätten Sie es richtig geschrieben. Sie können meine Website besuchen und in meine Stylesheet schauen, um zu sehen, wie ich diesen Foxfire-Hack verwendet habe. In meiner aktuellen Stylesheet habe ich ihn 42 Mal verwendet.
Sharon! Ich bin wirklich überrascht, dass das bei Ihnen nicht funktioniert. Es sieht definitiv so aus, als hätten Sie es richtig geschrieben. Sie können meine Website besuchen und in meine Stylesheet schauen, um zu sehen, wie ich diesen Foxfire-Hack verwendet habe. In meiner aktuellen Stylesheet habe ich ihn 42 Mal verwendet.
@-moz-document url-prefix() {
div.orgChart tr.lines td.line {
width : 1px;
height : 35px;
-moz-width : 1px;
-moz-height : 35px;
}
div.orgChart tr.lines td.top {
border-top : 3px solid black;
-moz-border-top : 3px solid black;
}
div.orgChart tr.lines td.left {
border-right : 2px solid black;
-moz-border-right : 2px solid black;
}
div.orgChart tr.lines td.right {
border-left : 2px solid black;
-moz-border-left : 2px solid black;
}
}
Obiger Code zum Erstellen einer Linie in einem Diagramm
aber es funktioniert nicht
@-moz-document url-prefix() {
Class {
color:lime;
}
}
es funktioniert jetzt
(*class) das ist ein Hack nur für i8
(padding=0px 0px 0px 0px\9) dieser Hack für ie9, ie10
Ich weiß, dass dieser Beitrag schon eine Weile existiert! Aber sollte dieser Hack in der allerneuesten Version von Firefox funktionieren?
Ich habe ein wiederkehrendes Hintergrundproblem, das ich auf einem Pseudo-Element beheben möchte!
Wenn es nicht funktioniert, gibt es eine neuere Lösung?
Danke.
Okay, die Firefox 3-Version hat bei mir am Ende funktioniert. Aber aus irgendeinem Grund bekomme ich keine Version von Firefox dazu, mitzuspielen.
Es funktioniert jetzt, was großartig ist!
Danke Chris.
Funktioniert! Danke, dass du Zeit gespart hast
Das funktioniert!!! Danke :)
Es funktioniert nicht in Media Queries. Kann mir jemand sagen, wie ich es innerhalb von Media Queries verwenden kann
Verwenden Sie die Media Query, um eine CSS-Datei zu laden. Legen Sie sie dort hinein. Dann funktioniert es immer.
Wie sieht es mit ie aus
Vielen Dank für die Veröffentlichung. Ich habe zwei Tage lang an der Gestaltung eines wirklich komplizierten Sliders gearbeitet, nur um am dritten Tag festzustellen, dass Firefox einige meiner CSS-Elemente übernahm und einfach Pixelwerte erfand. Ziemlich nervig.
Ich habe die Firefox-Version für alle Versionen verwendet und es funktioniert gut.
Gibt es Hacks für Mozilla unter 32 und über 33?
Any Firefox funktioniert nicht in FF 22
CSS für jeden Firefox funktioniert nicht
Danke, es ist wirklich hilfreich für mich.
Ich habe eine umfassende Liste von Browser-Targeting-Media-Queries gefunden, aber ich habe sie verloren.
Hat jemand eine gute Liste, die alle enthält?
Mir geht es nicht um veraltete Browser, sondern um alle aktuellen Browser.
Gibt es Updates dafür? Ich stecke fest, wenn ich nur Firefox ansprechen möchte. Firefox 36.0.1
Danke
Brian
Schauen Sie sich dieses Beispiel an
http://rafael.adm.br/css_browser_selector/
Großartig! Es funktioniert für mich
Das funktioniert großartig, tat genau das, was ich brauchte. Danke :)
Großartig!! Danke!!
Hallo, ich habe Firefox Version 44.0.2. Wie kann ich einen CSS-Hack für diese Version anwenden?
Verwenden Sie den Snippet für jeden Firefox, und er zielt auf jede Version von Firefox.
Vielen Dank, mein Lieber
Du hast mein großes Problem gelöst
Großartig!! Das sind großartig, besonders wenn man hartnäckige kleine Fehler mit Pseudoelementen in verschiedenen Browsern hat. Ein weiterer großartiger Snippet, vielen Dank!!!
Vielen Dank. Der dritte Code funktioniert perfekt
extrem hilfreich in meinem aktuellen Projekt. 5 Sterne von meiner Seite
Ausgezeichnet! Das funktioniert für mich. Ich hatte Probleme mit dem erstaunlichen, aber eher eng kodierten „Newspaper“-Theme. Jede CSS-Anpassung schien das Layout beim Betrachten in Firefox zu brechen. Nur durch Hinzufügen des Plugins plus, .gecko oder .webkit vor der Dot-Whatever-CSS-Anpassung in der Style.css-Datei wurde die benutzerdefinierte Anpassung auf Chrome- oder Firefox-Browser beschränkt.
Danke!
Chris, ich hoffe, Sie lesen das immer noch, obwohl es alt ist…
Wie würde man eine Media Query für Firefox's iOS-Anwendung erstellen?
selector
Ich kann im Juli 2017 bestätigen, dass „Any Firefox“ immer noch wie am Schnürchen funktioniert, sogar in verschachteltem SASS
Danke! Nur, dass der Code, der alle Firefox-Versionen anspricht, nicht validiert. :)
Danke! Hat mir das Leben gerettet.
Der „Any Firefox“-Hack wird mit Firefox 59 (Hauptveröffentlichung: 13. März 2018) entfernt. => siehe https://www.fxsitecompat.com/en-CA/docs/2015/moz-document-support-will-be-dropped/
für Chrome ==>@supports (-webkit-appearance:none) {}
für Firefox ==>_::-moz-range-track, body:last-child .selector {}
Mehr dazu finden Sie auf dieser Seite http://browserhacks.com/
.foo {
padding: 5px 10px;
@-moz-document url-prefix() {
padding: 4px 10px;
}
}
Funktioniert nicht mehr in Firefox 60.0.2 (64-Bit)
Gibt es etwas Neues, das hoffentlich funktioniert?
Danke für den Hinweis! Ja, es scheint, dass dies eine experimentelle Eigenschaft war, die Mozilla nach Firefox 59 nicht mehr unterstützt hat. Ich habe den Ausschnitt aktualisiert, aber die neue Syntax ist:
@document url().Danke Geoff. Die neue Syntax muss auch noch experimentell sein. Ich habe sie gerade ausprobiert, um ein Div in Firefox auszublenden, und es funktioniert nicht. Übrigens, das Div, das ich in Firefox ausblenden möchte, ist Gtranslate, das in Firefox nicht funktioniert.
Es ist ab FF 61 hinter einem Flag.
layout.css.moz-document.content.enabled = trueAm besten konsultieren Sie MDN für alle -moz- bezogenen Dinge. Die sollten es wissen ;)
Wie kann ich Media Queries unter @-moz-document url-prefix() schreiben? Es funktioniert nicht.
Ich glaube, es ist andersherum, Sie müssen
@-moz-document url-prefix()unter Media Queries verwenden...Ich wollte nur Danke sagen! Meine Video-Hintergründe funktionieren auf Firefox Android nicht, also habe ich diesen Code verwendet, um das DIV zu verstecken und stattdessen einen normalen Bildhintergrund anzuzeigen.
Hah! Ich bin ein Dummy! Ich denke, der Code, den ich verwende, wird versuchen, sowohl Desktop- als auch Handy-Firefox anzusprechen.
@-moz-document url-prefix() {
.selector {
color: lime;
}
}
Weiß jemand, wie man nur Firefox Android anspricht?