موضوع سازگاری در مرورگرها یا Compatibility view

فرض کنید 250 پیکسل فضا در عرض وجود دارد و می خواهیم یک عنصر با عرض کلی 250 پیکسل را در آن جای دهیم:

مثال (سازگاری در مرورگرها یا Compatibility view)

width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
خودتان امتحان کنید »

عرض کلی یک عنصر به صورت زیر محاسبه می شود:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

ارتفاع کلی یک عنصر به صورت زیر محاسبه می شود:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

مثال بالا در IE8 و نسخه های قبل از آن بطور صحیح نمایش داده نمی شود.

در واقع در IE8 و نسخه های قبلی آن Padding و Border عنصر مورد نظر، در عرضی که عنصر اشغال می کند، دخالت داده می شوند.

برای حل شدن این مشکل فقط کافی است که یک DOCTYPE به صفحه HTML اضافه شود:

مثال (سازگاری در مرورگرها یا Compatibility view)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
خودتان امتحان کنید »

آموزش های مرتبط

آموزش CSS-مفهوم Box