小编Gil*_*ett的帖子

为什么嵌套的div具有position:absolute渲染,并且对缩小到适合的苛刻解释？

如果页面上有两个绝对定位的div,其中最内部的div具有应该呈现为表的内容,Firefox 3.6.x和4.x,Chrome 13.x和Opera 11.x都会破坏内容.

测试用例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Nested Absolutes</title>
  </head>
  <body>
    <div style=" position: absolute; background-color: green;">
      <div style="position: absolute;">
        <div style="display: table;">
          <div style="display: table-column; width: 15px;"></div>
          <div style="display: table-column;"></div>
          <div style="display: table-row;">
            <div style="display: table-cell; background-color: blue;"></div>
            <div style="display: table-cell;">
              Banana Fritter
            </div>
          </div>
          <div style="display: table-row;">
            <div style="display: table-cell; background-color: red;"></div>
            <div style="display: table-cell;">
              Cherry Pie
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

预期输出([C]表示一块颜色C):

[B] Banana Fritter
[R] …

html css

Gil*_*ett

2011 06-08

7
推荐指数

1
解决办法

1178
查看次数