Chrome，firefox和IE11中的按鈕間距不同

Question

由於瀏覽按鈕（輸入控件）在這三種瀏覽器中看起來都不同，因此我嘗試通過將其不透明度設置為0並在其下放置一個虛擬按鈕，使其看起來像用戶單擊虛擬按鈕（甚至確保瀏覽控件的大小與虛擬按鈕的大小相同），並且在IE 11中正常工作。當我在chrome和firefox中測試頁面時，存在一些間距問題，在Firefox中，我為輸入控件設置的寬度不管用。

<input id="Browse" type="file" value="button" style="z-index:12; position:relative; left:0px;opacity:0; width:63px; display:inline-block">
     <asp:button ID="btnBrowse" runat="server" text="Browse" style="z-index:1;        position:absolute;left:595px; height:21.5px"/>
</input>

這就是我所做的。 有人可以幫我嗎？

Answer 1

如果希望它們看起來相同或至少接近，則對按鈕元素應用重置樣式。

重置CSS

input{
    display: inline-block; /* allows margins and padding, but floats like text */
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0; /* removes the outline when you click a form element */
}

樣式CSS

input{
    height: 1.5rem;
    width: auto;
    padding: 0.75rem 1.5rem;
    line-height: 1.5rem; /* same as height - centers vertically */
    color: black;
    background: gray;
}

我最近在設計輸入字段的樣式，這應該為您提供一個良好的開端。