考虑:
对于绝对定位在相对定位容器内的元素,则为
是最大限度地提高浏览器对元素的set a width
in pixels的兼容性,还是简单地使用use left
and right
使用这两种方法都有什么常见的bug需要注意吗?
显然,在图像宽度或填充发生变化的情况下,使用left: 0;
和right: 0;
会使代码更易于管理,但是width: 300px
有什么缺点呢?
发布于 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
!
希望能帮上忙。
发布于 2013-04-19 16:23:08
这两种方法都很好,但如果您希望您的设计具有响应性或手机兼容性-如果容器不包含在<div>
中,我建议使用Left:
和Bottom:
。
如果它被封装在<div>
中,那么在我看来,使用width: 100%
或max-width: 200px
进行封装是一种最不会造成显示问题的方法。
如果你想让你的主题具有响应性,就不要在CSS中使用固定宽度。
发布于 2013-04-12 21:18:54
这两种解决方案在每个浏览器上都能正常工作,没有任何问题。在这些情况下,我喜欢为元素添加宽度: 100%;left: 0;:0;但如果您喜欢left:0;right:0;bottom:0;,那么您也可以使用它。
https://stackoverflow.com/questions/15972192
复制相似问题