ホームページ >ウェブフロントエンド >htmlチュートリアル >ie7またはie6でtdの幅を超える内容をfloatにして以下のtdに表示する方法_html/css_WEB-ITnose
ie7またはie6でtdの幅を超える内容をfloatにして以下のtdに表示する方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:47:591175ブラウズ
<html><body style="font:16px Arial;"><style type="text/css">.table { border-collapse: collapse; table-layout: fixed; font: normal 11px arial;}.row { height:25px;}.cell { background-color:#ECF4FE; font-family:Arial,Verdana,sans-serif; font-size: 11px; border-bottom-width: 1px; border-bottom-color: #ECF4FE; border-bottom-style: dotted; border-top: none; border-left: 1px solid #EC0000; border-right: 1px solid #EC0000; vertical-align: middle; padding-left: 3px; padding-right: 3px;}</style><div style="width: 250px"><table width="100%" class="table"> <tr class="row"> <td class="cell"> <div style="white-space:nowrap;">Text Text Text Text Text Text Text Text</div> </td> <td class="cell"> </td> <td class="cell"> </td> <td class="cell"> </td> <td class="cell"> </td> </tr></table></div></body></html> タイトルと上記のコードのように、ie7 標準モードで。
ケース 1:
テーブルに table-layout:fixed; スタイルがある場合、ページに表示される上記のコードの効果は
ケース 2:
テーブルに table-layout:fixed; スタイルがない場合。スタイル、上記のコード ページに表示される効果は
明らかに、どちらの結果も理想的ではありません。
私の現在のニーズでは、全体的なデザイン要素により、table タグでの table-layout:fixed; が必須です。ただし、その後ろの各セルのセルを超えてコンテンツを表示する必要があります。ケース2のように最初のセルを直接広げることはできません。理想的な効果は次のとおりです
上記の理想的な効果は現在、IE 7 を除く IE 8、Firefox、Chrome、Safari、Opera、そしておそらく IE 6 で実現されています。
心優しい人々からのアドバイスは忘れてください。
ディスカッションへの返信 (解決策)
これは単純すぎます。固定を使用せず、絶対を使用してください
さらに、テーブルにはジャンク コードが多すぎます。 。このスタイルは実際には非常に簡素化できます。 。
うわー
上の階、テーブルの存在に何の意味があるの？ ． ．
上の階、テーブルの存在に何の意味があるの？ ． ．
これについては私も知りません。LZ に聞いてください
重要なのは、その機能が実現できるということです。
IE9 によって渡される、position:relative を追加します
67b225d41789feff93b94041659300cf
.table {
ボーダー折りたたみ: 折りたたみ;
フォント: 通常の 11 ピクセル
}
.row {
高さ: 25 ピクセル }
背景色:#ECF4FE ; : Arial、Verdana、サンセリフ;
フォントサイズ: 11px;
ボーダーボトムカラー: #ECF4FE;
ボーダートップ: n 1;
ボーダー左: 1px ソリッド #EC0000;
パディング左: 3 ピクセル
}
9f1a09a4a8af4f0278509065d78e38c4 3acef8ba7708f8b3d905a3aff2531992
ポスターのフォームは完全に背景です
時代は変わり、この煩わしいブラウザの互換性の問題に対処する必要はなくなりました。このテーブルは間違いなく背景ではなく、投稿用に特別に作成された写真であると記憶しています。
Tableレイアウトの使用は良くないと思うので、もっとdivを使用したいと思っています
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。