Wordpress表單輸入CSS在Firefox和Chrome中的顯示方式不同

我試圖編寫電子郵件選擇框，我已經安裝了一個主題並使用Wordpress。該框看起來應該像Firefox一樣，但在Chrome中顯示不正確，包括文本字段中沒有填充，文本字段中的字體顏色不同，2px-ish填充不應位於藍色提交按鈕的上方和下方。Wordpress表單輸入CSS在Firefox和Chrome中的顯示方式不同

其中!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>

來源

2013-04-22 bob32

刪除從<input>風格line-height: 22px;線似乎更正文本的位置。

嘗試使用::-webkit-input-placeholder { color: [your color]; }更改Chrome中輸入佔位符文本的顏色。

來源

2013-04-22 02:17:04

謝謝！我不認爲你知道爲什麼在Chrome的藍色按鈕周圍存在大約2px的邊距，而不是在Firefox中（我不想要額外的空間）。另外，我似乎無法覆蓋文字輸入顏色的現有主題CSS。也許！重要的是不工作，因爲我沒有使用一個單獨的CSS文件，但把它放在style =「..」而不是class =「..」之下？再次感謝。 – bob32 2013-04-22 02:44:26

哦，我會給你投票，但我沒有名譽（就像irl），哈哈;） – bob32 2013-04-22 02:46:06

不知道是什麼創造了保證金，但如果你設置保證金：0;它擺脫它。在你的主題中有很多樣式表被調用，所以很難用':: - webkit-input-placeholder {color：[color]]來定位衝突。 }'。嘗試將其添加到HTML中：' – 2013-04-22 02:58:55

Wordpress表單輸入CSS在Firefox和Chrome中的顯示方式不同

回答

相關問題