javascript - 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;
}

我最近在设计输入字段的样式，这应该会给您一个良好的开端。