4

私はこのコードに取り組んでおり、このコードは正常に動作していますChromeが、Firefox

ここにコードがあります

<html lang="en-US">
<body><table style="width: 100%;">
<tbody><tr>
<td style="position: relative; width: 50%; height: 500px; vertical-align: top; overflow: hidden;">
<div style="position: absolute; background-color: blue; height: 100%; width: 100%;"></div></td>
<td style="position: relative; width: 50%; height: 500px;"></td>
</tr>
</tbody></table>
</body>
</html>

ここで見たい場合は、動作中のコードの JSFiddle です

画面の幅全体をカバーする際に、表示されているように幅の 50% のみをカバーする必要がある理由divを説明してください。FirefoxChrome

4

2 に答える 2

3

おそらく、2.1 仕様の時点で、 table-cell 要素の相対位置が CSS で定義されていないためです。

ボックスの位置は、通常フローに従って計算されます (これを通常フローの位置と呼びます)。次に、ボックスは通常の位置に対してオフセットされます。ボックス B が相対的に配置されている場合、次のボックスの位置は B がオフセットされていないものとして計算されます。table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell、および table-caption 要素に対する「position:relative」の効果未定義です。

これは、Positioned Layout Moduleの時点では正しくありません(動作が明示的に定義されています) が、まだベンダーによって採用されていません。

于 2013-06-10T20:07:08.007 に答える
1

問題はposition: absolute;、内側の DIV です。

<html lang="en-US">
  <body>
    <table style="width: 100%;">
      <tbody>
        <tr>
          <td style="position: relative; width: 50%; height: 500px; vertical-align: top; overflow: hidden;">
            <div style="background-color: blue; height: 100%; width: 100%;"></div>
          </td>
          <td style="position: relative; width: 50%; height: 500px;">
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

jsfiddle に行った更新でこれをテストできます。

セル内で絶対位置の div を使用する必要がある場合は、そのセル内に絶対位置の div を含む相対位置の div を配置する必要があります。

<td>
  <div style="position: relative; ... ">
    <div style="position: absolute;... ">
      ...
    </div>
  </div>
</td>

元の jsfiddle に対するこの別の更新では、相対 div 内に絶対 div が表示され、左から 30、上から 10 のオフセットがあります。

ここのstackoverflowのこの古いスレッドは役に立つかもしれません: Using Position Relative/Absolute within a TD?

于 2013-06-10T20:12:38.980 に答える