چطور می توان یک استایل CSS اختصاصی برای IE نوشت

بسم الله الرحمن الرحیم

حتما شما نیز با کاربرانی که به دلیل آشنا نبودن به مرورگرهای دیگر، از مرورگر قدرتمند IE استفاده می کنند در وب سایت داشته، دارید و خواهید داشت!
خوب به دلیل مشکل کاربران در عدم استفاده از ابزار بهتر شما مجبور هستید که سایت خود را به نحوی برای کاربرانتان تغییر دهید که بتوانند آن را به خوبی مشاهده کنند:
 
لطفا مقاله "طراحی وب سایت برای مرورگرهای مختلف" را مطالعه کنید.

چطور می توان یک استایل CSS اختصاصی برای IE نوشت؟ Cross-Browser

برای این کار می توانید از روشهای زیر استفاده کنید:
در روش اول کافی است درون تگ head مانند تمامی link هایی که قرار می دهید تگ مربوط به لود کردن استایل IE را نیز قرار دهید اما با چند ویژگی، که می توانید تعیین کنید این استایل برای چه نسخه ای از مرورگر IE است.
شما می توانید با دستور IF تعیین کنید که این استایل فقط برای مرورگرهای IE مورد استفاده قرار گیرد
در دستور IF می توانید از شرطهای منطقی استفاده کنید:

• ! به معنی not است. مثال !IE یعنی برای IE استفاده نشود.
• gt به معنی greater than (بزرگتر از)
• gte به معنی greater than or equal (بزرگتر مساوی)
• lt به معنی less than (کوچکتر از)
• lte به معنی less than or equal (کوچکتر مساوی)

نکته: یادتان باشد IE 10 به بالا هیچکدام از این شرطها را به دلیل قدرتنمد بودنشان پشتیبانی نمی کنند.

استفاده برای تمامی مرورگرهای IE

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

استفاده برای تمامی مرورگرها به جز IE

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

استفاده فقط برای IE 7

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

استفاده فقط برای IE 6

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

استفاده فقط برای IE 5

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

استفاده فقط برای IE 5.5

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

استفاده برای IE 6 و قدیمی تر

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

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

استفاده برای IE 7 و قدیمی تر

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

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

استفاده برای IE 8 و قدیمی تر

<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

<!--[if lte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

استفاده برای IE 6 و جدید تر

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

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

استفاده برای IE 7 و جدید تر

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

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

استفاده برای IE 8 و جدید تر

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

<!--[if gte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

علاوه بر این روش ها می توانید در هنگام نوشتن css های خود، از کدهای خاصی استفاده کنید تا css شما تا مثلا فقط برای نسخه 7 IE کار کند.
در اینجا این کدها را برای شما قرار داده ام.


استفاده از CSS فقط برای IE 6

* html #div { 
    height: 300px;
}

استفاده از CSS فقط برای IE 7

*+html #div { 
    height: 300px;
}

استفاده از CSS فقط برای IE 8

#div {
  height: 300px\0/;
}

استفاده از CSS برای  IE 7و IE 8

#div {
  height: 300px\9;
}

استفاده از CSS به جز IE 7

#div {
   _height: 300px;
}

مخفی کردن CSS در IE 6 و نسخه های پایین تر

#div {
   height/**/: 300px;
}

html > body #div {
      height: 300px;
}

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