似乎Internet Explorer(IE)的宽度包含填充,而Firefox(FF)则没有.

我怎样才能使两者行为一致?

推荐答案

  • IE used to use the more-convenient-but-non-standard "border-box" box model. In this model, the width of an element includes the padding and borders. For example:
    #foo { width: 10em; padding: 2em; border: 1em; }
    would be 10em wide.

  • In contrast, all standards-fearing browsers default to the "content-box" box model. In this model, the width of an element does not include padding or borders. For example:
    #foo { width: 10em; padding: 2em; border: 1em; }
    will actually be 16em wide: 10em + 2em padding for each side, + 1em border for each edge.

如果您使用带有valid markupgood doctypeappropriate headers的现代版本IE,它将遵循该标准.否则,您可以通过以下方式强制现代兼容标准的浏览器使用"边框":

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

The first declaration is needed for Opera, the second is for Firefox, the third is for Webkit and Chrome.

这是我几年前做的一个简单测试,用来测试您的浏览器支持什么框大小声明:http://phrogz.net/CSS/boxsizing.html

Note that Webkit (Safari and Chrome) do not support the 100 box model via any declaration.

Css相关问答推荐

Javascript Splitter Divider hover color css

下拉面板未与Angular中的下拉文本框垂直对齐

如何在WooCommerce产品页面中减少属性下拉菜单之间的空间

如何仅使用CSS Select 器根据列表中第n个项的子项属性 Select 该项

CSS Select 标签旁边的文本并输入

当滚动量较小时,在滚动问题上动画粘性导航

将框架放入 bootstrap 模式的正确方法是什么?

对 CSS 容器查询使用多个条件

Angular 导航栏问题

如何将 Google 字体链接到我的 Nuxt 文件?

CSS Stepper - LI After Overlaying LI Before

在同一旋转中以度数变换旋转

在所有移动设备中禁用滚动

为什么 .class:last-of-type 不能按我的预期工作?

水平列表项

溢出的文本可以居中吗?

输入和文本字段中的背景 colored颜色

是否允许在链接中嵌套链接?

background-position-x (background-position-y) 是标准的 W3C CSS 属性吗?

使用没有设置宽度或高度的边界半径的胶囊形状?