问题标签 [border-box]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
jquery - Border-left-width 在 jQuery 中返回 NaN
我正忙着写一小段代码，它应该允许跨浏览器使用边框框模型。到目前为止，基本功能工作正常，但我无法获得工作余地。它应该适应可用的空间，但控制台返回一个 NaN，我不知道它来自哪里。
这是一个小提琴。
console.log 甚至没有记录任何东西，我也不知道为什么。任何帮助是极大的赞赏。
css - 使用 box-sizing:border-box 的陷阱是什么？
我最近再次查看 box-sizing 属性。我觉得边界框实际上是一个更合适的模型。我希望我的盒子包含填充和边框，而无需每次在宽度计算中都考虑它，这在使用 100% 宽度时实际上是不可能的。
那么问题是什么是陷阱？为什么我不应该使用边框框？
css - IE8 无法使用边框框正确呈现输入
我有一个带有文本输入的表单，我给了那个文本输入 css-property box-sizing: border-box; width: 100%; padding-left: 28px。根据我能找到的所有文档，关于border-boxIE8 应该支持这个值box-sizing（实际上是 IE8 在 quirks-mode 中呈现 box-model 的方式），并且应该始终保持这个输入为 100% 宽度，尽管它有一个填充在左边。但是，无论如何，它似乎只是将填充添加到宽度。您可以在http://theater.dierclients.com/assets/html的紫色侧边栏中看到这一点。
关于为什么会发生这种情况的任何想法？
谢谢。
jquery-animate - 边框框隐藏jQuery动画中的伪元素
我有一个奇怪的问题，在应用时不会出现伪元素：
测试用例 1： http: //jsfiddle.net/kGGuP/1/ - 这按预期工作。单击该框将显示内容，并且还将显示“箭头”伪元素。
测试用例 2： http: //jsfiddle.net/XGGg4/ - 我已经添加
到 CSS。如您所见，“箭头”伪元素将不再出现。这将发生在除 Firefox 之外的所有浏览器中。
除了删除box-sizing:border-box;之外，还有什么解决方法吗？? 我真的不想删除这条规则。
附加信息：
只有带参数的 .toggle()和.slideToggle()似乎有这个问题。
如果使用不带参数的 .toggle()和.fadeToggle()，它可以正常工作。
css - 如何使用 box-sizing: 带有 2 个内联元素的边框？
我试图保持 2 个内联元素，用边框和填充保持 100% 的宽度，我尝试使用 box-sizing 但不起作用。怎么了？HTML：
CSS：
JSFiddle：http: //jsfiddle.net/W7EJB/
css - 使用 box-sizing:border-box 计算百分比填充的奇怪行为；
使用小提琴设置测试用例：http: //jsfiddle.net/5M7X7/2/
border-box我有一个可以调整一些布局的宠物项目。我看到分层块元素的奇怪（但跨浏览器一致）行为。
根据示例，有 3 个 div：第一个具有固定的高度和宽度，其子级具有 100% 的高度和宽度，加上两侧的 % 填充，其子级具有 100% 的高度和宽度。
使用宽度计算垂直填充。这是故意的怪癖border-box吗？是否有使用 css 的布局技巧使其行为“如我所料”，使用高度来计算垂直填充？
我不需要 JS 解决方法，也不需要其他方法来调整我最小的盒子的大小。我对这个特殊的布局怪癖感兴趣，它为什么会发生，以及是否有一种纯粹、简单的 css 方式让它“表现”。
编辑 显然，填充百分比计算为宽度的百分比，无论您使用哪种框大小。作为一名前端开发人员，多年来我从未遇到过这种情况。如果有人知道一个好的解决方法，我会全神贯注。
谢谢！
padding - 填充重叠但不填充宽度的列
我正在创建一个 5 列布局，其中 div 相互重叠，以在它们之间留出 5px 的空间。
我正在使用边框框来解决烦人的填充问题。
问题：列根本不适合宽度，因为我正在使用边距来移动 div 的“hacks”。
CSS
HTML
删除
使整个东西适合 1200 像素的宽度，但列之间的“边界”为 10 像素，而不是 5 像素。
我确信有一个非常简单的解决方案，我已经尝试过的事情之一是：
- 第一列或最后一列的自定义 padding-right 以修复缺少的宽度。
但是由于内容给列的高度不同，这是行不通的。
最终结果注定是这样的：
css - 带框大小的全局选择器
我读到一些开发人员使用box-sizing全局选择器作为整个 Web 项目的常见做法。这是最佳实践还是应该避免？关于性能？
border-box - 带有百分比和边距的边框
你如何使用带有百分比和边距的边框？示例如下。
我希望 div(.half) 占据屏幕的 50% - 每次尝试时，div 周围的 5px 边距都是可行的，它使其宽度超过 50%，并将第二个框放在我想要的下一行如果可能的话，避免基于百分比的边距。
html - 如果在 JSFiddle 中显示，IE9 会显示相同代码的不同结果
以下小提琴在 IE 9 中看起来不错，由于 box-sizing:border-box. 但是，如果我显示与普通 html 站点相同的代码，则将填充和边框添加到宽度中，使字段大于容器。
任何想法这里的问题是什么？
这是在 ie9 中看起来不错的小提琴：http: //jsfiddle.net/GgwNs/1/
这是显示为 html-site 的相同代码，看起来不太好：
谢谢