مرورگر وب امروز طولانی از روزهای دیوانه است که هر نوع هماهنگی متقابل مرورگر تفکر آرایشی بود. مرورگرهای وب امروز بسیار مطابق با استاندارد هستند. آنها با هم به خوبی اجرا می شوند و نمایش صفحات نسبتا سازگار در مرورگرهای مختلف را ارائه می دهند. این شامل آخرین نسخه های گوگل کروم، مایکروسافت ادج، موزیلا فایرفاکس، اپرا، سافاری و مرورگرهای مختلف موجود در تعداد زیادی از دستگاه های تلفن همراه است که امروز برای دسترسی به وب سایت استفاده می شود.
در حالی که پیشرفت مطمئنا زمانی صورت گرفته است که در مورد مرورگرهای وب و نحوه نمایش آنها CSS صورت می گیرد، هنوز اختلافات بین این گزینه های نرم افزاری مختلف وجود دارد. یکی از ناهماهنگی های رایج این است که چگونه این مرورگرها به طور پیش فرض محدوده، حاشیه و محدوده را محاسبه می کنند.
از آنجا که این جنبه های مدل جعبه تمام عناصر HTML را به اثبات می رساند و به دلیل اینکه آنها در ساخت پوسته های صفحه ضروری هستند، صفحه نمایش نامناسب بدان معنی است که یک صفحه ممکن است در یک مرورگر عالی ظاهر شود، اما کمی در یکی دیگر از آنها ظاهر می شود. برای مقابله با این مشکل، بسیاری از طراحان وب، این جنبه های مدل جعبه را عادی می کنند. این عمل نیز به عنوان "صفر کردن" ارزش ها برای حاشیه ها، پانل ها و مرزها شناخته می شود.
یک یادداشت در پیش فرض مرورگر
مرورگرهای وب همه دارای تنظیمات پیش فرض برای جنبه های صفحه نمایش خاصی هستند. برای مثال، لینک ها آبی هستند و به طور پیش فرض تحت تأثیر قرار می گیرند. این در مرورگرهای مختلف هماهنگ است و اگرچه این چیزی است که اغلب طراحان آن را با توجه به نیازهای طراحی پروژه خاص خود تغییر می دهند، این واقعیت که همه آنها با همان پیش فرض ها شروع می شود، باعث می شود که این تغییرات آسان تر شود. متاسفانه، مقدار پیش فرض برای حاشیه ها، حاشیه ها، و مرزها از یکسان بودن سطح متقابل مرورگر استفاده نمی کنند.
ارزش های عادی برای حاشیه ها و پوشش
بهترین راه برای حل مشکل مدل جعبه متناقض این است که تمام حاشیه ها و مقادیر عناصر HTML را به صفر برسانیم. چند راه وجود دارد که می توانید این کار را انجام دهید این است که این قاعده CSS را به شیوه خود اضافه کنید:
* {حاشیه: 0؛ padding: 0؛ }این قانون CSS از شخصیت * یا wildcard استفاده می کند. این شخصیت به معنی "همه عناصر" است و اساسا هر عنصر HTML را انتخاب می کند و حاشیه ها و پلاگین ها را به 0 می بندد. با وجود این که این قانون بسیار نامشخص است، زیرا در شیوه ی خارجی آن است، خاصیت بالاتر از مرورگر پیش فرض ارزش ها انجام می دهند از آنجایی که پیش فرض ها همان چیزی است که شما مجددا نوشتار می کنید، این یکی از سبک های انجام شده شما را انجام می دهد.
گزینه دیگری این است که این مقادیر را به عناصر HTML و بدن اعمال کنید. از آنجا که همه عناصر دیگر در صفحه شما بچه های این دو عنصر هستند، آبشار CSS باید این مقادیر را به تمام آن عناصر دیگر اعمال کند.
html، body {margin: 0؛ padding: 0؛ }این طرح شما را در همان مکان در تمام مرورگرها شروع خواهد کرد، اما یک چیز برای یادآوری این است که هنگامی که تمام حاشیه ها و پرده ها را روشن می کنید، شما باید به صورت انتخابی آنها را برای قسمت های خاصی از صفحه وب خود باز کنید تا به ظاهر برسید و احساس می کنید که طراحی شما از آن درخواست می کند.
مرز ها
شما ممکن است فکر کنید "اما هیچ مرورگر در اطراف عنصر بدن به طور پیش فرض مرزی نیست." این دقیقا درست نیست نسخه های قدیمیتر اینترنت اکسپلورر دارای مرز شفاف یا نامرئی در اطراف عناصر هستند. مگر اینکه مرز را به 0 تنظیم کنید، این مرز می تواند طرح های صفحه شما را خراب کند. اگر تصمیم گرفتید که برای حمایت از این نسخه های قدیمی از اینترنت اکسپلورر ادامه دهید، باید با اضافه کردن زیر به سبک های بدن و HTML خود، این موضوع را در نظر بگیرید:
HTML، بدن {
حاشیه: 0px؛
padding: 0px؛
مرز: 0px؛
}
شبیه به اینکه حاشیه ها و پرده ها را خاموش کرده اید، این سبک جدید نیز مرزهای پیش فرض را خاموش می کند. شما همچنین می توانید با استفاده از انتخاب گرامر پیش از این در مقاله، همان کار را انجام دهید.
مقاله اصلی جنیفر کریینین. توسط Jeremy Girard در تاریخ 27/9/16 ویرایش شده است.