سازگاری (Compatibility view)
زمانی که می خواهید با استفاده از یکی از روش های موجود برای ترازبندی عناصر استفاده کنید، جهت جلوگیری از تفاوت ظاهر، در مرورگرهای مختلف، بسیار مناسب است که برای عنصر <body> خصوصیات padding و margin را با مقدار "0" تنظیم کنیم.
زمانی که از خصوصیت position برای تراز بندی استفاده می کنید، در مرورگر IE8 و نسخه های قبلتر یک مشکل بوجود می آید. در واقع اگر یک عنصر ظرف (container element) با عرض مشخص شده داشته باشیم (در این مورد < "div class="container>) و یک DOCTYPE! در بالای صفحه HTML اعلان نشده باشد با مشکل زیر، روبرو خواهیم شد:
IE8 و نسخه های قبلتر به اندازه 17px به عنوان حاشیه راست (margin) اضافه می کند. به نظر می رسد که این فضا برای scrollbar رزرو شده است. بنابراین زمانی که از خصوصیت position استفاده می کنید همیشه یک DOCTYPE! در بالای صفحه HTML اعلان کنید.
مثال (مشکل مرورگرها با ترازبندی عناصر و راه حل آن)
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
