1

IE8以降、Chrome、Safari、Forefox、Operaでも期待どおりに表示されるhtml5フォームがあります。しかし、IE7では、ラベルの配置は完全に異なります。ラベルは、入力フィールドの左側ではなく、入力フィールドの上に表示され、水平方向に配置されます。これが私が求めているものです。

StackOverflowで尋ねられたこの質問は見つかりませんでしたが、CSSのトリックを見ると非常によく似たものが見つかりました。私はここにリンクを持っていましたが、初めてのポスターとして、2つ以上のリンクが含まれているために私の質問は拒否されました（問題のスクリーンショットを示す以下の追加の2つのリンクのため）。だから私はそれを削除しなければなりませんでした...CSSトリックに関する投稿への回答は私に見るべきいくつかの領域を与えます、しかしそれは特定ではありません-それは「自分でそれを理解しました。解決策はラベルタグを動かすことと一部のIE条件付きCSS。」

フォームの表示の違いは、次のスクリーンショットに示されています。

IE7：http ://www.s203574650.websitehome.co.uk/Screenshots/IE7_form.jpg

IE10：http ://www.s203574650.websitehome.co.uk/Screenshots/IE10_form.jpg

HTMLコード：

<form id="contact" action="contact_us.php" method="post">
<div>
<label for="fullname">Your Full Name:</label>
<input id="fullname" name="fullname" type="text" placeholder="eg. John Smith" required aria-       required="true" >
</div>
<div>
<label for="email">Your Email Address:</label>
<input id="email" name="email" type="email" placeholder="eg. johnsmith@gmail.com" required aria-    required="true" title="Please enter a valid email address">
</div>
<div>
<label for="phone">Your Phone Number (optional):</label>
<input id="phone" name="phone" type="tel" placeholder="eg. 07000 123456" pattern="([0-9]|( |-)?)    {10,14}" title="Please use only digits, spaces and hyphens.">
</div>
<div>
<label for="experience">Your Badminton Experience:</label>
<select name="experience">
<option value="default">Please Choose</option>
                <option value="Intermediate">Intermediate</option>
                  <option value="Advanced">Advanced</option>
                   <option value="Don't know">Don't know</option>
                   </select>                
</div>
 <div>
<label for="club_matches">Have you previously played matches for a club?:</label>
 <input type="radio" name="club_matches" value="Yes">Yes
 <input type="radio" name="club_matches" value="No" checked>No
 </div>
<div>                   
<label for="info">Additional Info / Questions: </label>
<textarea name="info" type="text">
</textarea>
</div>
<div>
<label for="blank"></label>
<input type="submit" id="submit" value="Submit Form" name="sent">
</div>
</form>

そしてCSS：

   /* styles for contact form */
#contact
{
background-color: #DDE2E2;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-moz-border-radius: 10px; 
border-radius: 10px;
border: solid slategrey 2px;
box-shadow: 3px 3px 5px slategrey;
-o-box-shadow: 3px 3px 5px slategrey;
-moz-box-shadow: 3px 3px 5px slategrey;
-webkit-box-shadow: 3px 3px 5px slategrey;
padding: 3%;
font-family: arial;
color: #0099FF;
font-weight:bold;
align:center;
width: 80%;
margin-left:40px;
}

label
{
width: 40%;
float:left;
text-align:right;
margin-right: 2em;
font-size: 0.8em;
}

label, select, textarea, input
{
margin-bottom: 1.5em;
clear:left;
margin-left: 1em;
}

#submit
{
margin-top: 5%;
margin-bottom: 0;
}
4

1 に答える 1

2

問題は、ラベルに対してのみクリアする必要があるのに、選択ボックス、テキストエリア、入力、およびラベルのフロートをクリアしていることです。

label, select, textarea, input {
    margin-bottom: 1.5em;
    clear: left;
    margin-left: 1em;
}

のCSSセレクターから削除clear: left;し、次のCSSセレクターにlabel, select, textarea, input追加しlabelます。

label {
    width: 40%;
    float: left;
    clear: left;
    text-align: right;
    margin-right: 2em;
    font-size: 0.8em;
}
label, select, textarea, input {
    margin-bottom: 1.5em;
    margin-left: 1em;
}
于 2012-12-10T18:30:34.570 に答える