问题标签 [border-box]

首先让我说 Internet Explorer 8 似乎完全忽略了box-sizing:border-box; 盒子上的声明，当它也设置了最小高度时（这篇文章证实了这一点：https ://stackoverflow.com/a/11714178/3355252 ）。

现在让我描述一下我需要完成的工作。这是我的网站（非常简化）：http: //jsfiddle.net/ttKP3/。Doctype 是 HTML 4.01 Strict。

我需要的是屏幕底部的页脚和从上到下填充整个屏幕的主框。此外，当内容变大时（在 JSFiddle 中单击Add content几次），我需要放大主框并相应地移动页脚。

它在 Chrome 和 Firefox 中渲染得很好。您可能无法在 IE8 中运行它（它不会呈现 JSFiddle），但main上的边框属性被完全忽略，因此主框比应有的高 200px -页脚低于可见屏幕区域。

由于它看起来无法通过使用border-box和min-height来处理，我正在寻找 IE8 的任何其他解决方案。我想到的唯一一个是使用calc，即height: calc(100% - 200px); 但 IE8 也不支持。顺便说一句，当在 IE8 中运行时，我有条件在html元素上添加ie8类，所以我不需要跨浏览器解决方案 - 只需 CSS 即可在该特定浏览器中获得所需的布局。

如果已经应用了特定样式，我有一个类应该使用一个规则，如果已经应用了不同的样式，则应该使用另一个规则。例如，假设有人包含我的样式表并box-sizing设置为border-box，我如何检查我的班级是否会应用这样的规则？

我在 FF 中测试网站时遇到了一个奇怪的问题。

情况是这样的：

• box-sizing: border-box适用于一切。
• 我有一个浮动包装器<div>，高度固定。
• 包装器内部是一个<img>with height: 100%。

当我向包装器添加填充时，我希望包装器保持相同的高度，并且图像保持相同的纵横比，但缩小以适应高度减去填充。包装器的宽度应更改以匹配图像的新宽度以及填充。

这在 OSX 和 Win7 上的 Chrome 和 IE 中的行为与预期的一样，但在 FF 中，包装器的宽度似乎保持不变，就好像没有添加填充一样。

我是否遗漏了什么，或者这是在 Firefox 中实现 box-sizing 的错误？

这个小提琴演示了这个问题：

http://jsfiddle.net/3j43Y/1/

截图：

第一张图片是 Firefox 中的结果，第二张是 Chrome 中的结果。

我想制作一个内容垂直居中的框，但如果内容溢出，也会滚动。我可以使用一个带有vertical-align:middle的表格来实现垂直居中，但是td的滚动不能溢出，所以我在td里面放了一个滚动的div，让它的高度为：100%。这很好，直到我尝试给滚动 div 一些填充，这使得它对于 td 来说太宽了，所以我给它 box-sizing:border-box. 然后突然在 div 上有一个顶部和底部边距！

哇！？

http://codepen.io/jessehattabaugh/pen/GIjiL

绿线和红线之间不应该有任何空间，但它确实存在！如果您更改绿色 div 上的填充，神秘的边距会发生变化。就好像 height: 100% 实际上是 100% - 填充或其他东西。如果您删除填充或 box-sizing:border-box 它就会消失。

奖励积分：为什么 FF 不尊重桌子的高度：Chrome/Saf 遵循 50% 规则？

更新：有些人建议修复边框折叠或边框间距，但这是我将这些规则应用于表格后的样子； 表格单元格的红色边框与蓝色表格边框一起折叠，但绿色 div 的边框上方和下方仍有空间。也许尝试调整浏览器的高度，看看会发生什么。

请参阅此链接中 CSS 的第 12 行：http: //jsfiddle.net/NLTf9/

在第 12 行，我需要至少 .0743em 的边框宽度才能使其在 Chrome 和 Opera 的最新版本中可见。（我的意思是输入和按钮的边界）

对于 .0742em，边框不可见。我不明白的是 1em = 16px 所以 1px = .0625em 甚至 .0742em > .0625em 为什么浏览器不能显示边框？

这个问题的原因是什么？请注意，box-sizing: border-box;如果它很重要，我会使用它！

如果原因是这些浏览器无法显示，如果显示宽度值 < 1px 那么为什么在这里 .0743em = 1px？

我想我不知道并且在这里遗漏了一些重要的方程式！你能解释一下吗？

问候

我是CSS3的新手，最近在学习border-image属性，当我阅读W3C文档时： http: //dev.w3.org/csswg/css-backgrounds/#border-image-width

我发现以下几行：

边框图像绘制在称为边框图像区域的区域内。这是一个默认情况下边界对应于边框框的区域，请参阅'<code>border-image-outset'。

那么，“边框图像区域”和“ border-box”究竟是什么意思？以及border-image-width和border-image-outset的效果是什么？我认为 W3C 文档并没有很清楚地解释它。

提前致谢！

// 编辑：在此处查看此小提琴：http: //jsfiddle.net/hotu2n91/如您所见，这是与最小测试环境相同的问题

我在定位导航时遇到问题。当您阅读时，您可以在此处查看问题：http: //jsfiddle.net/vgugd8no/

如您所见，我也有一个position:fixed;叠加层和一个导航position:fixed;。现在我想从导航中删除例如 20px，但保持 100%。所以该值将是 100%-20px。这是box-sizing:border-box;为了什么。但目前它在 FireFox 中不起作用，我需要一些帮助。我想调整导航，使其不会与内容滚动条重叠。为什么我的box-sizing:border-box;不起作用？

CSS 受害者在这里

为什么是以下样式：

胜过这个：

?

使用以下源代码，我有两个问题：

1. 照原样，底部阴影不出现，除了最后一行

   

2. 如果我将background-color:white;语句从TD元素转移到TR元素，那么阴影在任何地方都有效，除了包含“特殊”DIV 的行之前的那个。

   

改变我正在开发的应用程序构建表格的方式非常困难，因此我无法从 DIV 中移动 special1 和 special2 类。

在任何情况下，我怎样才能使这个亮点工作？

源代码

我有一个固定纵横比的容器。

我有一个最大宽度和蜡高的图像。图像需要包含在容器的边界内。

我在 Chrome 中工作正常，但在 Firefox 中失败。

这是一个小提琴：http: //jsfiddle.net/nqkpszxz/2/