Question

以下代码在Firefox和Webkit（Safari / Chrome）中的工作方式不同，不应该。根据我的理解，Firefox正在正确呈现它。如何使Webkit呈现它？

<!doctype html>
<html>
  <head>
    <style type="text/css">
.frell {
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
}
    </style>
  </head>
  <body>
    <div id="container">
      <button class="frell">Test</button>
    </div>
  <body>
</html>

Answer 1

可能继承它的父级宽度或获取display：block。 Chrome开发者工具说了什么？我要么指定宽度（％或px），要么显示：内联（可能是内联块）

Answer 2

Firefox正在渲染错误，webkit正确呈现它。为了使firefox表现得好，你需要在课堂上添加width: 100%，即使这样，也不会在所有情况下都有效，但它会更接近。

绝对定位项目并同时指定左侧和右侧应使项目成为填充它们之间空间的必要宽度。对于一个简单的测试，这里有一个jsfiddle http://jsfiddle.net/c3EeF/2/，它显示了将同一个类应用于button和div标签时会发生什么。 Firefox在使用按钮时行为不当，我无法找到任何使其正常工作的设置。

Webkit绝对定位按钮一直延伸

2 个答案: