标签: box-sizing
它是否存在相当于box-sizing:灵活盒中的边框为React Native？
我想我的盒子的大小不能通过边距和填充来改变.
推荐指数
解决办法
查看次数
INPUT盒子大小的边框,在Chrome内部的TD问题中具有100%的高度和宽度
我在这里发现了一个几乎相同的案例.但是接受的答案对我不起作用,所以我希望我提出一个新问题.
下面的图片是我想在所有主流浏览器中实现的(至少IE8 +,Firefox和Chrome).置于TD内的INPUT填充了父母的宽度和高度.
我的问题是,我无法在Chrome中使用以下代码段完成此操作.提前致谢
更新:我在Chrome上的问题解释说:如果仔细观察,顶部和底部边框有1或2px填充.这是我在Windows 7上的Chrome版本47.0.2526.111 m(请在新窗口中打开以查看更清晰)
UPDATE2:样本上的大错误.DIV在不使用盒子大小的情况下适应他们的父母.我真正想要的是INPUT也适应他们的父母.刚刚更新了我的代码片段.
table {
border-collapse: collapse;
width: 100%
}
td {
height: 100px;
border: 1px #ccc solid;
}
input {
border: 1px #ccc solid;
height: 100%;
width: 100%;
box-sizing: border-box; /* works fine with IE8+ */
-moz-box-sizing: border-box; /* works fine Firefox */
-webkit-box-sizing: border-box; /* height is not correct in Chrome */
/*-webkit-box-sizing: content-box; width is not correct in Chrome */
}<table>
<tr>
<td>
<input type="text" …推荐指数
解决办法
查看次数
100% 高度 img 上的 Safari 边框框高度错误，在父级上填充
box-sizing: border-box在 Safari 中使用时，存在影响img使用时元素高度height: 100%和父元素上的填充的错误。
请参阅此小提琴并在 Chrome/Firefox 与 Safari 上对其进行测试以查看差异：https : //jsfiddle.net/Arko/66b9bt02/1/
以下是完整代码供参考：
HTML：
<div>
<img src="http://placehold.it/40x40">
</div>
CSS：
* {
box-sizing: border-box;
}
div {
padding: 15px;
height: 50px;
}
img {
height: 100%;
}
使用边框框大小调整时，img 高度应为 20px（50px div 高度减去 2x 15px 填充）。这在 Chrome 和 Firefox 中是正确的。但是 Safari 以 30px 的高度显示图像。
- 如果我们在宽度而不是高度中测试这个，没有问题。
- 如果我们删除填充或注释掉边框样式，没有问题。
- 如果我们使用其他块元素（例如 div 而不是 img）来测试这一点，则没有问题。
我发现没有报告此问题的其他实例。这是要报告的新 webkit 错误吗？或者我错过了什么？
（在 Safari 9.1.1 和 Webkit Nightly 202811 中测试）
推荐指数
解决办法
查看次数
box-sizing：没有声明高度/宽度的边框
我试图了解box-sizing: border-box下面的代码是如何工作的。当设置高度或宽度（无填充）时，它会按预期工作（边框出现在 div 内部）。但如果只使用padding来创建div的尺寸，则不起作用。有人可以解释为什么吗？这是演示：
div.test {
background-color: red;
box-sizing: border-box;
display: inline-block;
border: 5px solid;
text-align: center;
padding: 50px;
vertical-align: middle;
// height: 100px;
// width: 100px;
}
div.test:first-of-type {
border: none;
}<div class="test">aa</div>
<div class="test">aa</div>推荐指数
解决办法
查看次数
我可以在我的项目中使用全局 box-sizing:border-box 吗？
我可以在我的所有 murkup （所有项目）中使用吗box-sizing: border-box;？
例如：
html {
box-sizing: border-box;
},
:before, *:after {
box-sizing: inherit;
}
因为计算实际宽度更容易，但是这种方法有什么缺点吗？
推荐指数
解决办法
查看次数
如何覆盖box-sizing:border-box; 在特定部分
我有一个*{box-sizing:border-box;}属性,可以使联系表单输入保持良好且分离,但它使得它上面的小"画廊"稍微偏离中心向左移动,我找不到如何为特定部分覆盖它..我已经尝试将其定位并将框大小设置为内容框但似乎没有任何效果.我错过了什么..？
对不起这里的长段代码,我不想错过什么.
这是我的代码和Codepen:http://codepen.io/anon/pen/zKXzZP
<body>
<section class="works">
<div class="works--title">
Stuff
<hr class="horizontal">
</div>
<div class="works--thumbnails">
<a href="#" class="works--item">
<div class="works--itemtext">
<div class="item--primarytext">
lorem lorem lorem lorem lorem
</div>
<div class="item--secondarytext">
lorem lorem lorem lorem lorem
</div>
</div>
</a>
<a href="#" class="works--item">
<div class="works--itemtext">
<div class="item--primarytext">
Lorem ipsum dolor sit amet
</div>
<div class="item--secondarytext">
similique nesciunt sint
</div>
</div>
</a>
<a href="#" class="works--item">
<div class="works--itemtext">
<div class="item--primarytext">
Lorem ipsum dolor sit amet
</div>
<div class="item--secondarytext">
similique nesciunt sint
</div>
</div> …推荐指数
解决办法
查看次数
宽度为 100% 的 SVG 溢出其容器
在下面的代码片段中，添加 svg 元素会导致出现垂直滚动条。删除 svg 就会删除滚动条。我想了解为什么会发生这种情况，以及是否有一个不可怕的解决方案（例如宽度：99％；高度：98％解决它，但这是一个令人厌恶的解决方案）。
我无法真正删除上面的 DIV 样式，因为其他 html 结构也位于这些容器中，需要它们在那里。
.menuquery {
border: 1px solid #ccc;
overflow: auto;
box-sizing: border-box;
}
.xainnersubformdefault {
/* allows the svg to autosize */
width: 100%;
height: 100%;
}
.xadatabox {
height: 100%;
/* essential for jtable to scroll and not leak */
}
.datachart {
width: 100%;
height: 100%;
/* position:relative; */
/* to make an svg fill its container, this is required, see stackoverflow 9566792 */
}
svg {
width: 100%;
height: …推荐指数
解决办法
查看次数
使用百分比(%)时如何计算填充？
为什么这个例子中的填充不等于300px？
#Test{
width:600px;
padding-right:50%;
box-sizing:border-box;
background:#ddd;
}<div id="Test">
TEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH …推荐指数
解决办法
查看次数
CSS 重置边距和填充
如果我将 box-sizing 属性用于 border-box，是否会将边距和填充重置为 0 无关紧要，或者仍然是我应该做的事情？
IE
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
推荐指数
解决办法
查看次数
标签 统计
box-sizing ×9
css ×8
css3 ×2
html ×2
border-box ×1
flexbox ×1
height ×1
java ×1
jquery ×1
padding ×1
react-native ×1
safari ×1
svg ×1
webkit ×1