解决'填充'css问题的最佳方法

Question

<div style='width:500px; height:500px; padding:50px;'> </div>

由于IE和Firefox上"填充"的行为不同.解决这个问题的最佳方法是什么？

Answer 1

该IE盒模型(称为传统的盒模型),包括一个元件的宽度/高度填充和边界.

在IE盒子模型下,宽度为100px,每边2px填充,3px边框和每边7px边距的盒子将具有114px的可见宽度.

的W3C盒模型(这是标准盒模型),从排除了一个元件的宽度/高度填充和边界.

在W3C盒型号下,宽度为100px,每边2px填充,3px边框和每边7px边距的盒子的可见宽度为124px.

为了使IE使用W3C盒模型(这是其他浏览器使用的模型),您的页面需要以严格模式呈现.默认情况下,IE以Quirks模式呈现.

要在IE中触发严格模式,您必须指定doctype.您可以使用以下任何doctypes:

HTML4严格:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd" >

XHTML 1.0严格:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

您的doctype必须是首页出现在您的页面上.它甚至在<html>标签之前,在它自己的线上.

有关Quirks/Strict模式的更多信息,请访问:

CSS - Quirks模式和严格模式