CSS Styling Forms - IE 6/7 bug

私はフォームを使用してWebサイトを開発していますが、対象となるブラウザの1つは残念なことにIE 6と7です。私はCSSとIEのスタイルのあるフォーム要素のレンダリングに問題があります。CSS Styling Forms - IE 6/7 bug

Iは、テストケースを書いており、そのような（http://xistence.osnn.net/testcases/ie67fieldset/でもオンラインで入手可能）のようである：私はまた、2つのスクリーンショット、IE 7の一方とIE 8、IEの一つをとっている

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <title>IE [6|7] Wha?</title> 
    <style type="text/css"> 

    html, body, div, span, applet, object, iframe, 
    h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
    a, abbr, acronym, address, big, cite, code, 
    del, dfn, em, font, img, ins, kbd, q, s, samp, 
    small, strike, strong, sub, sup, tt, var, 
    dl, dt, dd, ol, ul, li, 
    fieldset, form, label, legend, 
    table, caption, tbody, tfoot, thead, tr, th, td { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     outline: 0; 
     font-weight: inherit; 
     font-style: inherit; 
     font-size: 100%; 
     font-family: inherit; 
     vertical-align: baseline; 
    } 

    /* remember to define focus styles! */ 
    :focus { 
     outline: 0; 
    } 

    body { 
     line-height: 1; 
     color: black; 
     background: white; 
    } 

    #req fieldset { 
     border: 0; 
     border-top: 1px solid #000; 
     padding: 0em 1em 0em 1em; 
    } 

    #req legend + label { 
     margin-top: 0.5em; 
    } 

    #req legend { 
     font-size: 1.2em; 
    } 

    #req label { 
     display: block; 
     background: none; 
    } 

    #req input, #req textarea { 
     position: relative; 
     display: block; 
     left: 200px; 
     top: -1em; 
     margin-bottom: -0.3em; 
    } 

    #req input[type="text"], #req textarea { 
     width: 300px; 
    } 

    #req textarea { 
     height: 3.6em; 
    } 

    #req input[type="text"], #req textarea { 
     border: 1px solid #0a0; 
    } 

    #req label.required + input[type="text"], #req label.required + textarea { 
     border: 1px solid #a00; 
    } 

    #req input[type="submit"] { 
     position: relative; 
     top: 0; 
     margin: 0; 
     left: 200px; 
     margin-top: 0.5em; 
    } 

    #req input[type="hidden"] { 
     display: none; 
    } 
    </style> 
</head> 
<body> 
<form id="req"> 
    <fieldset> 
     <legend>Contact Information</legend> 
     <label for="name" class="required">Name: </label> <input type="text" id="name" name="name"></input> 
     <label for="phone" class="required">Phone Number: </label> <input type="text" id="phone" name="phone"></input> 
     <label for="email">Email: </label> <input type="text" id="email" name="email"></input> 
    </fieldset> 
    <fieldset> 
     <legend>Personal Info</legend> 
     <label for="sports">Sports:</label> <input type="text" id="sports" name="sports"></input> 
     <label for="spentonline">Hours spent online: </label> <input type="text" id="spentonline" name="spentonline"></input> 
     <label for="moreinfo">Tell us about yourself: </label> <textarea id="moreinfo" name="moreinfo"></textarea> 
    </fieldset> 
    <fieldset> 
     <input type="submit" value="Submit" /> 
    </fieldset> 
</form> 
</body> 
</html>

7とIE 6私はIE IE 6のスクリーンショット

を取るために困っていません。このスタイリングに同意[6 | 7]： enter image description here

IE 8：

enter image description here

誰もこのバグを見たことがありますか？どこで私は間違えましたか？ IE 6/7で入力ボックスを通過する余分なラインを使わずに動作させるには、何を削除する必要がありますか？ border-topがフィールドセット上になくなったときに余分な行が削除されますが、これは解決策ではありません。

固定されています。 textareaのmargin-bottomとinput [type = "text"]がIE 6/7にレンダリングのバグを引き起こしていました。それらを削除し、すべてがうまいです。私はページ上の要素間の余分なスペースに対処することができると思います！

出典

2009-05-06 X-Istence

私はあなたが、私はこれは...あなたが入力の異なるタイプの違いを作るために、すべてのフィールド上のクラスを置きたいと思うかもしれませんIE6でサポートされてい疑う

input[type="submit"]

を使用して参照してください。

EDIT：

margin-bottom: -0.3em;

あなたは現在、多くの場合、IEでの問題につながる負のマージンを使用しているため、必要とされていない

出典

2009-05-06 18:17:03 marcgg

を削除する必要があり、私はディーンエドワーズ優れIE7-JSを使用していますIE [8 | 7]をIE 8レベルに修正するプロジェクトですが、それは次のいくつかの要素に境界線が現れるフィールドセットの問題を修正しません。 –

ハム...大丈夫です。それが問題につながっていないかどうかを再確認してください。繰り返すものを正確に見るためには、各フィールドセットに異なる罫線を付ける必要があります。私はまた、IE6の問題につながるいくつかのマイナスのマージンを参照してください。それ以外にも私はアイデアがありません... IE6 – marcgg

フィールドセットのトップボーダーは繰り返されています。負のマージンを言いました。余白を削除し、すべてがうまい！これを新しい回答に入れて、それを受け入れます:-)。 –

CSS Styling Forms - IE 6/7 bug

答えて

関連する問題