问题标签 [border-box]

我意识到<input type="submit"/>有一个border-box盒子模型，而<input type="text"/>有一个content-box盒子模型。此行为存在于 IE8 和 FF 中。不幸的是，这使我无法将这种样式应用于大小均匀的输入：

这是 IE 和 FF 的正确行为吗？是否有解决此问题的跨浏览器方法？

考虑以下示例：

在支持border-box盒子大小的浏览器上，这是按我想要的方式呈现的：

正确渲染 http://img.skitch.com/20100522-c75mhdut2q32yc7u5r2tkft1n4.png

然而，在 IE 6/7 上，这呈现为：

IE 6/7 渲染 http://img.skitch.com/20100522-f5pkgnwwceaak3t8fqq2w16gfm.png

如何在 IE 6/7 中获得与在其他浏览器中相同的渲染效果，而不需要以像素为单位设置大小？

在表单上，​​我有一个选择和两个输入字段。这些元素是垂直对齐的。不幸的是，我无法让这些元素的宽度相等。

这是我的代码：

对于上面的例子，选择元素的最佳宽度是 198 或 199 像素（当然我试过 193 像素，但差别很大）。我认为，这取决于各种计算机和浏览器的分辨率，因为这些元素的宽度不相等（有时我认为差异约为 1 或 2 像素）。我试图在 div 或 table 行中设置这些元素，但它没有帮助。

问：我怎样才能使这些元素的宽度精确相等？

我的印象是 Safari、Chrome 和 Firefox 等浏览器中的用户代理样式表是浏览器内部的东西，不能直接修改（而是需要覆盖样式属性）。

由于包括 Mozilla 在内的各种网站，我也觉得 Webkit 和 Mozilla 的box-sizing属性的默认值为“content-box”。

我在一个在各种浏览器中查看的相当简单的虚拟页面上对此进行了测试。

我的问题是，在我们的生产应用程序的两个页面上，默认属性是不同的，我们无法弄清楚这是为什么。

一页我们在 Web Inspector 或控制台中看到“border-box”的 box-sizing 属性。它被分配给 CSS 选择器input:not([type="image"]), textarea。

在另一页上，没有提到 Web Inspector 或控制台中的 box-sizing 属性。

有谁知道是否有某种方法可以直接影响特定页面的用户代理样式表中的 box-sizing 定义？也许有一个图书馆可以做到这一点？我们在应用程序中使用prototype.js 和swfobject.js ......

更新：如果我不清楚我的 Web 应用程序中的几乎每个页面以及我在 box-sizing 属性上测试过的每个“虚拟”页面都具有默认的“content-box”值。由于某种原因，我的 Web 应用程序中的一个特定页面在 Web 检查器中显示用户代理样式表（浏览器默认使用的样式表）已将该属性设置为“边框框”。我一生都无法弄清楚为什么会这样。我正在寻找任何可能导致 Firefox 更改该属性的默认值的东西。

我正在使用display:table. 对于间距（也来自背景图像），我使用padding. 因为我需要孩子们从可用空间中获得准确width:50%的信息（考虑到 parent 的填充div），所以我使用box-sizing:border-box.

这在 Opera 中运行良好，但在 Chrome 中，box-sizing:border-box甚至-webkit-box-sizing:border-box会被忽略。

我做了一个演示来显示这个问题。两个红框应该是方形的，蓝框应该是宽高200px：http: //jsfiddle.net/fabb/JKECK/

这是html源代码：

和CSS：

这是 Chrome 中的错误吗？还是我做错了什么？

我正在使用box-sizing:border-box模型。当具有最小宽度的 inline- block元素包含在inline-block元素（容器）中时，该容器在 Internet Explorer 9 中太宽。在 FF 10.0、Chrome 17.0、Opera 11.5 和 Safari 5.1.2 中按预期工作.

看到这个jsfiddle

顺便说一句，width而不是min-width就像一个魅力。

有任何想法吗？

我将开始开发一个新网站，并准备好处理浏览器用来计算元素宽度和高度的不同方法（盒子模型的东西）。不知何故，我想到了：如果我只适用box-sizing于网站中的所有元素怎么办？

我是相信这box-sizing: border-box;是 CSS 中最好的命令之一的人之一，尽管它有所有的局限性。然而，同样的限制让我想知道我是否应该适用box-sizing于所有元素：

当然，我的网站应该与尽可能多的浏览器兼容，box-sizing当我们想到 IE7- 时会产生一些问题。但是，有时日程安排很紧，如果不用担心这个具体问题，多花几分钟时间会很好。

无论如何，你认为应用box-sizing:border-box;到所有元素是一个好策略还是我应该只对真正需要它的元素继续这样做？

在 CSS 中使用box-sizing: border-box时，我假设元素的总宽度将在其“宽度”值中定义。所以如果我说一个分割的宽度是20px，右边框是10px，我最终会得到一个占据20px空间的盒子，其中一半是右边框。将它推到我将宽度设置为 10px 和右边框的位置，就像这里一样：

该框将仅包含红色边框。当我将宽度设置为 0px 时会发生什么？我以为它会让整个事情消失，但是不，结果和上面的完全一样：

在 jsFiddle 上查看

我的问题是这是否是预期的行为。对我来说似乎不一致。我想让一个盒子消失，只控制宽度/高度。

概要

我有一个包装器，宽度为 980 像素，填充为 10 倍。里面的内容是 960px (border-box)。我有一个元素，inline-block，宽度 760px，margin-right 20px，另一个 inline-block 为 180px。这些应该完美匹配。但仅从其中一个元素中减去两个 px 将使它们适合父元素。

我知道内联块的空白问题，并且总是使用该修复程序。即便如此，我仍然用浮动测试了两个块，仍然是同样的问题。

CSS

HTML

这两个px是哪里来的？？？！！！！！！

当使用 box-sizing:border-box 时，它会导致“关闭”按钮被切断。在使用 Zurb 的 Foundation 3 时尤其如此。

似乎导致fancybox出现问题的代码是这样的：

现在，也许作者在进行计算时需要考虑边框框，但我想知道是否有一种简单的方法可以用 CSS 覆盖行为。

这是一个演示正在发生的事情的小提琴。您可以看到关闭按钮是如何被切断的。http://jsfiddle.net/jonthomas/SxZuR/4/

另外，这里是 github 上的问题：https ://github.com/fancyapps/fancyBox/issues/311