Edge浏览器IE模式下ASP.NET内容页移除Select控件箭头失效问题

在Edge浏览器的IE模式中，ASP.NET内容页里使用select::-ms-expand {display: none;}移除Select控件默认箭头的操作失效，涉及的代码包含UpdatePanel组件。以下是几种可行的解决思路：

1. 提升CSS选择器优先级 #

IE模式下原生样式优先级较高，通过类名限定+强制覆盖的方式确保样式生效：

select.Dropdown::-ms-expand {
    display: none !important;
}

通过.Dropdown类精准定位目标Select，再用!important强制覆盖IE的默认箭头样式，避免优先级不足导致样式不生效。

2. 处理UpdatePanel局部刷新后的样式失效问题 #

UpdatePanel局部刷新时，动态渲染的Select可能无法自动应用样式，可通过页面请求结束事件触发重绘：

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
    // 触发目标Select重绘，确保样式生效
    const dropdown = document.getElementById('<%= DropDown.ClientID %>');
    if (dropdown) {
        dropdown.style.display = dropdown.style.display;
    }
});

这段代码会在每次UpdatePanel请求结束后，强制触发Select元素的重绘，保证样式重新应用。

3. 替换为自定义下拉框（彻底兼容IE模式） #

如果上述方法仍无法解决，可完全抛弃原生Select的样式，用自定义结构模拟下拉框：

<div class="custom-dropdown" onclick="toggleDropdown(this)">
    <asp:Label ID="DropdownLabel" runat="server" CssClass="dropdown-label" Text="请选择"></asp:Label>
    <asp:HiddenField ID="DropdownValue" runat="server" />
    <ul class="dropdown-options">
        <!-- 可通过后台代码动态生成选项 -->
        <li data-value="1">选项1</li>
        <li data-value="2">选项2</li>
    </ul>
</div>

搭配CSS样式和简单的JavaScript逻辑实现下拉交互，完全不受原生Select的样式限制，在IE模式下兼容性更稳定。

额外排查要点 #

• 确保CSS代码在母版页全局加载，或在Content页的<head>区域引入，避免UpdatePanel刷新后样式丢失
• 按F12打开开发者工具，切换到IE渲染模式，检查CSS选择器是否正确匹配到Select元素，排查样式是否被覆盖

内容的提问来源于stack exchange，提问作者Natarajan Thiruganasambandam