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就很容易修复。

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

2 个答案: