なぜフロートした＆lt; input＆gt; IE7ではフロートされた要素のコントロールが右にスライドしすぎていますが、Firefoxではそうではありませんか？

StackOverflow https://stackoverflow.com/questions/224352

質問

ASP.Netのコード、HTML、JavaScript、CSSをすべて削除してサンプルを提供する必要はないので、画像が数千行のコードの価値があることを願っています（ただし、誰かが「ああ、私は前にそれを見たことがあります！」と言わない場合、リクエストに応じてできます！[実際、コードとCSSを投稿しました-質問の下部を参照してください。]

Firefoxで表示されるフォームページの一部を次に示します。 alt text

青いボックスは＆lt; label＆gt; タグの一時的なスタイリングであり、オレンジ色の線は＆lt; div＆gt; タグの一時的な境界線スタイルです（したがって、それらが伸びたり壊れたりする場所）。 ＆lt; label＆gt; は、右側の＆lt; div と同様に、 float：left のスタイルになっています。さらに、＆lt; div＆gt; の子孫コントロールも純粋に float：left であるため、＆lt; div＆gt; <の上に整列します。 / code>（下に複数行のテキストボックスのような背の高いコントロールがあるため）。

ラジオボタンはASPコントロールによって生成されるため、＆lt; span＆gt; でラップされます-＆lt; div＆gt;の子孫であるため、左にフロートされます。

IE7でレンダリングされた画面の同じ部分は次のとおりです。 alt text

いくつかの小さなレンダリングの違いがありますが、私を夢中にさせている大きな違いは、＆lt; input＆gt; コントロールの横にある余分な空白です！ ＆lt; span＆gt; がラジオボタンとチェックボックスの周りに正しく並んでいることに注意してください。

これらは表示されていませんが、ドロップダウンリストとリストボックスでも同じことが起こります。入力コントロールを＆lt; span＆gt; でラップしようとしませんでしたが、うまくいくかもしれません。しかし、それはいハックです。

ボックスの問題に対してIE7の回避策をいくつか試し、純粋なブードゥーモードになるまでCSSを編集しました（つまり、何かがうまくいくことを期待してランダムに変更します）。私が言ったように、誰かがこれを見て、＆quot;前に見たことがある！これを試してみてください...＆quot;

誰ですか？

フォローアップ1：

XHTML 1.0 Transitional ＆lt; DOCTYPE＆gt; を使用しているため、標準モードにする必要があります。

フォローアップ2：

これは、上記の生成されたコードの小さな断片です（最初のコントロールと最後のコントロール）。このコードはASP.Netによって生成され、JavaScript / jQueryによって動的に編集されたことに注意してください。

 <fieldset id="RequestInformation">
   <legend>Request Information</legend>
   <ol>
     <li>
       <label id="ctl00_ContentPlaceHolder1_txtRequestDate_L" class="stdLabel" 
         for="ctl00_ContentPlaceHolder1_txtRequestDate">Request Date:</label>
       <div class="FormGroup">
         <input id="ctl00_ContentPlaceHolder1_txtRequestDate" class="RSV DateTextBox hasDatepicker" 
           type="text" value="10/05/2004" name="ctl00$ContentPlaceHolder1$txtRequestDate"/>
         <img class="ui-datepicker-trigger" src="/PROJECT/images/Calendar_scheduleHS.png" alt="..." title="..."/>
         <span id="txtRequestDate_error"/>
       </div>
     </li>
     --STUFF DELETED HERE--
     <li>
       <label id="ctl00_ContentPlaceHolder1_chkAppealed_L" class="stdLabel" 
         for="ctl00_ContentPlaceHolder1_chkAppealed"> Request Appealed?</label>
       <div class="FormGroup">
         <span class="stdCheckBox">
           <input id="ctl00_ContentPlaceHolder1_chkAppealed" type="checkbox" name="ctl00$ContentPlaceHolder1$chkAppealed"/>
         </span>
       </div>
     </li>
   </ol>
 </fieldset>

CSSの関連部分を次に示します（これが問題を複製することを確認するために二重にチェックしました）：

div
{
    border-style: solid;
    border-width: thin;
    border-color:Orange;
}

label
{
    border-style: solid;
    border-width: thin;
    border-color:Blue;
}

.FormGroup
{
    float:left;
    margin-left: 1em;
    clear: right;
    width: 75em;
}

.FormGroup > *
{
    float:left;
    background-color: Yellow;
}

fieldset ol
{
    list-style: none;
} 

fieldset li
{
    padding-bottom: 0.5em;
} 

li > label:first-child
{
    display: block;
    float: left;
    width: 10em;
    clear: left;
    margin-bottom: 0.5em;
}

em
{
    color: Red;
    font-weight: bold;
}

ソリューション！

マシューは、フォーム要素のIE / Win継承マージンのこのページを指摘しました。問題。入力ボックスは、それらを含むすべての要素の左マージンを継承していました。私が選んだ解決策は、各＆lt; input＆gt; 要素をスタイルなしの＆lt; span＆gt; でラップすることでした。私はHTMLの構造をできるだけ意味的に健全に保つように努めてきたので、 $（document）.ready（）関数でjQueryコマンドを使用してそれを解決しました：

//IE Margin fix: 
//  http://www.positioniseverything.net/explorer/inherited_margin.html
jQuery.each(jQuery.browser, function(i) {
    if($.browser.msie){
        $(":input").wrap("<span></span>");
    }
});

これはIEで愚かな＆lt; span＆gt; のみを追加することに注意してください...

StackOverflowが再び助けになります！

役に立ちましたか？

解決

input は、周囲の div および ol からマージンを継承しています。スパンやdivなどの別のタグで囲むと、問題が解決するはずです。

編集： httpで詳細と回避策を見つけることができます。 //www.positioniseverything.net/explorer/inherited_margin.html

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top