爲所有瀏覽器定位表單輸入字段

Question

這是我第三次嘗試解決這個問題 - 在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; 

} 

Answer 1

可能使用Reset CSS可以幫助

重置樣式表的目標是減少瀏覽器在 事物中的不一致性，例如默認行高度，標題的邊距和字體大小， 等等。

Answer 2

我會嘗試將.contactform css中的em值更改爲px值，並查看它是否在ff，chrome和safari中變得一致。只要這三者一致，IE就很容易修復。