مدتی میشه که دارم از display:inline-block به جای float استفاده می‌کنم. البته نه همه جا ولی خب درصد استفاده‌ش روز به روز داره برام بیشتر میشه.
اوایل به خودم می‌گفتم برای چی باید از float استفاده کنم؟ مشکلات float تا حدودی می‌شناسم و می‌تونم حلشون کنم! ولی بعد گفتم خب چه کاریه از چیزی استفاده کن که مشکلاتش کمتر و کمتر باشه. البته نکته همینه که inline-block هم مشکلات خاص خوش رو داره و یه ویژگی جادویی نیست.
مشکلات float
کاربرد اصلی استفاده از float پخش شدن متن نوشته‌ها به دور عکس یا عنصر دیگه بوده یه جورهایی شبیه به صفحات روزنامه.
مشکل شناخته شده‌ای که وجود داشت این بود که عنصر والدی که داخلش عناصر float شده بودند اون‌ها رو به رسمیت نمی‌شناخت! پس از اینکه عناصری رو float می‌کردیم باید با ترفند clearfix که با روش‌های مختلفی هم اجرا میشد عناصر بعدی و والد رو به حالت عادی بر می‌گردوندیم.
مشکل دیگه‌ای که داره اینه که نمی‌تونید یک عنصر رو به وسط float کنید. یعنی اینکه یا مجبور هستید که اون رو به راست یا چپ float کنید.
تازه یه مشکل دیگه هم وجود داره و اون اینکه عناصر بالا و پایین float قابلیت margin رو از دست می‌دند!
مشکلات display:inline-block
چیزی که واضحه اینه که display:inline-block برای کنار هم قرار دادن عناصر توی یک خط و به حالت بلاک ماننده. ولی چیزی که توی استفاده ازش خیلی مهمه اینه که white spaceها یا به قولی فاصله و تب و نیو لاین رو باید در نظر بگیرید. یعنی اینکه inline-block وایت سپیس‌ها رو رندر می‌کنه. حالا مشکل کجاست؟ مشکل اینجاست که اگر شما پنج‌تا عنصر رو با عرض ۲۰ درصد قرار باشه توی یک خط قرار بدید منطقا باید کنار هم باشند ولی اگه وایت اسپیس بینشون باشه آخرین عنصر میفته پائین و این یعنی یه چیزی بینشونه که همون وایت سپیس‌ها هستند.
برای رفع این مشکل چند‌تا راه حل داریم. اولیش اینکه وایت سپیس‌ها رو کامنت کنیم.
- folan
- bahmaan
- bisar
یا اینکه وایت اسپیس ها رو حذف کنیم. اینطوری.
- foalan
- bahmaan
- bisar
ولی راهی که خودم ترجیحش می‌دم اینه که سایز فونت عنصر والدشون که توی این مثل ul هست رو صفر قرار بدیدم و بعد به عناصر داخلی دوباره سایز فونت مناسب بدیم. اینطوری.
ul { font-size: 0px; } li { font-size: 18px; }
پشتیبانی مرورگرها از inline-block
طبق سایت caniuse تقریبا همه مرورگرها از display: inline-block پشتیبانی می‌کنند. البته جای تعجب نیست که ie6 و ie7 یا حتی ie8 مشکلاتی داشته باشند باهاش همونجوری که دارند ولی راه حل‌هاش هم موجوده. گرچه من دیگه مدت‌هاست به فکر کاربران ie های نسخه پایین نیستم و دلیلی هم نمی‌بینم نگرانشون باشم.