CSS定位填充容器：宽度与左/右？

考虑到：

>对于绝对定位在相对位置的元素
定位容器。
>如果要元素填充容器的宽度。
>元素也是底对齐的。

最佳浏览器兼容性为set a width in pixels的元素，还是简单的use left and right？

任何常见的错误，要注意与任何一种方法？

显然，使用left：0;右：0;会使图像的宽度或填充更改的情况下，代码更易于管理，但是宽度：300px将有利吗？

解决方法

历史上，我们学会了使用宽度而不是左和右因为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和不必要的头痛。

我的答案是，左边|顶部的底部真的很酷，因为它们最接近静态定位的宽度：auto
没有理由不使用它们。与替代方案相比，它们更容易使用
提供更多的功能(例如，使用边距左边，左边和左边的填充
一个单一元素)。

左右|顶部是相当的
更好的支持浏览器与替代宽度：100％Box-sizing |计算值()
它也更容易使用！

当然，如果你不需要(如你的例子)在y轴上生长元素，
宽度：100％使用一些嵌套元素作为填充，这是唯一的解决方案来存档支持MSIE6

所以，取决于你的需要。如果你想支持MSIE6(这是唯一的实际原因)，你应该使用：100％，否则使用左边的！

希望有所帮助

CSS定位填充容器：宽度与左/右？

解决方法

相关文章