填充容器的CSS定位:宽度还是左/右？
考虑：
对于绝对定位在相对定位容器内的元素，则为
- 。如果希望元素填充容器的宽度，则为
- 。
- 该元素也为bottom-aligned.
是最大限度地提高浏览器对元素的set a width in pixels的兼容性，还是简单地使用use left and right
使用这两种方法都有什么常见的bug需要注意吗？
显然，在图像宽度或填充发生变化的情况下，使用left: 0;和right: 0;会使代码更易于管理，但是width: 300px有什么缺点呢？
回答 4
Stack Overflow用户
发布于 2013-05-17 10:33:55
在历史上，我们学会了使用width而不是left & right，因为IE6不能同时支持同一个轴的两个属性
<div style="top:0;bottom:0;position:absolute;">modern browsers</div>
<div style="top:0;height:100%;position:absolute;">MSIE6</div>
<div style="left:0;right:0;position:absolute;">modern browsers</div>
<div style="left:0;width:100%;position:absolute;">MSIE6</div>
<div style="left:0;right:0;top:0;bottom:0;position:absolute;">modern browsers</div>
<div style="left:0;top:0;height:100%;width:100%;position:absolute;">MSIE6</div>此外，此技术在某些元素(including on modern browsers, by spec )上不起作用
<!-- these will not work -->
<!-- edit: on some browsers they may work,
but it's not standard, so don't rely on this -->
<iframe src="" style="position:absolute;top:0;bottom:0;left:0;right:0;"></iframe>
<textarea style="position:absolute;top:0;bottom:0;left:0;right:0;"></textarea>
<input type="text" style="position:absolute;left:0;right:0;">
<button ... ></button>
and possibly others... (some of these can't even be display:block)但是，使用width:auto属性分析正常静态流中发生的情况
<div style="width:auto;padding:20px;margin:20px;background:lime;">a</div>你会发现它非常类似于...
<div style="width:auto;padding:20px;margin:20px;background:lime;
position:absolute;top:0;left:0;bottom:0;right:0;">b</div>..。具有相同值的相同属性！这真的很好！否则，它将如下所示：
<div style="width:100%;height:100%;
position:absolute;top:0;left:0;">
<div style="padding:20px;margin:20px;
background:lime;">c</div>
</div>这也是不同的，因为内部div不会填满y轴。要解决这个问题，我们需要css、calc()或box-sizing以及一个不必要的麻烦。
我的回答是，left + right | top + bottom真的很酷，因为它们最接近静态定位的width:auto，没有理由不使用它们。与替代方案相比，它们更容易使用，而且它们提供了更多的功能(例如，在一个元素中同时使用margin-left、padding-left和left )。
与替代的width:100% + box-sizing | calc()相比，浏览器对left + right | top + bottom的支持要好得多，而且它也更容易使用！
当然，如果您不需要(就像您的示例中一样)在y轴上增长元素，使用一些嵌套元素进行填充，这是也支持MSIE6的归档支持的唯一解决方案
因此，这取决于您的需求。如果你想支持MSIE6 (这是唯一的实际原因)，你应该使用with:100%，否则就使用left + right！
希望能帮上忙。
Stack Overflow用户
发布于 2013-04-19 16:23:08
这两种方法都很好，但如果您希望您的设计具有响应性或手机兼容性-如果容器不包含在<div>中，我建议使用Left:和Bottom:。
如果它被封装在<div>中，那么在我看来，使用width: 100%或max-width: 200px进行封装是一种最不会造成显示问题的方法。
如果你想让你的主题具有响应性，就不要在CSS中使用固定宽度。
Stack Overflow用户
发布于 2013-04-12 21:18:54
这两种解决方案在每个浏览器上都能正常工作，没有任何问题。在这些情况下，我喜欢为元素添加宽度: 100%；left: 0;：0；但如果您喜欢left:0;right:0；bottom:0;，那么您也可以使用它。
https://stackoverflow.com/questions/15972192
复制相似问题