• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

چگونگی حل باگهای ( Bugs ) متداول Internet Explorer

2 2429 ۶ آبان ۹۳

در این مطلب میخوام در مورد موضوعی صحبت کنم که مطمئنا برای همه درد سر ساز شده و اونم چیزی نیست جز Internet Explorer و مخصوصا قدیمیاش مثل IE6 و IE7.

شاید خیلی از افراد براشون مهم نباشه که سایتی که طراحی میکنن ، در همه مرورگرها خوب نمایش داده بشه و اصطلاحا Cross-Browser باشه. این مطلب بدرد این افراد نمیخوره. ولی بعضی از مواقع مجبورید که سایتی طراحی کنید که با مرورگرهای قدیمی هم سازگاری داشته باشه. اینجا هست که دیگه نمیتونین بیخیال IE6 و بالاتر بشین و باید یه فکری به حالش بکنید.

این مشکل از زمانی که HTML5 و CSS3 اومد بیشتر خودشو نشون داد و سازگار کردن در این مرورگرهارو به مراتب سختتر کرد. تا جایی که طراحای زیادی بفکر افتادن و ابزارهایی رو تهیه کردن که دیگر افراد نیز بتونن از اونا استفاده کنن.

تو هر سایتی هم که میرید که یک ابزار یا کد و یا .... در اختیارتون میزارن ، یه بخشی رو برای اینکه با چه مرورگرهایی سازگار هست رو قرار میدن. پس معلوم میشه که این سازگاری خیلی مبحث مهمیه. هزاران ابزار برای این موضوع در نت موجوده که شما کم و بیش با تعدادی از اونا آشنا هستید.

در این مطلب نمیخوام در مورد این ابزارها براتون توضیح بدم. در این مطلب میخوام تعدادی از مشکلات متداول رو بهتون بگم و روش حل اونا رو هم بهتون توضیح بدم.

توضیحات شرطی ( Conditional comments ) :

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

با استفاده از کد بالا ، شما میتونین کدهای CSS ای بنویسید که فقط در IE6 رندر بشه.

با استفاده کد بالا نیز ، شما میتونین کدهای CSS ای بنویسید که فقط در IE7 رندر بشه.

توضیحات شرطی پیشرفته تری هم وجود داره که میتونین برای مطالعه بیشتر به این لینک برید. ولی دو موردی که توضیح دادم بیشترین کاربرد رو دارن.

به طور خاص هدف قرار دادن عناصر :

شما میتونین در کدهای CSS با استفاده از هک هایی که وجود داره ، مشخص کنید که این کد CSS در کدوم نسخه ی IE رندر بشه.

برای مثال کد زیر رو در نظر بگیرین :

میبینید که مثلا اگر بنویسیم *color ، این کد فقط در IE7 و قدیمی تر اجرا میشه و مثلا در Chrome و Firefox و Safari و Opera و IE8 به بالا و ...، اجرا نمیشه.

شما میتونین لیست کامل هکهای CSS رو در اینجا ببینید.

حاشیه دو برابر :

این مشکل به این صورت است که ، مثلا شما میگین مقدار حاشیه 50 باشه ، ولی IE6 میاد و حاشیه رو 100 در نظر میگیره. این اتفاق بیشتر در زمانی اتفاق میوفته که عنصرتون Dispaly:block باشه.

برای حل این مشکل باید با استفاده از همون روش توضیحات شرطی و ... ، display این عنصر رو inline قرار بدین. با این کار مشکلتون به احتمال زیاد حل میشه.

نادیده گرفته شدن Padding برای دکمه ها :

این مشکل به این صورت است که شما مثلا میگید این دکمه 50 پیکسل Padding داره ، ولی مرورگرهای IE6 و IE7 از اون صرف نظر میکنن و انگار نه انگار که ما گفتیم 50 باشه.

برای حل این مشکل باید با استفاده از همون توضیحات شرطی و ... ، overflow: visible قرار بدین. با این کار مشکل حل خواهد شد.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

حاشیه های منفی :

وقتی شما به دلایلی برای یکی از المنتهای سایتتون ، margin رو عدد منفی قرار میدین ، این مقدار منفی در IE6 خوب نمایش داده نمیشه و مشکل داره.

برای حل این مشکل باید برای اون المنت position:relative قرار بدین.

خب دوستان من تعدادی از این مشکلات ( bugs ) رو براتون توضیح دادم.

اگر خواستید که با دیگر باگهای IE و روشهای حل اونا آشنا بشین ، به این لینک مراجعه کنید.

در نهایت هم میتونین به این لینک برید و ببینید که چند درصد از افراد در سر تا سر جهان از IE6 استفاده میکنن.

امیدوارم بدردتون خورده باشه.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    عالی و کاربردی! خدا قوت!

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram