CSS ile yeni bir web sayfası kodlarken sıkça yaşadığım bir sorun ve ben bunu tamamiyle ortadan kaldırdım sizler içinde böyle bir sorun olmaması için bu makaleyi yazıyorum. Yeni bir site yapıyorum Firefox öncelik olarak kullanıyorum ancak bazen chrome’de farklılık gösterebiliyor. İnternet explorer’da bazen değil sürekli farklılık gösteriyor :). Zaten öncelikle 1 sayfa tasarımına başlamadan önce CSS Sıfırlama dediğimiz olay yani tüm tarayıcılarda sorunsuz olması için kullandığımız sıfırlamayı kullanıyorum ancak genede problemler oluyor.

Şimdi bu problemleri çözmenin sırası geldi her tarayıcıya özel kod yazabilirmisiniz? Evet bu mümkün.

CSS Tarayıcı düzeltmeleri

Verdiğim kodlar en güncel haldedir. Güncelleme oldukça bende burada güncelleme yapacağım emin olabilirsiniz.

Anlamadığınız kısım olursa yazın hemen yardımcı oliyim. :)

/***** Seçici ******/

/* 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  }

/* IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Sadece Firefox. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }

/***** Öznitelik ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* IE6 Herşey */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8, bazı durumlarda IE9 :( */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 --  !important gibi davranır */
#veintesiete { color: blue !ie; } /* ! dizisinden sonra herşey olabilir*/

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* tüm kuralların sonuca gitmeli */

min-height:300px;
//height:300px; /* Sadece E6, IE7'de eşleşir. */

selector, x:-IE7 { } /* Sadece IE7 */
selector,{ … } /* lte ie7 */
.suckyie6.someClass { … } /* lte ie6  */

/* IE6  - sadece bu karakterlerden herhangi biri*/
_ - £ ¬ ¦

/* IE6/7  - sadece bu karakterlerden herhangi biri*/
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |

/* @media hacks */

/* IE6/7 only (via Keith Clarke) */
@media screen\9 { }

/* IE6/7/8 (via Keith Clarke) */
@media \0screen\,screen\9 {}

/* IE8 (via Keith Clarke) */
@media \0screen { }

/* IE8/9 */
@media screen\0 { }

• Kaynak: Browser CSS hacks