حل مشکلات قالب های طراحی شده با IE

[IACbook 0]

درود

( ارائه چند نکته با جازه دوست خوبم امیر رضا تهرانی عزیز )

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

راههای زیادی برای حل این مشکل وجود دارد که چند مورد را به اختصار در اینجا بیان می کنم و دوستان نیز اگر نظر و یا تکنیکی دارند ممنون میشم در اینجا ارائه بدهند.

روش های حل مشکل طراحی قالب ها با اینترنت اکسپلورر را به اصطلاح ه-ک کردن مرورگر IE می گویند. حتما" کسانی که طراحی قالب انجام میدهند میدونن که margin و padding در مرورگر اینترنت اکسپلورر و سایر مرورگرها به نحو دیگری عمل می کند که این باعث بهم ریختن قالب هایی می شود که بر اساس مرورگر فایرفاکس تنظیم شده اند...

منظور از ه-ک کردن مرورگر اینست که در سی اس اس قالب خود دستورات را به نحوی بکار ببریم که بتوانیم در مرورگر اینترنت اکسپلورر نیز همان نتیجه را بگیریم.

مشکل اینجاست وقتی که از دستورات margin و padding در سی اس اس قالب خود استفاده می کنیم این مقادیر بکار رفته در مرورگر IE تقریبا" به اندازه نصف و یا کمتر عمل می کنند!

بنابراین یک سی اس اس قائدتا" نمی تواند همزمان با هر دو مرورگر همخوانی داشته باشد! در نتیجه استفاده از تکنیک های زیر رایج است:

یکبار قالب را برای فایرفاکس طراحی می کنیم و اکنون برای اینکه قالب طراحی شده با مرورگر IE مشکلی نداشته باشد در همان سی اس اس می توانیم مقادیر padding , margin را برای اینترنت اکسپلورر هم قرار دهیم به نحوی که فایرفاکس نتواند این مقادیر را ببیند اما IE ببیند. برای این کار بعنوان مثال دستورات زیر بکار می روند :

مثال :

padding-left:15px
padding-left:30px*

بکار بردن علائمی مانند " * " و " # " باعث می شود تا این مقادیر را ie ببیند اما فایرفاکس نبیند.

اما روش بالا ممکنه مشکل رو در IE6 حل کنه ، اما در IE7 ممکن است دستور ارائه شده باعث خراب شدن قالب شما شود!

بنابراین اگر با چنین مشکلی مواجه شدید بهتر است از دستور important استفاده کنید. این دستور به مرورگر ما ارجحیت می دهد و این تگ را مرورگرهای جدید بخوبی میشناسند و مرورگرهای قدیمی آنرا نمی بینند!

بنابراین دستوری را که می خواهیم ie6 ببیند را بصورت معمولی و دستوری را که می خواهیم ie7 یا فایرفاکس ببیند همراه با important می نویسیم.

این کار را شاید در سی اس اس های قالب های شرکت های بزرگ دیده باشید و دلیلش اینه...

مثال :

padding-left:20px
padding-left:10px !important

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

مثال :

”>

همچنین می توانید موارد مشترک را در یک سی اس اس و موارد غیر مشترک را در سی اس اس های جداگانه بکار ببرید .......

دوستان اگر راهکارهای دیگری برای این مورد دارند در این تاپیک ارائه دهند. ( مخصوصا" استاد گرامی و دوست خوبم امیررضا تهرانی عزیز )

(اگر تاپیک رو در جای درستی نزدم انتقال بدید - می بخشید . )

[امیررضاتهرانی 612]

در ادامه بگم

مهمترین عامل برای سازگاری با ie مخصوصا 6 تعریف width و hight برای موقعیت ها هست

کلا باید فرض کنید ie یک بچه خنگ بیشعور است که همه چیز را باید با ذکر جزئیات بهش بگید