为所有浏览器定位表单输入字段

这是我第三次尝试解决这个问题 - 在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; 

}

来源

2012-08-04 user1505573