21

考虑：

  • 对于绝对定位在相对定位容器内的元素。
  • 如果您希望元素填充容器的宽度。
  • 该元素也是底部对齐的。

在此处输入图像描述

为元素设置 awidth以像素为单位是最好的浏览器兼容性，还是简单地使用leftandright？

任何一种方法都需要注意的常见错误？

显然，在图像的宽度或填充发生变化的情况下，使用left: 0;andright: 0;会使代码更易于管理，但是是否有任何不利的地方width: 300px可以取而代之？

4

4 回答 4

16

历史上我们学会了使用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>

此外，此技术不适用于某些元素（包括现代浏览器，按规范）

<!-- 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 轴。要解决这个问题，我们将需要 csscalc()或box-sizing一个不必要的头痛。

我的回答是，left + right | top + bottom它们真的很酷，因为它们最接近静态定位width:auto 并且没有理由不使用它们。与替代方案相比，它们更易于使用，并且提供更多功能（例如，使用margin-left,padding-left并left同时在一个元素中）。

left + right | top + bottom与替代方案相比，浏览器对它的支持要好得多，width:100% + box-sizing | calc() 而且使用起来也更容易！

当然，如果您不需要（如在您的示例中）也在 y 轴上增长元素， width:100%使用一些嵌套元素进行填充，它也是对 MSIE6 存档支持的唯一解决方案

所以，看你的需求。如果您想支持 MSIE6（这是这样做的唯一实际原因），您应该使用with:100%，否则使用left + right！

希望能有所帮助。

于 2013-05-17T02:33:55.443 回答
0

这两种方法都很好，但是如果您希望您的设计具有响应性或与手机兼容 - 我建议使用Left:并且Bottom:如果容器未包含在<div>.

如果它包含在一个<div>那么做它width: 100%或max-width: 200px在我看来是一种导致显示问题最少的方式。

如果您希望主题具有响应性，请避免在 CSS 中使用固定宽度。

于 2013-04-19T08:23:08.233 回答
-1

我没有在所有浏览器（和模式）上对此进行测试，但对于 IE 怪癖模式（例如，在未定义 !DOCTYPE 的 .HTA 中），我创建了一个子例程，用于更正 LEFT/RIGHT 样式元素的 WIDTH 或 HEIGHT或设置顶部/底部样式（不是“自动”）。为了避免进行所有类型的单位转换，例程临时删除 LEFT（或 TOP）样式并将 WIDTH（或 HEIGHT）设置为 100% 以确定 RIGHT（或 BOTTOM）偏移量（以像素为单位）。

该脚本是用 VBScript 编写的，但是将这个想法转换为 JavaScript 应该是很困难的。

<html>
<head>
    <script language="VBScript">

Option Explicit

Sub Justify(ByVal hElement)

    Dim sStyleTop, iTop, iBottom, sStyleLeft, iLeft, iRight

    With hElement
        If .currentStyle.top <> "auto" And .currentStyle.height = "auto" And .currentStyle.bottom <> "auto" Then
            iTop = .offsetTop
            sStyleTop = .currentStyle.top
            .style.top = "auto"
            .style.height = "100%"
            iBottom = -.offsetTop 
            .style.height = .offsetHeight - iTop - iBottom & "px"
            .style.top = sStyleTop
        End If
        If .currentStyle.left <> "auto" And .currentStyle.width = "auto" And .currentStyle.right <> "auto" Then
            iLeft = .offsetLeft
            sStyleLeft = .currentStyle.left
            .style.left = "auto"
            .style.width = "100%"
            iRight = -.offsetLeft 
            .style.width = .offsetWidth - iLeft - iRight & "px"
            .style.left = sStyleLeft
        End If
        For Each hElement In .Children
            Justify hElement
        Next
    End With

End Sub

Sub window_onload

    Justify Document.body

End Sub

    </script>
    <style type="text/css">
    body {
        position:absolute;
        width:100%;
        height:100%;
    }
    #outer{
        background:blue;
        position:absolute;
        top:10px;
        right:20px;
        bottom:30px;
        left:40px;
    }
    #inner{
        background:green;
        position:absolute;
        top:40px;
        right:30px;
        bottom:20px;
        left:10px;
    }
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner">
        </div>
    </div>
</body>
</html>

证明文档中所有元素的命令是：

Justify Document.body

我从 onload 事件中调用它，因为它在我的情况下涉及固定大小的 .HTA，但我希望该例程也适用于相当大的窗口（或父元素）的 onsize 事件。

于 2013-07-10T11:49:24.733 回答
-1

这两种解决方案都可以在每个浏览器中正常运行，没有任何问题。在这些情况下，我喜欢添加一个宽度：100%；左：0；底部：0；对于元素，但如果你喜欢left:0;right:0; 底部：0；比你也可以使用的更多。

于 2013-04-12T13:18:53.953 回答