۲۸-۵-۱۳۹۰, ۰۷:۳۲ عصر
سلام دوستان، همون طور که قبلا گفته بودم دنباله راه ی کامل و درست برای این مشکل هستم و بلاخره تونستم از منبع هایه مختلف مقاله ای رو جمع آوری کنم ، در اختیاره دوستان قرار میدم تا استفاده کنند..
یکی از بزرگترین مشکلاتی که طراحان وب با آن مواجه هستند، هیچ ارتباطی با طراحی ندارد. مرورگری به نام Internet Explorer 6. فقط به علت اینکه بسیاری از کاربران وب هنوز از این مرورگر استفاده می کنند، طراحان وب نمی توانند از تمام ظرفیت های CSS برای طراحی سایت هایشان استفاده کنند. شاید برای بسیاری از طراحان وب مثل خودم، بهترین راه مقابله با IE6 راهنمایی کاربران برای کنار گذاردن این مرورگر باشد. روش هایی نظیر نشان دادن سایت در پایین ترین ظرفیت ممکنه برای کاربران IE6، و یا نشان دادن هشدار به این عنوان که نمی توانید با استفاده از این مرورگر از امکانات سایت استفاده کنید.
اما به هر حال بسیاری از کاربران وب از این مرورگر استفاده می کنند و معمولا در بسیاری از اوقات مخصوصا در
سایت های تجاری یا دولتی چاره ای نیست جز اینکه به هر طریق ممکن سایت را به گونه ای طراحی کرد که کسانی که از IE6 استفاده می کنند نیز بتوانند به سایت دسترسی داشته باشند.
در اینجا من سعی میکنم تا برای بعضی مشکلات اساسی که در IE6 وجود دارد راه حل های موجود را بیان کنم.
نوشتن کد فقط برای IE6
خوشبختانه با وجود همه ی مشکلات اساسی موجود در IE6 و خودخواهی های مایکروسافت برای عدم انطباق با استانداردهای وب، راهی برای نوشتن کدهایی که فقط در IE6 دیده شوند وجود دارد. با استفاده از Conditional Comments.
بدین ترتیب می توان کدهایی در صفحات وب قرار داد که تنها در نگارش های خاص از IE دیده شود. مثلا در کد بالا، در صورتی که IE نگارش ۶ باشد، کدی که در درون comment قرار دارد نیز جزئی از صفحه وب خواهد بود. اما بقیه نگارش های IE و باقی مرورگرها همه ی آن را به عنوان توضیحات درنظر می گیرند و چیزی در صفحه وب قرار نمی گیرد.
با استفاده از این روش می توان یک کد javascript خاص، یا یک style sheet مجزا را برای نگارش خاصی از IE در صفحه وب وارد کرد. به عنوان مثال:
بعد می توان همه ی styleهایی که مربوط به IE6 هستند را در این فایل css قرار داد.
البته Conditional comments فقط در IE6 کاربرد ندارند و می توان هر نسخه ای، یا مجموعه ای از نگارش های IE را تعیین کرد. مثلا نگارش های کمتر یا معادل IE7. برای اطلاعات بیشتر می توانید به Microsoft – About Conditional Comments مراجعه نمایید.
Float Clear
مشکلی که نه فقط در IE6 و بلکه در مرورگرهای بسیاری وجود دارد، انجام ندادن clearing برای عناصر داخلی float شده است.
بدین معنا که انتظار می رود که مثلا اگر یک تصویر را در یک div قرار دهیم و آن تصویر را به یک سمت float کنیم، آن div به طور کامل تصویر را در بر گرفته باشد و حداقل طول و عرض معادل تصویر داشته باشد.
اما گاهی چنین اتفاقی نمیفتد و به اطلاح می گویند عنصر شناور داخلی به درستی توسط دربرگیرند خود clear نشده است.
خوشبختانه راه حل بسیار مشهور clearfix وجود دارد که به اصطلاح یک css hack .است
برای استفاده از این css hack کافی است کد css مربوطه را در فایل های css قرار دهیم و سپس به کلاس های div کلاس clearfix را نیز اضافه کنیم.
البته راه حل ساده تر این است که برای خصیصه overflow از div مقداری تعیین کنیم.
البته می توان مقادیر دیگری را نیز برای width و overflow تعیین کرد و یا حتی به جای width به height مقدار داد.
همچنین در صورتی که مقداردهی به overflow باعث به هم ریختگی طراحی بشود، می توان تنها به یکی از overflow-x و overflow-y مقدار داد.
رفع مشکل دوبرابر شدن حاشیه
در صورتی که عنصری مانند <div> را در یک سمت float کنیم، و بعد در همان سمت یک حاشیه یا همان margin برای آن قرار دهیم، IE6 مقدار آن margin را دوبرابر می کند!
ساده ترین راه حل برای این مشکل آن است که خصیصه display برای آن عنصر را از block به inline تغییر دهیم.
رفع بعضی از مشکلات IE6 با تعیین hasLayout
به عنوان آخرین نکته، بسیاری از مشکلات IE6 را می توان با به اصطلاح set کردن hasLayout رفع کرد. hasLayout یکی از تعیین کننده های داخلی مرورگر IE6 است که در صورتی که همه چیز به خوبی کار می کرد نیازی نبود تا هیچ وقت در مورد آن بدانیم.
hasLayout یک خصیصه برای هر یک از عناصر html است که خود IE6 در درون خود برای بررسی نحوه نمایش عناصر مقدار آن را تعیین می کند. معمولا برای اینکه نمایش عناصر وقت گیر نباشد و بازدهی بالا رود، IE6 برای بعضی عناصر مقدار آن را false قرار می دهد.
گاهی اوقات مشکلات نمایش عناصر در صورتی که hasLayout در آنها true باشد رفع می شود. بنابراین خوب است بدانیم چه طور می توانیم کاری کنیم که IE6 مقدار آن را true قرار دهد.
با تعیین مقادیر زیر برای خصیصه های عناصر، آنها دارای layout می شوند
بنابراین یکی از سریع ترین روش ها برای حل مشکل نمایش در IE6 این است که فرضا برای آن عنصر width یا height تعیین کنیم.
برای اطلاعات بیشتر در مورد hasLayout می توانید به دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مراجعه نمایید.
در آخر
در این نوشته سعی کردم اصلی ترین نکات مورد نیاز برای اینکه صفحات وب تا حد قابل قبولی در IE6 به درستی نمایش داده شود را بیان کنم.که حداقل این مشکل در این انجمن حل بشه.. اگرچه مشکلات IE6 به همین موارد ختم نمی شود و البته راه حل ها هم بسیار است، ولی به عنوان یک نوشتار کلی، به نظر کافی می رسد.
مخصوصا من خودم عقیده دارم حالا که نمی توانیم کاربران IE6 را متقاعد کنیم تا از آن دست بردارند، و یا شاید برای آنها امکان این موضوع وجود نداشته باشد، بهتر است لااقل متوجه شوند که همه چیز در مرورگر آنها به درستی کار نمی کن.
منبع : دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
منبع:www.unicloob.com
یکی از بزرگترین مشکلاتی که طراحان وب با آن مواجه هستند، هیچ ارتباطی با طراحی ندارد. مرورگری به نام Internet Explorer 6. فقط به علت اینکه بسیاری از کاربران وب هنوز از این مرورگر استفاده می کنند، طراحان وب نمی توانند از تمام ظرفیت های CSS برای طراحی سایت هایشان استفاده کنند. شاید برای بسیاری از طراحان وب مثل خودم، بهترین راه مقابله با IE6 راهنمایی کاربران برای کنار گذاردن این مرورگر باشد. روش هایی نظیر نشان دادن سایت در پایین ترین ظرفیت ممکنه برای کاربران IE6، و یا نشان دادن هشدار به این عنوان که نمی توانید با استفاده از این مرورگر از امکانات سایت استفاده کنید.
اما به هر حال بسیاری از کاربران وب از این مرورگر استفاده می کنند و معمولا در بسیاری از اوقات مخصوصا در
سایت های تجاری یا دولتی چاره ای نیست جز اینکه به هر طریق ممکن سایت را به گونه ای طراحی کرد که کسانی که از IE6 استفاده می کنند نیز بتوانند به سایت دسترسی داشته باشند.
در اینجا من سعی میکنم تا برای بعضی مشکلات اساسی که در IE6 وجود دارد راه حل های موجود را بیان کنم.
نوشتن کد فقط برای IE6
خوشبختانه با وجود همه ی مشکلات اساسی موجود در IE6 و خودخواهی های مایکروسافت برای عدم انطباق با استانداردهای وب، راهی برای نوشتن کدهایی که فقط در IE6 دیده شوند وجود دارد. با استفاده از Conditional Comments.
کد:
<!–[if IE6]>
Oops! Looks like you’re still using Internet Explorer 6!
You deserve better!
<![endif]–>بدین ترتیب می توان کدهایی در صفحات وب قرار داد که تنها در نگارش های خاص از IE دیده شود. مثلا در کد بالا، در صورتی که IE نگارش ۶ باشد، کدی که در درون comment قرار دارد نیز جزئی از صفحه وب خواهد بود. اما بقیه نگارش های IE و باقی مرورگرها همه ی آن را به عنوان توضیحات درنظر می گیرند و چیزی در صفحه وب قرار نمی گیرد.
با استفاده از این روش می توان یک کد javascript خاص، یا یک style sheet مجزا را برای نگارش خاصی از IE در صفحه وب وارد کرد. به عنوان مثال:
کد:
<!–[if IE6]>
<link rel=”stylesheet”
href=”http://www.superdl.com/LessEqualIE6.css” type=”text/css”/>
<![endif]–>البته Conditional comments فقط در IE6 کاربرد ندارند و می توان هر نسخه ای، یا مجموعه ای از نگارش های IE را تعیین کرد. مثلا نگارش های کمتر یا معادل IE7. برای اطلاعات بیشتر می توانید به Microsoft – About Conditional Comments مراجعه نمایید.
Float Clear
مشکلی که نه فقط در IE6 و بلکه در مرورگرهای بسیاری وجود دارد، انجام ندادن clearing برای عناصر داخلی float شده است.
بدین معنا که انتظار می رود که مثلا اگر یک تصویر را در یک div قرار دهیم و آن تصویر را به یک سمت float کنیم، آن div به طور کامل تصویر را در بر گرفته باشد و حداقل طول و عرض معادل تصویر داشته باشد.
اما گاهی چنین اتفاقی نمیفتد و به اطلاح می گویند عنصر شناور داخلی به درستی توسط دربرگیرند خود clear نشده است.
خوشبختانه راه حل بسیار مشهور clearfix وجود دارد که به اصطلاح یک css hack .است
برای استفاده از این css hack کافی است کد css مربوطه را در فایل های css قرار دهیم و سپس به کلاس های div کلاس clearfix را نیز اضافه کنیم.
کد:
.clearfix:after{
content:” “;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{display:inline-table}
/* Hides From IE-mac */
* html .clearfix{height:1%;}
.clearfix{display:block}
/* End Hide From IE-mac */کد:
overflow:hidden;
width:100%;همچنین در صورتی که مقداردهی به overflow باعث به هم ریختگی طراحی بشود، می توان تنها به یکی از overflow-x و overflow-y مقدار داد.
رفع مشکل دوبرابر شدن حاشیه
در صورتی که عنصری مانند <div> را در یک سمت float کنیم، و بعد در همان سمت یک حاشیه یا همان margin برای آن قرار دهیم، IE6 مقدار آن margin را دوبرابر می کند!
ساده ترین راه حل برای این مشکل آن است که خصیصه display برای آن عنصر را از block به inline تغییر دهیم.
رفع بعضی از مشکلات IE6 با تعیین hasLayout
به عنوان آخرین نکته، بسیاری از مشکلات IE6 را می توان با به اصطلاح set کردن hasLayout رفع کرد. hasLayout یکی از تعیین کننده های داخلی مرورگر IE6 است که در صورتی که همه چیز به خوبی کار می کرد نیازی نبود تا هیچ وقت در مورد آن بدانیم.
hasLayout یک خصیصه برای هر یک از عناصر html است که خود IE6 در درون خود برای بررسی نحوه نمایش عناصر مقدار آن را تعیین می کند. معمولا برای اینکه نمایش عناصر وقت گیر نباشد و بازدهی بالا رود، IE6 برای بعضی عناصر مقدار آن را false قرار می دهد.
گاهی اوقات مشکلات نمایش عناصر در صورتی که hasLayout در آنها true باشد رفع می شود. بنابراین خوب است بدانیم چه طور می توانیم کاری کنیم که IE6 مقدار آن را true قرار دهد.
با تعیین مقادیر زیر برای خصیصه های عناصر، آنها دارای layout می شوند
کد:
width: anything other than “auto”
height: anything other than “auto”
float: left or right
display: inline-block
zoom: anything other than “normal”برای اطلاعات بیشتر در مورد hasLayout می توانید به دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مراجعه نمایید.
در آخر
در این نوشته سعی کردم اصلی ترین نکات مورد نیاز برای اینکه صفحات وب تا حد قابل قبولی در IE6 به درستی نمایش داده شود را بیان کنم.که حداقل این مشکل در این انجمن حل بشه.. اگرچه مشکلات IE6 به همین موارد ختم نمی شود و البته راه حل ها هم بسیار است، ولی به عنوان یک نوشتار کلی، به نظر کافی می رسد.
مخصوصا من خودم عقیده دارم حالا که نمی توانیم کاربران IE6 را متقاعد کنیم تا از آن دست بردارند، و یا شاید برای آنها امکان این موضوع وجود نداشته باشد، بهتر است لااقل متوجه شوند که همه چیز در مرورگر آنها به درستی کار نمی کن.
منبع : دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
منبع:www.unicloob.com