رفع مشکل اجرا نشدن کدهای CSS3 در نسخه های 6 تا 9 مرورگر IE

اجرا نشدن کدهای CSS3 در نسخه های 6 تا 9 مرورگر IEیکی از بزرگترین مشکلاتی که طراحان وب را اذیت میکند، اجرا نشدن کدهای CSS3 در نسخه های 6 تا 9 مرورگر IE است. این امر باعث میشود معمولا طراحان از مرورگر IE فاصله گرفته و به کاربر پیشنهاد  بدهند برای استفاده از سایت، مرورگر دیگری مانند مرورگر فایرفاکس نصب کند تا بتواند سایت را به درستی مشاهده و اطلاعات را دریافت نماید.

برای مشاهده متن کامل پست رفع مشکل اجرا نشدن کدهای CSS3 در نسخه های 6 تا 9 مرورگر IE به ادامه مطلب مراجعه نمایید.

رفع مشکل اجرا نشدن کدهای CSS3 در نسخه های 6 تا 9 مرورگر IE

برای رفع مشکل اجرا نشدن کدهای CSS3 در نسخه های 6 تا 9 مرورگر IE چندین راه وجود دارد، در این جا ما یکی از راه ها که استفاده کردن از CSS3PIE است معرفی میکنیم.

زمانی که طراح با مشکل اجرا نشدن کدهای CSS3 در نسخه های 6 تا 9 مرورگر IE مواجه میشود، یا قید اجرای وب سایتش را در این مرورگر میزند، یا برای این نسخه ها طرحی مجزا میزند و یا کاربر را مجبور به نصب و استفاده از مرورگری دیگر میکند. اما با استفاده از CSS3PIE میتوان به راحتی مشکل اجرا نشدن کدهای CSS3 در نسخه های 6 تا 9 مرورگر IE برطرف کرد.

 CSS3PIE چیست؟

CSS3PIE مخفف عبارت CSS3 Progressive Internet Explorer است که به طراح اجازه میدهد چندین کد CSS3 پرکاربرد که در نسخه های 6 تا 9 مرورگر IE اجرا نمیشوند را، اجرا کرد. در تعریف سایت رسمی CSS3PIE این عبارت آمده است:

PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

اما CSS3PIE مجموعه ای از فایلهای آماده است که کافیست طراح آن ها را درکنار فایل های خود قرار داده و در استایل هایی که ایجاد میکند از آن ها استفاده کند.

به مثال زیر توجه کنید:
این کلاسی است که در حالت عادی ایجاد شده است:

.myElement {
    background: #EEE;
    padding: 2em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

اما مشکل اجرا نشدن کدهای CSS3 در نسخه های 6 تا 9 مرورگر IE، باعث میشود استایل border-radius در این کلاس برای مرورگر IE اجرا نشود.حال با استفاده از CSS3PIE کلاس را اینگونه بازنویسی میکنیم:

.myElement {
    background: #EEE;
    padding: 2em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    behavior: url(PIE.htc);
}

میتوانید دمو (Demo) استفاده از CSS3PIE را در ابنجا مشاهده نمایید.
برای دانلود و دریافت CSS3PIE میتوانید اینجا کلیک کنید.
برای کسب اطلاعات تکمیلی میتوانید به سایت رسمی CSS3PIE مراجعه نمایید.