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

- visibility ٢ mode_comment

در این مطلب میخوام در مورد موضوعی صحبت کنم که مطمئنا برای همه درد سر ساز شده و اونم چیزی نیست جز 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 استفاده میکنن.

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

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

comment دیدگاه کاربران
علی

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

محمد اسفندیاری

خواهش داداش
موفق باشی

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.