چگونگی حل باگهای ( Bugs ) متداول Internet Explorer
در این مطلب میخوام در مورد موضوعی صحبت کنم که مطمئنا برای همه درد سر ساز شده و اونم چیزی نیست جز 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 به بالا و …، اجرا نمیشه.
حاشیه دو برابر :
این مشکل به این صورت است که ، مثلا شما میگین مقدار حاشیه ۵۰ باشه ، ولی IE6 میاد و حاشیه رو ۱۰۰ در نظر میگیره. این اتفاق بیشتر در زمانی اتفاق میوفته که عنصرتون Dispaly:block باشه.
برای حل این مشکل باید با استفاده از همون روش توضیحات شرطی و … ، display این عنصر رو inline قرار بدین. با این کار مشکلتون به احتمال زیاد حل میشه.
نادیده گرفته شدن Padding برای دکمه ها :
این مشکل به این صورت است که شما مثلا میگید این دکمه ۵۰ پیکسل Padding داره ، ولی مرورگرهای IE6 و IE7 از اون صرف نظر میکنن و انگار نه انگار که ما گفتیم ۵۰ باشه.
برای حل این مشکل باید با استفاده از همون توضیحات شرطی و … ، overflow: visible قرار بدین. با این کار مشکل حل خواهد شد.
حاشیه های منفی :
وقتی شما به دلایلی برای یکی از المنتهای سایتتون ، margin رو عدد منفی قرار میدین ، این مقدار منفی در IE6 خوب نمایش داده نمیشه و مشکل داره.
برای حل این مشکل باید برای اون المنت position:relative قرار بدین.
