Wordpress 表单输入 css 在 Firefox 和 Chrome 中显示不同

Question

我正在尝试编写一个电子邮件选择框，我已经安装了一个主题并且正在使用 Wordpress。该框在 Firefox 中看起来应该如此，但在 Chrome 中显示不正确，包括文本字段中没有填充，文本字段中的字体颜色不同，2px-ish 填充不应位于蓝色提交按钮的上方和下方。

包含!important没有效果。

网站是http://shannonconfairphotography.com，框在页面顶部，在firefox中显示很好。通常我看不出 Chrome 和 Firefox 之间有什么区别，只有 IE，所以我很难过。

箱码为：

<div style="background-color:#efefef; padding:0; margin:0; -webkit-box-sizing:content-box !important; -moz-box-sizing:content-box !important; box-sizing:content-box !important;">
<span style="font-family: 'Rouge Script', cursive; font-size:30px; line-height:16px; color:#8e8e8e; margin-right:15px; padding-left:15px;"> 5 easy ways to save money on your wedding...</span>
 <form style="display:inline; margin:0px; padding:0px; height:100%;" action="https://madmimi.com/signups/" method="post" target="_blank"> 
    <input style="display:inline; margin:0px; font-family: 'Rouge Script', cursive; font-size:28px; line-height:22px; height:40px; border:none; color:#acacac; background-color:#fff; width:200px; padding-left:10px; margin-right:5px;" id="signup_first_name" name="signup[first_name]" type="text" placeholder="first name">
    <input style="display:inline; margin:0px; font-family: 'Rouge Script', cursive; font-size:28px; line-height:22px; height:40px; border:none; color:#acacac; background-color:#fff; width:200px; padding-left:10px; margin-right:11px;" name="signup[email]" type="text" placeholder="email"> 
    <input style="background-image:none; border: none; background-color:#023972; color:#fff; font-family: 'Rouge Script', cursive; font-size:28px; padding:10px;" value="get it!" type="submit" class="submit"> 
  </form>
  </div>

Answer 1

从<input> 样式中删除line-height: 22px; 行似乎可以更正文本的位置。

尝试使用::-webkit-input-placeholder { color: [your color]; } 更改Chrome 中输入占位符文本的颜色。