0

IE7 の単純なフォームに問題があります。

FF やその他のブラウザでは問題ありません。

<form class="hotline_form">
     <fieldset>
         <legend>TEST</legend>
         <div class="field">
             <label class="question">Name:</label><input name="name"  type="text">
         </div>
         <div class="field">
             <label class="question">Username:</label><input name="name"  type="text">
         </div>
     </fieldset>
</form>

私のCSSスタイリング：

form.hotline_form{
    margin:0; padding: 0;
}
form.hotline_form fieldset{
    border: 0;
    padding: 0;
    margin: 25px 0 0 0;
}
form.hotline_form fieldset legend{
    width: 100%;
    padding: 0px 0px 5px 0px;
    margin: 5px 0px 5px 0px;
    border-bottom: 1px solid #999;
}
form.hotline_form fieldset div.field label{
    display: inline-block; 
    width: 130px; 
    padding: 0pt 20px 0pt 0pt;
    margin-top:5px;
    vertical-align: top;
    zoom:1; *display: inline; _height: 15px; /* IE7 fix*/
}
form.hotline_form fieldset div.field input, form.hotline_form fieldset div.field select, form.hotline_form fieldset div.field textarea{
    width: 330px;
    margin: 5px 0px 0px 0px;
    padding: 1px 0px 1px 0px;
}
form.hotline_form div.submit{
margin: 40px 0 0;
padding: 0 0 5px;
width: 100%;
}
form.hotline_form div.submit input{
    float: right;
    padding: 0px 7px 0px 0px;
}

私が試した修正に注意してください

zoom:1; *display: inline; _height: 15px; /* IE7 fix*/

http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.htmlから入手しました

Firefox では、次のように表示されます。

ここに画像の説明を入力

そしてIE7：

ここに画像の説明を入力

4

4 に答える 4

1

私は通常、Internet Explorer 用にさまざまな .CSS ファイルをロードします。これにより、コードがきれいに保たれます。

<!--[if IE 7]> <link href="ie7.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if IE 8]> <link href="ie8.css" rel="stylesheet" type="text/css"> <![endif]-->
于 2012-04-10T12:47:41.130 に答える
1

これは、パディングを処理する IE のファンキーな方法の場合でしょうか? あなたのフィールドセットはそれらのテキストボックスにぴったり合っていますか?

http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

于 2012-04-10T12:47:50.033 に答える
0

これは IE でよく見られます。これは、コードが実行するように IE がどのようにフォーマットするかに関する問題です。

最善の策は、JS を使用して実行中のブラウザーを識別し、IE 用のカスタム スタイル シートを作成することです。ここに役立つリンクがいくつかあります

http://javascript.about.com/library/blbrsdet.htm

http://www.w3schools.com/js/js_browser.asp

幸運を祈ります:)

于 2012-04-10T12:48:22.630 に答える
0

div.field に overflow:hidden を指定し、次に float:left; を指定します。ラベルと入力の両方で、float 要素にマージンを使用する場合は、それらに display:inline; を指定してください。

ハックは不要で、すべてのブラウザーで機能します。ラベルと入力の両方に高さと行の高さを設定できます。

于 2012-04-10T12:52:16.547 に答える