1

I'm trying to stretch a button across a variable width space so that the ends are anchored to its container edges using the left and right properties like this:

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

This works as expected in Chrome, IE, and Safari. The button stretches across the width of the browser window. However, in FireFox/SeaMonkey and Opera, the right property is ignored and the button is just wide enough to hold the caption. Why is that?

4

3 回答 3

2

看起来唯一的解决方法是绝对定位一个带有按钮的 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

于 2012-11-15T21:43:34.980 回答
0

这里的基本问题是是否<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

于 2012-11-16T07:31:35.300 回答
0

为什么不在按钮的父元素中定义左右空间并将按钮本身设置为 100% 宽度。我觉得是不是很蠢。

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

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

button {
     width: 100%;
}​

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

​</p>

于 2012-11-15T21:56:00.953 回答