问题标签 [box-sizing]

为什么这个例子中的 padding 不等于 300px？

• 浏览器在哪里得出它的计算，50% 是什么？

• 在下面的示例中，填充实际上随着容器的#Test变大而变小。

• 我实际上希望 的宽度#Test是动态的，但是出于本示例的目的，我已对其进行了修复。

• 以及如何获得 50% 的填充#Test？

注意：我不只是在寻找解决方案，而是在了解填充的工作方式。

我在这里找到了一个与我的几乎相同的案例。但是接受的答案对我不起作用，所以我希望我提出一个新问题是可以的。

下图是我想在所有主流浏览器（至少 IE8+、Firefox 和 Chrome）中实现的目标。放置在 TD 内的 INPUT 填充其父级的宽度和高度。

我的问题是我无法使用下面的代码片段在 Chrome 中完成它。提前致谢

更新：我在 Chrome 上的问题解释说：如果您仔细观察，顶部和底部边框有 1 或 2 像素的填充。这是我在 Windows 7 上的 Chrome 版本 47.0.2526.111 m（请在新窗口中打开以看得更清楚）

UPDATE2：样本上的大错误。DIV 在不使用 box-sizing 的情况下很好地适应其父级。我真正想要的是 INPUT 也能适应他们的父母。刚刚再次更新了我的代码片段。

我有一个一直在嗡嗡作响的 Rails 4.2.5 项目。

突然之间，我收到了这个错误：

这指向我的样式表include：

我知道这不是魔法，所以我一定做了什么。但我无法终生弄清楚它是什么。

我没有使用compass-rails我在参考此错误时看到的 gem。

我没有box-sizing在我的代码中直接引用任何地方。我正在使用，twitter-bootstrap-rails但到目前为止它没有引起任何问题并且运行良好。

任何人都可以对此有所了解，例如在哪里寻找参考资料，非常感谢。

更新

从那以后，我发现我正在使用以下宝石：

box-sizing在其 CSS 文件中有引用。但我仍然不知道如何修复错误。

更新 2

删除该 gem 以及对它的所有引用并不能解决问题。一定有其他宝石在使用它。

我有一个 CSS 菜单使用这里checkbox:checked的技巧

但是我的问题是，当菜单打开时，内容会从父项的一侧溢出div-如何使divs 流动，以便环绕到下一行并相互推动？

我看过Flexible Boxes，我以前从未使用过它们，但觉得这可能是正确的轨道。

我创建了一个JSFiddle来说明我正在尝试做的事情。

谢谢 ：）

编辑

我做了一些实验，它是填充和盒子尺寸的神奇组合 - 我也偶然发现了这篇有用的帖子 =>国际盒子尺寸意识日

编辑

HTML：

CSS：

我在一个应用程序站点上使用 bootstrap 4.0 缩小 css，我想在另一个站点的顶部注入。

这是文件：http ://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css

我遇到的问题是以下样式由于这些样式而影响了位于我的应用程序后面的站点：

我尝试修改 CSS，使其仅针对包装 div 中的所有内容，如下所示：

这没有用 - 有什么想法吗？

我可以在我的所有 murkup（所有项目）中使用box-sizing: border-box;吗？

例如：

因为计算实际宽度更容易，但是这种方法有什么缺点吗？

我正在学习为自己建立一个响应式网站。我的一张图像的顶部和底部边框上的 box-sizing 边框框有问题。我有两列不同高度的图像，我希望边缘匹配，但我也想要几个像素的空白来分隔每个图像。

我的问题是，当在顶部和底部边框上使用 box-sizing 边框框时，它们会停留在图像边缘之外，从而将下一个图像向下推几个像素，使其不再与底部边缘的邻居匹配。

我想在继续并在其他图像上添加边框之前解决这个问题。我是 CSS 新手，所以也许有一些非常明显的东西我错了？

任何帮助使边界保持在图像的内侧边缘将不胜感激！

我附上了正在发生的事情的屏幕截图。 边框问题

When using box-sizing: border-box in Safari, there is a bug affecting the height of an img element when using height: 100% and a padding on the parent element.

See this fiddle and test it on Chrome/Firefox versus Safari to see the difference: https://jsfiddle.net/Arko/66b9bt02/1/

Here is the full code for reference:

HTML:

CSS:

With border-box sizing, the img height should be 20px (50px div height minus 2x 15px padding). This is correct in Chrome and Firefox. But Safari displays the image at 30px height.

• If we test this in the width instead of height, no issue.
• If we remove the padding or comment-out the border-box style, no issue.
• If we test this with an other block element such as a div instead of an img, no issue.

I found no other instance of this issue reported. Is this a new webkit bug to be reported? Or am I missing something?

(Tested in Safari 9.1.1 and Webkit Nightly 202811)

我希望我的盒子的大小不会被边距和填充改变。

我想说我已经尝试了一切，但我拒绝相信这是真的。我正在尝试垂直对齐 div 内的图像。虽然它看起来有效，但我注意到图像上方的空间比下方更多。

经过一番调试，我发现这box-sizing: border-box是问题所在。但是因为我使用的是 Bootstrap（而且它似乎依赖它），所以我无法更改它。

请参阅下面的我的片段。单击“切换框大小”以打开或关闭框大小。

我希望你们能帮助我。