1

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

 }
4

2 回答 2

0

可能使用重置 CSS会有所帮助

重置样式表的目标是减少浏览器在默认行高、页边距和标题字体大小等方面的不一致。

于 2012-08-04T01:10:16.670 回答
0

我会尝试将 .contactform css 中的 em 值更改为 px 值,看看它是否在 ff、chrome 和 safari 中变得一致。只要这三者一致,IE 修复起来就非常简单。

于 2012-08-04T01:18:07.517 回答