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

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

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

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

1 个答案: