موضوع:
رفع مشکل ناسازگاری طراحی وب سایت در IE با دیگر مرورگرها
دورد بر شما
همیشه IE یه مشکلی داره در نمایش ندادن همسان با دیگر مرورگرها!!!
بار ها شده زمان طراحی وب سایت، وقتی که از وب سایت خود در مرورگر های متداول (مرورگرهای متداول دنیا شامل: IE, NS, FF, Opera, AOL browser, Safari) نمایش میگیرید، وب سایت شما در تمام مرورگر ها به غیر از IE به یک شکل نمایش داده میشه!!!
به مثال زیر توجه کنید:
کد HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.echessdesign.com</title>
<style type="text/css">
body {
padding:0; margin:0; background: silver;
}
#echessdesign {
width:300px; background:#f9f; height:50px; margin:0 100px 0 0; float:right;
}
</style>
</head>
<body>
<div id="echessdesign">
<a href="www.echessdesign.com">www.echessdesign.com</a>
</div>
</body>
</html>
در این مثال، باکسی که طراحی کردیم ،در مرور گر هایی به غیر از IE، در فاصله 200 پیکسلی سمت راست صفحه نمایش داده میشه. اما این فاصله در IE بیشتر است!!! و خیلی از مشکلات دیگر،...
------
یکی از راه حل های رفع این مشکل بدین صورت است که ما برای IE فایل CSS جدایی طراحی کنیم ، که فقط مرور گر IE از آن استفاده کنه و دیگر مرور گر ها از فایل CSS پیش فرض طراحی صفحه استفاده کنند.
سوال اینجاست که ما چگونه این نکته رو به مرورگر های مختلف بفهمونیم که این فایل CSS خاص، فقط در IE لود بشه؟؟
راه حل اینجاست شما باید از یک فرمان شرطی که در head صفحه درج میشه استفاده کنید:
کد HTML:
<!--[if IE]>
<style type="text/css">
body {
background: silver;
}
</style>
<![endif]-->
--------------
در صورت اینکه از این صفحه نمایش بگیرید متوجه میشید که تنها در IE، پس زمینه صفحه به رنگ خاکستری در میاد. شما در بین تگ های:
کد HTML:
<!--[if IE]>
insert code
<![endif]-->
می توانید : فایل های CSS ، کد های HTML ، کد های JavaScript ،... دیگر کد های مورد نظر خود تون رو قرار بدهبد که فقط در مرورگر IE نمایش داده بشه.
--------------------
نکته قابل ذکر دیگر این است که: شما می توانید فایل CSS پیش فرض رو به صفحاتتان لینک کنید و در زیر آن تغییراتی که باید در IE انجام شود را در زیر آن درج کنید. با این کار ، تمام مرورگر ها از فایل CSS پیش فرض شما استفاده می کنند و IE علاوه بر آن فایل CSS پیش فرض، از فایل CSS که در حلقه قرار گرفته نیز استفادی میکند.
مثال:
کد HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.echessdesign.com</title>
<style type="text/css">
body {
background: silver;
}
</style>
<!--[if IE]>
<style type="text/css">
body {
background: red;
}
</style>
<![endif]-->
</head>
--------------------
در صورتی که در نظر داشته باشید که نسبت به نسخه های مختلف IE ، فایل های متفاوتی لود شوند، می توانید با درج نسخه IE مورد نظر خود، تغییرات را اعمال کنید:
کد HTML:
<!--[if IE]>
jahate namayesh dar IE
<![endif]-->
--
کد HTML:
<!--[if IE 5]>
jahate namayesh dar IE 5
<![endif]-->
----
کد HTML:
<!--[if IE 5.0]>
jahate namayesh dar IE 5.0
<![endif]-->
-------
کد HTML:
<!--[if IE 5.5]>
jahate namayesh dar IE 5.5
<![endif]-->
----
کد HTML:
<!--[if IE 6]>
jahate namayesh dar IE 6
<![endif]-->
------
کد HTML:
<!--[if IE 7]>
jahate namayesh dar IE 7
<![endif]-->
--------
کد HTML:
<!--[if gte IE 5]>
jahate namayesh dar IE 5 va noskhe haye balatar
<![endif]-->
-------
کد HTML:
<!--[if lt IE 6]>
jahate namayesh dar noskhehaye kam tar IE 6
<![endif]-->
-------
کد HTML:
<!--[if lte IE 5.5]>
jahate namayesh dar IE 5.5 va noskhe haye kam tar az IE 5.5
<![endif]-->
---------
کد HTML:
<!--[if gt IE 6]>
jahate namayesh dar noskheh haye balatar az IE 6
<![endif]-->
---------
استادان ارجمند که نیازی به تکمیل این توضیحات میبینند، لطفا زحمتش رو بکشند.
پرسشی باشه در خدمتت شمام.
منبع فارسی: خودم
www.echessdesign.com