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

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

按钮间距在Chrome，Firefox和IE11中有所不同

1 个答案: