نمایش صحیح css در مرورگر IE

 

شیوه کدنویسی css در IE:

اگر در زمینه طراحی وب سایت فعالیت می کنید، حتما برای شما هم پیش آمده که کدهای css در مرورگرهای مختلف و مخصوصا مرورگر اینترنت اکسپلورر بدرستی نمایش داده نمی شوند!

مرورگرهای Firefox و Chrome بیشترین انعطاف را از خود برای کدهای Css نشان می دهند. در بعضی موارد که این کدها با این مرورگرها به درستی کار نمی کنند، طراحان وب با نوشتن یک پیشوند قبل از کدها، به نتیجه مطلوب خود می رسند.

نکته ای که در طراحی وب سایت باید مد نظر قرار داد، سازگاری هر چه بیشتر وب سایت با مرورگرهای مرسوم است. برای نمایش صحیح وب سایت در مرورگر Internet Explorer چندین راه وجود دارد که در ادامه با توضیح آن ها مزایا و معایب آن ها را نیز بررسی خواهیم کرد.

استفاده از روش شرطی برای IE:

در این روش توسط تکه کدی در قسمت head مشخص می کنیم که اگر مرورگر کاربر IE بود از فایل Css خاص خودش استایل بگیرد.

در حقیقت در این روش یه فایل Css جداگانه برای نسخه مورد نظر IE نوشته و آن را توسط شرط در قسمت head وب سایت قرار می دهیم.

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

در اینجا فایل css مخصوص مرورگر اینترنت اکسپلورر را درون شرط فراخوانی کردیم.

حال اگر فقط برای نسخه خاصی از آن بخواهیم این کار را انجام دهیم باید شماره نسخه مورد نظر را در شرط ذکر کنیم مانند زیر:


<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="مخصوص آن Css آدرس فایل" /> <![endif]-->

همچنین اگر بخواهیم تعدادی از نسخه ها را با هم در نظر بگیریم مانند زیر عمل میکنیم:

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

 

در این مثال ما تمام نسخه های بعد از 6 را در نظر گرفتیم یعنی نسخه های 6_7_8 به بالا.

 

 استفاده از روش شرطی برای تگ HTML:

 

این روش نیز مانند روش قبل است، با این تفاوت که تعیین میکنیم که اگر مرورگر IE بود تگ html با یک class خاص صدا زده شود.

<!--[if IE]><html class="ie"><![endif]-->

 

با این کار می توانیم کدهایی لازم را توسط روابط والد و فرزندی با این کلاس صدا زده و استایل مورد نظر را برای آن نوشت.

در این روش نیز می توانیم نسخه های مورد نظر را در شرط اعمال کنیم.

 

استفاده از هک IE:

در این روش با استفاده از علایم خاص کاری می کنیم که این کدها فقط برای نسخه های IE قابل درک و نمایش باشند.

 

  • IE8 : یک (9\ ) در آخر و قبل از ( ; ) اضافه کنید
  • IE7 : افزودن ستاره ( * ) قبل از خصوصیت کد Css
  • IE6 : افزودن آندر اسکور ( _ ) قبل از خصوصیت کد Css

با این روش می توانید در همان فایل css اصلی کدهای مورد نظر را وارد کنید تا کدها فقط برای IE قایل نمایش باشند.


color:black;
color: green\9; /* IE8 and older... */
*color: blue; /* IE7 and older */
_color: red; /* IE6 and older */

مهم!

در روش اول نیاز است تا یه فایل css جداگانه برای IE بنویسید که زیاد مطلوب نیست اما اگر تعداد کد هایتان زیاد است می تواند به شما کمک کند.

در روش آخر شما می توانید کدهایتان را در همان فایل اصلی بنوسید اما این کار زمانی مناسب است که تعداد کد هایتان کم باشد!


همچنین بخوانید...!

تاریخ آخرین بروز رسانی: 2018/05/09

مشاهده : 569 بار

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *