10 استایل (css) اختصاصی مرورگر ie - طراحی سایت | ساخت سایت | قالب وردپرس

۱۰ استایل (css) اختصاصی مرورگر ie

۱۶ تیر ۱۳۹۲
1020 بازدید
فاقددیدگاه
ie-style+.dty

وقتی که در حال طراحی قالب یک سایت هستیم و استایل (css) را برای آن می نویسم بیشتر اوقات قالب ما با ie مشکل دارد . در حالی که در فایر فاکس و کروم بدون هیچ مشکلی به نمایش در می آید.راه های زیادی از جمله استفاده از هک های css برای حل این مشکل وجود دارد،اما استفاده از هک باعث افت سئوی سایت بدلیل داشتن خطای css در سایت اعتبار سنجی w3.org  می شود.

چرا باید ازاستایل (css) اختصاصی مرورگر ie استفاده کنیم:

  • داشتن کدهای بدون هک و valid یا معتبر
  • داشتن استایل اصلی کاملا تمیز
  • روشی کاملا قابل قبول برای مایکروسافت

به همین دلیل ایجاد یک فایل css جدید که تنها مرورگر ie قادر به خواندن آن باشد و سایر مرورگرها از آن استفاده نکنند می تواند بسیار مفید باشد.در این مطلب قصد داریم نحوه تعریف ۱۰ استایل اختصاصی مخصوص انواع ورژنهای ie را به شما آموزش دهیم تا بتوانید سایت خود را با مرورگرie ست نمائید:

کدها

بعد از تگ <head> در قالب سایت خود می رویم و یک استایل اصلی داریم که در قالب های html به شکل زیر:

<code><link rel="stylesheet" type="text/css" href="style.css" /></code>


و در قالب وردپرس به این صورن است:

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />


حالا ما استایل اختصاصی خود را دقیقا بعد از استایل اصلی فراخوانی می کنیم.
۱-استایل اول برای همه ورژنهای 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:

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

۴-استایل بعد برای ورژن ۶ ie:

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

۵-استایل بعد برای ورژن ۶ و پائینر ie:

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

۶-استایل بعد برای ورژن ۷ و پائینتر ie:

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

۷-استایل بعد برای ورژن ۸ و پائینتر ie:

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


۸-استایل بعد برای ورژن ۶ و بالاتر ie:

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

۹-استایل بعد برای ورژن ۷ و بالاتر ie:

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

۱۰-استایل بعد برای ورژن ۸ و بالاتر ie:

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

ما که گفتیم از هک استفاده نکنید اما اگه دوست داشتید اینم هکهای css مخصوص ie:

فقط ie6

* html #div { height: 300px; }

فقط ie7

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

فقط -ie8

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

IE-7 , IE-8

#div { height: 300px\9; }

همه ورژنها جز ie7

#div { _height: 300px; }

مخفی برای ورژن ۶ و پائینتر:

html > body #div { height: 300px; }
html > #div { height/**/: 300px; }
امتیاز:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...Loading...
اشتراک گذاری:
مطالب مرتبط
دیدگاه شما