考虑到：
>对于绝对定位在相对位置的元素
定位容器。
>如果要元素填充容器的宽度。
>元素也是底对齐的。
最佳浏览器兼容性为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％，否则使用左边的！
希望有所帮助
