3

我有一个divwithdisplay: table; table-layout: fixed; width: 100%作为另一个divwith的孩子position: absolute。在 Chrome、IE 和 Firefox 上,子 divtable-layout: fixed使父级div扩展为100%,但在 Safari(6.0.4,OS X 10.8.3)中不会发生这种情况。这是一张图片

Safari 渲染问题

和一个 jsbin http://jsbin.com/oqupah/6/edit(确保在新窗口中打开输出)。标记是这样的:

<div style="position:absolute;border: 1px solid black">
  <div style="display:table;table-layout:fixed;width:100%;border:1px solid red;">
    <div style="display:table-cell;border:1px solid green">a</div>
  </div>
</div>

这是 HTML 5 和 XHTML 1.0 文档类型。我注意到,如果我在 safari 中删除 doctype,它的行为会像其他浏览器一样,但删除 doctype 不是一个选项。

实际上,当我实现一个绝对定位的弹出窗口时,我有这段代码,其中弹出窗口的内容是divwith display: table; table-layout: fixed; width: 100%。我希望弹出窗口拉伸 100%,以便我可以轻松地提供一个max-width并且如果窗口被调整大小,弹出窗口会相应地缩小。

所以我猜这是Safari中的一个错误?移动 Safari 上的行为是相同的。有什么我可以添加的让它表现得像其他浏览器吗?

4

2 回答 2

1

修复是添加right: 0到绝对定位div

……在这上面浪费了很多时间。

于 2013-05-15T06:04:57.517 回答
0

我在display:table元素上使用它修复了它:

table-layout: fixed;
max-width: none;
width: auto;
min-width: 100%;
于 2015-09-24T23:04:44.870 回答