css - 定位所有浏览器的表单输入字段

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可以帮忙

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.