جستجو
زمانی که متن خود را وارد می نمایید در صورت وجود اطلاعات ، اطلاعات مورد نظر بصورت همزمان و بدون زدن هیچ دکمه ای نمایش داده می شود.
عضویت در خبرنامه
جهت لغو عضویت کلیک نمایید
شمارشگر شبکه های اجتماعی
پسندیده
0
فیسبوک
0
توییتر
0
گوگل پلاس
13
لینک ادین
11
نمودار بازدید از موضوع ها
نویسنده : phpro.ir تعداد بازدید : ۶۰۹ تاریخ : دو شنبه, ۹تیرماه ۱۳۹۳
CSS3 در Internet Explorer
امتیاز دهید
تعداد رای 1 امتیاز 4.5

یکی از بزرگترین مشکلات طراحان سایت مروگر اینترنت اکسپلورر است. تا قبل از نسخه ۹ این مرورگر از CSS3 پشتیبانی نمیکند و به همین دلیل طراحان رو در طراحی سایتهایی با امکانات css 3 دچار مشکل میشوند.

برای اینکه بتونبم از امکانات css3 در مرورگر اینترنت اکسپلورر استفاده کنیم ابزارهایی تولید شدند. یکی از بهترین ابزارهای موجود میشه از کتابخانه  CSS3PIE  نام برد. این کتابخانه با حجم کم امکانات زیادی رو در اختیار ما میذارخ که تعدادی از این امکانات رو براتون معرفی میکنم.

ابتدا کتابخانه CSS3Pie رو از لینک زیر دانلود کنید.

دانلود CSS3Pie

حالا یک فایل html بسازید :

<div class="main">

آموزش حرفه ای PHP

</div>

 

کد css مربوط به کلاس main رو هم مینویسیم:

.main
{
    border: 1px solid #999; 
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;  
    border-radius: 10px;
}

 

خب در بالا میبینید که از border-radius استفاده کردیم اما همینطور که میدونید این قابلیت در مرورگر IE شناسایی نمیشه.

برای اینکه در IE هم بتونیم گوشه های گرد داشته باشیم خط زیر رو به استایل .main اضافه میکنیم :

behavior: url(path/to/PIE.htc);

داخل بسته ای که دانلود کردید یک فایل با نام PIE.htc وجود داره. برای اینکه بتونیم استایل های مربوط به css3 رو در اینترنت اکسپلورر استفاده کنیم باید در استایل مورد نظرمون خط :

behavior: url(path/to/PIE.htc);

رو حتما ذکز کنیم.
دقت کنید که آدرس فایل PIE.htc باید به صورت کامل ذکر بشه.در آدرس دهی این فایل نباید از آدرس نسبی استفاده کرد و فقط باید آدرس دهی به صورت اینترنتی باشه مثلا :

behavior: url(http://blog.unique-web.ir/css/PIE.htc);

بعد از اضافه کردن کد بالا به کلاس .main صفحه html ساخته شده رو در اینترنت اکسپلورر چک کنید.

همینطور که میبینید شما یک div با گوشه های گرد دارید!

امکانات CSS3Pie

CSS3Pie از قابلیتهای زیر هم پشتیبانی میکنه :

  • box-shadow
  • border-image
  • border-image
  • CSS3 Backgrounds (-pie-background)
  • Gradients
  • RGBA Color Values

برای استفاده از امکاناتی مثل استفاده از چند تصویر زمینه یا gradiant به صورت بالا نباید عمل کنید. برای هر کدوم از این امکانات باید دستور خاص خودش رو بنویسید.

مثلا برای استفاده از Gradiant باید از دستور -pie-background استفاده بشه : 

#myElement {
    background: url(bg-image.png) no-repeat #CCC; /*non-CSS3 browsers will use this*/
    background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
    background: url(bg-image.png) no-repeat, -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
    background: url(bg-image.png) no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/
    background: url(bg-image.png) no-repeat, -ms-linear-gradient(#CCC, #EEE); /*IE10 preview*/
    background: url(bg-image.png) no-repeat, -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
    background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*PIE*/
}
comments powered by Disqus
تبلیغات
آخرین تصاویر
شهر تاریخی جیزد باغ شازده ماهان عمارت و باغ نشاط (سالار) تقی آباد غار پرده رستم کاروانسرای شاه عباس یونسی حلزون اسب در کوهستان بچه پنگوئن بچه میمون ديگو کاستا دنی آلوز میامی هیت پیرلو فرانچسکو توتی لیونل مسی طوطی دریا جاده زمستانی گورخر ... ... پل کلبه ببر
وضعیت آب و هوا
  • یزد
  • ارومیه
  • اصفهان
  • البرز
  • مشهد
  • شیراز
  • تبریز
  • تهران
  • زاهدان
  • اهواز
  • زنجان
  • رامسر
  • بابلسر
  • کرمانشاه
  • بندرعباس
  • کرمان
  • گرگان
  • یاسوج
  • همدان
  • آبادان
  • مکه
موضوعات مشابه