輸入框和按鈕不匹配IE和Firefox

我有一個搜索框在我正在做的頁面頂部，我一直在試圖使頁面跨瀏覽器友好以及有一個靈活的頁面分辨率。輸入框和按鈕不匹配IE和Firefox

我也碰到過這個問題

的按鈕，輸入框不水平排隊。無論我將其更改爲其中一個在另一個瀏覽器上總是與另一個不同。

有誰知道跨瀏覽器友好的解決方案嗎？

HTML

<div id='search'> 
       <form> 
        <input class='search' type="text" placeholder="what would you like to find?" required> 
        <input class='button' type="button" value="search"> 
       </form> 
      </div>

CSS

#search { 
    padding-left:200px; 
    margin-right:5px; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 12px; 
    } 

.search { 
    margin-top:5px; 
    padding:4px 15px; 
    width:250px; 
    background:#FFF; 
    border:none; 
    color:#232d38; 
    } 

.button { 
    position:relative; 
    padding:4px 15px; 
    left:-4px; 
    border:none; 
    background-color:#FFF; 
    color:#232d38; 
    } 

.button:hover { 
    border:none; 
    background-color:#FFF; 
    color:#000; 
    }

來源

2014-09-24 John Doe

Firefox對輸入（任何類型）的輸入行高都不好用。 – 2014-09-24 05:07:15

抓痕！顯然，他們決定在最新版本中實現這一點。只需將font-size：12px添加到每個輸入。 – 2014-09-24 05:15:51

沒有工作。另一方面，較小的字體看起來更好。 – 2014-09-24 06:17:01

我已經找到了解決辦法。

問題歸結於瀏覽器的默認樣式。 Mozilla的，在他們無窮的智慧，都選擇把此行中他們的CSS：

button, input[type="reset"], input[type="button"], input[type="submit"] { 
line-height:normal !important; 
}

在Firefox中，按鈕得到額外的2px填充。在所有其他瀏覽器中，他們沒有。所以不可能僅僅使用填充來匹配它們。

您必須將頂部和底部填充設置爲0px，並使用height: 25px; vertical-align: middle;來彌補填充損失。

來源

2014-09-24 17:46:29

我有這個相同的問題，並使用約翰的答案上面提出一個解決方案，而不必使用高度和vertical-align屬性。

在我的復位樣式中，我基本做到了讓所有輸入都具有正常的行高，這樣Chrome就可以像Firefox和IE一樣渲染。這個和John的代碼之間的重要補充是針對一般的輸入選擇器：

button, input[type="reset"], input[type="button"], input[type="submit"], input 
{ 
line-height:normal !important; 
}

來源

2017-11-09 21:11:51 Danielle

輸入框和按鈕不匹配IE和Firefox

回答

相關問題