これは、この問題を解決するための 3 回目の試みです。stackoverflow コミュニティの人々の助けを借りて、解決にかなり近づいたと思います。私が作成したお問い合わせフォームの入力フィールドは、Chrome と Safari では (FF に関連して) 低くなり、IE では高くなります。私はここで与えられた提案の多くを実装しましたが、それでもすべてのブラウザーにそれらを配置することはできません. normalize.css を使用することで、ある程度の進歩を遂げることができました
テストページを設定しました: http://tinyurl.com/d3pxoe2
ここに私の連絡先フォームがあります:
<div id="contactcontainer" class="contactform">
<form method="post" name="validation" action="index.php" onsubmit="return validateForm();">
<div class="containerleftside">
<input type="text" class="shared" name="firstname" autofocus placeholder="Your first name" value="<?php echo $firstname;?>" style="margin-left:142px; margin-top: 108px;"/>
<input type="text" class="shared" name="lastname" placeholder="Your last name" value="<?php echo $lastname;?>" style="margin-left:140px; margin-top:2px;"/>
<input type="text" class="shared" name="email" placeholder="Your email name" value="<?php echo $email;?>" style="margin-left:84px; margin-top:1px;" />
<input type="text" class="shared" name="location" placeholder="Your location" value="<?php echo $location;?>" style="margin-left: 116px; margin-top:0px;"/>
</div><!--close of container left-->
<div align="right" class="containerrightside">
<textarea name="message" placeholder="What say you?"></textarea>
<img style="margin-top:-10px; float:right; margin-right:3px;" src="CaptchaSecurityImages.php" />
<p style="float:left; margin-top:-10px; text-align:left; font-family:'form', 'formIE'; font-size:24px; color:#000;">Security Code:</p>
<input id="security_code" name="security_code" type="text" style="width:125px; float:left; margin-right:80px; height:1.4em; line-height:1.4em; font-size:1.4em; margin-top:-28px;"/>
<input class="contact" type="submit" name="submitted" value="contactus" />
</div><!-- end of containerrightside-->
</div><!-- end of contactcontainer-->
</form>
そして、ここにcssがあります：
#contactcontainer {
background-image:url(../images/contactform.png);
background-repeat:no-repeat;
width:618px;
height:318px;
margin:-10px auto;
}
.contactform{width:100%; height: 318px; margin:0 auto; padding:0;}
.contactform input, textarea { background: none; font-size:1.4em; border:none; font-family:'form', 'formIE'; font-color:#999;}
.contactform .contact{font-size:0px; width:91px; display:block; height:34px; float:right; margin-top:-25px;}
.contactform .shared{height:1.4em; width: 150px; line-height:1.4em;}
textarea {
height:120px;
color: #666;
width:260px;
margin-top:20px;
}
input:focus, textarea:focus {
border:1px solid #99cc66;
}
.contact:hover {cursor:pointer;}
.containerleftside {
width: 50%;
float: left;
margin-top:5px;
text-align:left;
}
.containerrightside {
width: 48%;
float: right;
margin-top:110px;
text-align:left;
height:208px;
}