1

私のマークアップは次のとおりです。

<table style="table-layout:fixed">
  <tr>
    <td class="key">
      <div>Age:</div>
    </td>
    <td class="value">
      <div>69</div>
    </td>
  </tr>
</table>

そして私のCSSは：

td.key
{
  border-left: 1px solid #D6D6D6;
  text-align: right;
  font-weight: normal;
  color: #7f7f7f;
  background-color: peachpuff;
  width: 115px;
}

td.key div
{
  width: 100%;
  background-color: lightseagreen;
}

TD 要素の Chrome からの「Computed Style」スクリーンショット:

TD 要素

DIV 子要素の Chrome からの「Computed Style」スクリーンショット:

DIV 要素

これが Chrome でレンダリングされると、次の結果が得られます。

クロムのスクリーンショット

これを IE7 でレンダリングすると、次の結果が得られます。

IE7 スクリーンショット

私が何を間違っているのかわかりません。どんな助けも素晴らしいでしょう!

注:この問題は IE8+ では発生しません

4

1 に答える 1

0

*属性を IE7 以下にのみ適用する場合は、次のようにキーを使用できます。

td.key
{
  border-left: 1px solid #D6D6D6;
  text-align: right;
  font-weight: normal;
  color: #7f7f7f;
  background-color: peachpuff;
  width: 115px;
  *width: 105px;
}

これにより、すべてのブラウザーで幅が 115 になりますが、IE7 以下に読み込まれると、幅が 105px に設定され、末尾の余分なスペースが切り取られます。

これは解決策というよりも回避策ですが、それでも有効です。

于 2013-07-23T21:19:04.243 に答える