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