0

我有一个带有图像代替箭头的下拉菜单。但我遇到了交叉浏览问题。在 chrome 中显示正常，但在 Mozilla 中，图像显示在后面。附上截图。

下拉 HTML

<td align="right">
 <div class="blue" style="float: left;">
    <div class="lightblueHeading" style="text-align: left;">No. Of Guests</div>
    <div>
        <div class="styled-select">
            <asp:DropDownList ID="ddlNoOfGuest" runat="server" Style="width: 165px;"></asp:DropDownList>
        </div>
    </div>
 </div>
</td>

班级

.styled-select
{
    overflow: hidden; /*height: 24px;     background: url(../images/dropdown_icon.png) no-repeat right;*/
    background: url(../images/signup-dropdown_icon.png) no-repeat right;
    background-color: white;
    width: 100%;
}
.styled-select select
{
    background: transparent; /*border: 1px solid #e8e9e9;*/
    font-size: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    visibility: hidden;

}

铬下拉

Mozilla 下拉菜单

4

2 回答 2

0

您尝试的方法并非在每个浏览器中都完全兼容，并且您面临浏览器兼容性问题以及您如何解决问题的一些方法，但将来您可能会遇到浏览器兼容性问题，因为市场上有很多版本的 IE 每个人最喜欢的是 IE7 . 因此，为了解决这个问题，我的建议是使用基于 jquery 的插件，如下所示：

  1. http://www.bulgaria-web-developers.com/projects/javascript/selectbox/
  2. http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/
于 2013-02-21T15:53:19.320 回答
0

用作标签opacity:0的属性。select

于 2013-02-21T15:31:59.923 回答