Tarayıcı Farklılıklarını Önlemek için CSS Yazmak

Bazen tarayıcıların CSS'i farklı yorumlaması nedeniyle tasarımcı veya yazılımcılar bu sorunu nasıl çözerim diye bir koşuşturmaya girmektedir. Genellikle bu farklılık/sorun Microsoft Internet Explorer ve serilerinde sıkça yaşanmaktadır. Kısaca bilmemiz gereken spesifik tanımlamalar şu şekildedir.
1) gt (büyüktür): Belirli versiyondan büyük olanlar.
2) gte (eşit veya büyük): Belirli versiyona eşit veya o versiyondan büyük olanlar.
3) lt (küçüktür): Belirli versiyondan küçük olanlar.
4) lte (eşit veya küçük): Belirli versiyona eşit veya o versiyondan küçük olanlar.
5) ! (Belirtilen tarayıcı olmayan): "!IE": Internet Explorer olmayan (Chrome, Opera vs..).

Bunları örnekle sizlere aktaralım.

A) Bütün Internet Explorer Sürümleri için stil yolunu belirtiyoruz. Sitemizi ziyaret eden kişinin tarayıcısı herhangi bir Internet Explorer versiyonu ise
A

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

B) Internet Explorer olmayan tarayıcılar için (Chrome, Opera, Firefox)
B

<!--[if !IE]>
	<link rel="stylesheet" type="text/css" href="ie-degil.css" />
 <!--<![endif]-->

C) Yalnızca Internet Explorer 7 için
C

<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

D) Yalnızca Internet Explorer 6 için
D

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

E) Yalnızca Internet Explorer 5 için
E

<!--[if IE 5]>
	<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

F) Internet Explorer 6 ve daha düşük versiyonlar için
F

<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie6-ve-daha-dusuk.css" />
<![endif]-->

G) Internet Explorer 6 ve daha yüksek versiyonlar için
G

<!--[if gt IE 5.5]>
	<link rel="stylesheet" type="text/css" href="ie6-ve-daha-yuksek.css" />
<![endif]-->

Alttaki örnekte de görüldüğü gibi 1. resim Chrome, 2. resim Internet Explorer 9 görüntüsüdür.