Question

我尝试在可变宽度空间中拉伸按钮，以便使用左右属性将末端锚定到其容器边缘，如下所示：

<button style="position: absolute; left: 0px; right: 0px;">Test</button>

这在Chrome，IE和Safari中可以正常使用。该按钮横跨浏览器窗口的宽度。但是，在FireFox / SeaMonkey和Opera中，右侧属性被忽略，按钮的宽度足以容纳标题。那是为什么？

Answer 1

看起来唯一的方法是绝对定位div，里面有一个按钮，设置为100％宽度。像这样：

<body>
  <div style="width: 600px; height: 600px; position: relative;">
    <div style="position: absolute; left: 0px; right: 0px;">
      <button style="width:100%;">Test</button>
    </div>
  </div>
</body>

以下是使用http://jsbin.com/aweleq/2/edit

的实时工作示例

这是一个已知的错误https://bugzilla.mozilla.org/show_bug.cgi?id=471763

Answer 2

为什么不在按钮的父元素中定义左右空格，并将Button本身设置为100％宽度。我觉得这不是那么愚蠢。

<div>
    <button>Test</button>
<div>

div {
    padding-left: 40px;
    padding-right: 60px;
}

button {
     width: 100%;
}

如果需要，您也可以将它们设置为相对/绝对位置。

Answer 3

这里的基本问题是<button>是否为替换元素。替换元素和非替换元素的规则是不同的;比较http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width和http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width

看起来Firefox和Opera将<button>视为替换元素，而您的IE和WebKit版本则不然。不幸的是，实际上并没有定义这个元素是否是替换元素。

但是请注意，WebKit通常会将这部分规范错误地解决，即使对于那些肯定被替换的元素也是如此。见https://bugs.webkit.org/show_bug.cgi?id=81863

css按钮右侧属性被忽略

3 个答案: