5

例を提供するために ASP.Net コード、HTML、JavaScript、および CSS のすべてを削除する必要はありません (ただし、要求に応じて提供できるものは提供します)。誰かが「ああ、前に見たことがある！これを試して...」と言わない場合）[実際には、いくつかのコードとCSSを投稿しました-質問の下部を参照してください]。

以下は、Firefox で表示されているフォーム ページの一部です。 代替テキスト

青いボックスは<label>タグの一時的なスタイルで、オレンジ色の線はタグの一時的な境界線のスタイルです<div>(タグが伸びたり切れたりする場所を確認できます)。は、右側のと同様に<label>スタイル設定されます。さらに、 の子孫コントロールも純粋に の上部に配置されます (複数行のテキスト ボックスのような背の高いコントロールが下にあるため)。float: left<div<div>float:left<div>

ラジオ ボタンは ASP コントロールによって生成されるため、 でラップされ<span>ます<div>。

以下は、IE7 でレンダリングされた画面の同じ部分です。 代替テキスト

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

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

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

誰？

フォローアップ 1:

XHTML 1.0 Transitional を使用している<DOCTYPE>ので、標準モードにする必要があります。

フォローアップ 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;
}

解決！

Matthew は、フォーム要素の IE/Win Inherited Margins に関する このページを教えてくれましたが、それが問題でした。入力ボックスは、それを含むすべての要素の左マージンを継承していました。私が選んだ解決策は、各<input>要素を unstyled でラップすることでし<span>た。私は 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>");
    }
});

<span>これはIEの愚かなだけを追加することに注意してください...

StackOverflow が再び助けてくれます!

4

1 に答える 1

2

はinput周囲のdivとから余白を継承していolます。span や div などの別のタグで囲むと、問題が解決するはずです。

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

于 2008-10-22T04:07:26.387 に答える