/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
Schauen Sie sich BrowserHacks.com für mehr an.
IE8
Okay… vielleicht liegt es nur an mir… aber ich bin mir nicht sicher, ob ich diesen Schnipsel verstehe. Kann mir jemand das erklären?
Hallo, genau wie Chris, hätte ich gerne eine Erklärung, was dieser Code tut?
Danke :)
Kann mir bitte jemand erklären, was dieser Code tut? Ich meine, ich bin verwirrt… Aber ich finde es interessant… Kann mir bitte jemand im Detail helfen?
Ich denke, es erklärt die Wege, browser-spezifische CSS-Regeln zu erstellen. Wenn Sie zum Beispiel einen roten Hintergrund für ein Element mit IE6 haben möchten, nehmen Sie den ersten Selektor und machen Sie Ihre Magie damit.
Es funktioniert nicht richtig. Bitte fügen Sie eine Demo-Seite hinzu.
Es funktioniert, sollte aber hierarchisch verfolgt werden.
Danke Sanjay für die Lösung. Wie verwende ich es mit !important?
/* Nur für IE 8 */
.header{border:#000 solid 5px /;
Ich kann keinen richtigen Code für IE8 übermitteln.
/* Safari */
html[xmlns*=””] body:last-child .yourclass { }
Das funktioniert nicht in Safari. Ich brauche einen Filter, der Webkit von Chrome unterscheiden kann.
Sehr cool, danke fürs Teilen. Kann es an eine externe Stylesheet gerichtet werden oder muss es eingebettet sein?
Ich verwende diese Hacks, um bestimmte IE-Versionen anzusprechen
color : green; /* IE9 und darunter */
color : green\9; /* IE8 und darunter */
*color : yellow; /* IE7 und darunter */
_color : orange; /* IE6 */
Aber W3C-Validierung validiert die IE-Ziel-CSS nicht, wie ich sie angegeben habe
color:green\9;
Warum ein Hack auf jeder Zeile?
Wenn Sie eine komplexe Integration haben, verwenden Sie die bedingten Kommentare mit spezifischen Div-IDs.
Zum Beispiel, wenn Sie IE7 ansprechen möchten
Ihr Inhalt
Verschiedene Syntaxen hier: http://www.quirksmode.org/css/condcom.html
Nur Chrome-Hack
Nur Firefox-Hack
IE8-Hack
IE9-Hack
coloe:red\9; Hack funktioniert bei IE9
Vielen Dank, es funktioniert gut für IE und beeinträchtigt andere Browser nicht. Vielen Dank.
Ich bin kein totaler CSS-Hack-Fanatiker, ich bevorzuge es, einfache, aber effektive Websites zu entwerfen und zu entwickeln, anstatt eine schicke Website zu nutzen, die aber voller CSS-Hacks ist und irgendwann die neuere Version des Browsers diese Art von Skripting nicht mehr unterstützt.
IE8-Hack funktioniert auch in IE9
:( Gibt es einen perfekten Hack, der nur für IE8 und darunter gilt?
IE8-Hack funktioniert
@media screen {
.item {
background: #000;
}
}
fehlt "" vor "screen"
Korrektur: "slash0" vor "screen" fehlt
Hallo,
Bitte helfen Sie mir mit einem reinen Google Chrome CSS-Hack. Ich habe ein @font-face-Problem nur mit Google Chrome. Ich brauche nur einen Google Chrome-Hack, um ihn zu 'Arial' zu machen.
Danke
Anil
Um nur Chrome oder Safari zu verwenden, versuchen Sie meine Antwort in StackOverflow – Gibt es einen reinen Google Chrome CSS-Hack?
IE9 weiterer Hack (funktioniert bei mir)
Hallo,
Im Laufe der Jahre stelle ich mir immer wieder die gleiche Frage
„Wann werden sich Browser-Entwickler zusammensetzen und Browser bauen, die OHNE all diese ärgerlichen Unterschiede funktionieren?!“
Wacht auf, Leute, und tut, was ihr tun müsst.
Seid verantwortlich und befreit uns von diesem Mist!
Übrigens
Vielen Dank an alle Leute, die sich so sehr bemühen, das richtig zu machen, was Browser-Entwickler vermasseln!
Grüße.
html[xmlns] .clearfix {
display: block;
}
Hallo, zu welchem Browser und welcher Version gilt dieser Hack? :D
Hallo,
Ich brauche eine Android-CSS-Hack-Lösung, bitte stellen Sie mir einen Hack-CSS zur Verfügung… bitte………..
Es ist erstaunlich!!!!
Ich kann ein Chrome-Element nicht korrigieren, ohne ein Safari-Element zu zerstören. Die exklusiven Chrome-Hacks sind nicht hilfreich.
Sie können mehr über browser-spezifische Selektor- und Attribut-Hacks erfahren, es war mir sehr hilfreich, also teile ich es nur. Danke!
Selektor-Hacks
http://mydons.com/browser-specific-css-rules-you-must-memorize-part-1/
Attribut-Hacks
http://mydons.com/browser-specific-css-rules-you-must-memorize-part-2/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.ar #form-wrapper {
width: 330px;
}
}
Der obige Hack für Safari und Chrome, ich brauche nur Chrome, wenn Sie es wissen, teilen Sie es mir mit
Gibt es einen separaten Hack für Chrome und einen separaten Hack für Safari?
super,
jetzt habe ich alle meine Browser-Probleme gelöst…..
Danke.
@anil,
Wenn Sie separate Stile für Chrome und Safari erstellen möchten, können Sie individuelle CSS-„mit“-Browsererkennungsfunktionen verwenden. Für Ihre Frage ist dies aufgrund derselben Webkit-Browser-Engine beider Browser möglicherweise unmöglich. IMHO.
Mehr Browser-Hacks unter BrowserHacks.
\9 Hack für IE9 und darunter. Ich brauche nur IE8 und darunter. Ihre Informationen sind falsch. Bitte aktualisieren Sie sie….. danke.
Hallo Leute,
Kann mir jemand hier helfen, das Problem mit der Farbe meines filePicker-Buttons auf Mobiltelefonen/iPhones zu beheben?
http://www.jotformpro.com/form/31846176706965
Ich verwende benutzerdefiniertes CSS, um die Farbe von Originalblau auf Grün zu ändern, aber es funktioniert nicht.
Dies ist das CSS, das ich in dieses Formular eingefügt habe.
.filePicker-button {
background: linear-gradient(to bottom, #008000 0%,#008000 100%);
}
.filePicker-button:hover {
background: linear-gradient(to bottom, #008000 0%,#008000 100%);
}
Können Sie mir helfen?
Vielen Dank,
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
Safari CSS-Hack
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Nur Safari-Überschreibung */
::i-block-chrome, .wrapper th > p span {
position: relative;
}
}
Danke, es funktioniert gut für mich :)
Das funktioniert nur für Safari. Danke.
@media screen and (-webkit-min-device-pixel-ratio:0)funktioniert in Chrome für Mac v31 nicht mehr (nicht sicher, in welcher Version dies aufgehört hat zu funktionieren).Viele dieser Hacks enthalten keine Angaben darüber, dass sie in IE10+ funktionieren. Hacks sind für neuere IE-Versionen immer noch relevant, da selbst IE11 seine eigenen größeren Eigenheiten hat (wie die Positionierung von fixierten verschachtelten Elementen).
Ich würde diese auch zur Sammlung hinzufügen ;) – CSS-Hacks: Firefox, Opera, Safari und Internet Explorer
Hallo Chris,
Ich habe den Code gefunden, er funktioniert auf Geräten wie „iPad|iPhone|iPod|android“. Ich habe diesen Code auf meiner BigCommerce-Website verwendet: „http://cancooker.com/“, Sie können das Ergebnis darauf sehen.
Dies ist die Website, von der ich den Code habe.
https://gist.github.com/jsoverson/4963116#file-device-js
Danke!
Sam
Schauen Sie mal: https://github.com/tarunsharma20/initiator
Die folgende CSS funktioniert nicht in IE8. Wenn etwas falsch ist, lassen Sie es mich wissen
$(“ul.dynamic”).css(‘margin-top/*/’,’30px\9′);
Danke
Bhaskar
Ich habe gerade diesen speziellen Hack für Chrome herausgefunden!!! Weil Webkit unter Mac Schriftarten manchmal etwas dünner macht – aber auf Retina-Displays sieht die dünnere Schrift gut aus!
Zumindest habe ich ihn nicht benutzt, weil ich den normalen Chrome- und Safari-Hack genommen und das Retina-Display später überschrieben habe!
Weiß jemand einen Hack, um Media Queries für iPhone 5/5s zu verwenden?
Meine Media-Queries funktionieren auf allem außer auf dem iPhone 5 und iPhone 5s.
Sie müssen Folgendes schreiben
@Johann,
Danke für den Schnipsel. Ich verwende Mobile-First und em, aber ich werde das ausprobieren.
Aufgrund eines Fehlers in IE 10 & 11 musste ich einige spezifische CSS auf sie anwenden. Hier wende ich mich normalerweise hin, um solche Hacks zu finden, aber hier war er nicht aufgeführt.
Hier ist, wie ich es tun konnte. Ich hoffe, Sie ziehen in Betracht, es zu Ihrer Liste hinzuzufügen
@Nik
Großartig, vielen Dank. Diese Anleitung muss aktualisiert werden, da IE:10+ nicht mehr den gesamten Code in der Anleitung unterstützt. Ich bin überrascht, dass ich die Kommentare durchsuchen musste, um eine Lösung zu finden.
Schön, danke fürs Teilen
fantastisch, allerdings ist das ein alter Beitrag, aber er hilft :)
für mich verwende ich normalerweise diese Hacks ..
Hey, mein Freund und ich streiten uns. Ich sagte: „Ich bin mir ziemlich sicher, dass der \9-Hack einfach „der Slash-Hack“ genannt wird“, aber sie denkt, er hat einen anderen Namen. Ich nehme an, Sie wissen nicht, wie er heißt, oder? Cheers :)
p{
border-color: blue \ ;
}
nur für Internet Explorer 8
Ich habe die Schriftart HelveticaNeueLTStdCn auf einer Webseite verwendet, die in jedem Browser cool ist, außer im Safari-Browser. Deshalb muss ich nur für den Safari-Browser eine andere Schriftart verwenden.
Haben Sie eine Idee, wie man nur für Safari spezifisches CSS schreibt?
Diese Seite könnte nützlich sein: http://browserhacks.com/.