11

シナリオは次のとおりです。

margin-bottom が 19px のテーブルがあります。その下には、いくつかのフィールドセットを含むフォームがあります。そのうちの1つは右に浮かんでいます。問題は、IE7 で margin-bottom が完全な 19px を取得していないことです。私は考えられる IE7 の css/margin/float のバグをすべて調べ、解決策を試しましたが、うまくいきませんでした。私はしばらくの間グーグルで検索してきましたが、助けになっているものは何も見つかりません。

これが私が試したことです。

  1. スタイルのない div でフォームまたはフィールドセットをラップします。明らかな変化なし。
  2. テーブルの margin-bottom を削除し、代わりにそれを div でラップし、19px の padding-bottom を指定します。明らかな変化なし。
  3. テーブルの margin-bottom を削除し、固定高さ 19px の div を追加します。明らかな変化なし。
  4. テーブルとフィールドセットの間にクリアを置きます。

私が忘れているものがいくつかあることは知っていますが、それらは私が最近試したことです. これは各フィールドセットで発生します。

リセット スタイル シートを使用しており、xhtml トランジショナル Doctype を使用しています。

編集: IE7 Web 開発者ツールバーと Firebug もあります。両方のブラウザーのスタイル情報には、margin-bottom: 19px; があることが示されています。しかし、明らかに IE7 向けではありません。

4

6 に答える 6

2

フローティング要素と非フローティング要素がある場合、それらの間の垂直方向のスペースをクロスブラウザで確保する唯一の確実な方法は、後続の要素の上部をパディングすることです。

于 2011-04-11T02:39:40.907 に答える
2

margin-bottom: 19px;に置き換え<div/>ますheight: 19px。

の CSS スタイルを削除し、との間にmargin-bottom挿入<div/>height: 19px<table/><form/>

私の場合、この問題を解決しました。

<table id="mytable">
    <tr>
        <th>Col 1</th>
        <th>Col 3</th>
        <th>Col 2</th>
    </tr>
    <tr>
        <td>Val 1</td>
        <td>Val 2</td>
        <td>Val 3</td>
    </tr>
</table>
<div style="height:19px;"></div>
<form method="post" action="test.html" id="myform">
于 2012-11-07T10:13:08.750 に答える
1

テーブルの下の要素からフロートを削除すると、余白が表示されますか?

于 2008-08-21T03:01:45.683 に答える
1

有効な doctype を取得しましたか? それ以外の場合、IE7 は基本的に IE5.5 である互換モードでレンダリングします。

于 2008-08-18T23:09:59.273 に答える
1

あなたがそこで説明したことをまとめましたが、適切にレンダリングされています。フォームやテーブルに影響を与える別のスタイルがどこかにある可能性があります。まだ行っていない場合は、reset.cssファイルを使用すると非常に便利です。どのスタイルが特定の要素に影響を与えているかを確認したい場合、Firefox のWeb 開発者ツールバーには、どのスタイル (どのファイル/スタイル ブロック/インライン スタイルから) が適用されているかを確認するための便利なスタイル情報コマンドがあります。を押すCtrl+Shift+Yか、CSS -> View Style Information

IE7で私のために働いたコードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Test</title>
            <style>
            #mytable {
                margin-bottom: 19px;
                border: solid green 1px;
            }
            
            #myform {
                border: solid red 1px; 
                overflow: hidden;
            }
            #floaty {
                float: right; 
                border: solid blue 1px;
            }
            </style>
        </head>
        <body>
            <table id="mytable">
                <th>Col 1</th>
                <th>Col 3</th>
                <th>Col 2</th>
                <tr>
                <td>Val 1</td>
                <td>Val 2</td>
                <td>Val 3</td>
                </tr>
            </table>
            <form method="post" action="test.html" id="myform">
                <fieldset id="floaty">
                    <label for="myinput">Caption:</label>
                    <input id="myinput" type="text" />
                </fieldset>
                <fieldset>
                    <p>Some example content</p>
                    <input type="checkbox" id="mycheckbox" />
                    <label for="mycheckbox">Click MEEEEE</label>
                </fieldset>
            </form>
        </body>
    </html>

于 2008-08-18T23:10:00.867 に答える
0

テストしないとわかりませんが、これをテーブルとフィールドセットの間に配置してみてください。

<br style="clear:both;" />
于 2008-08-19T00:07:23.153 に答える