删除 Internet Explorer 中不需要的垂直滚动条

Question

在 Internet Explorer 11 中（其他浏览器没有此问题），以下代码在标题中显示了不需要的垂直滚动条。

使用开发者工具，您可以看到下面的蓝线覆盖了我的 '!important' 覆盖上面的两行

有谁知道如何隐藏这个滚动条？我的第一次尝试是将相同的代码放入样式表中，但这也无济于事（只是让您知道我已经尝试了两种方法）。不知何故，浏览器生成的代码总是把 -ms-overflow-y: 可见代码放在每次！我还尝试在后面的代码中添加以下行：gvHeaders.Style.Add("overflow-y", "hidden !important")。我还尝试将 noOverflowy CssClass 放在 CoolGridView 标记中。这是一个使用 C# 的 ASP.NET 页面。

<asp:UpdatePanel ID="pnlOrders" runat="server" Width="942px" Style="margin-left: 10px" UpdateMode="Always">
    <ContentTemplate>
    <div id="HeaderDiv" runat="server" style="overflow-y: hidden !important" >
        <cool:CoolGridView ID="gvHeaders" runat="server"
            AlternatingRowStyle-BackColor="#FAFAFA" Width="929px"
            AutoGenerateColumns="False" AllowSorting="True" OnSorting="SortOrders"
            OnRowCommand="gvOrders_RowCommand" EmptyDataText="No Data to Display"
            OnRowDataBound="gvHeaders_RowDataBound"
            DataKeyNames="Id" HeaderStyle-Height="25px" BorderStyle="None"
            FixHeaders="True" EnableViewState="true">
            <AlternatingRowStyle BackColor="White"/>
            <EditRowStyle BackColor="#2461BF" CssClass="craig"/>
            <BoundaryStyle BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" />
            <FooterStyle BackColor="LightGray" Font-Bold="False" ForeColor="Black" />
            <HeaderStyle BackColor="LightGray" Height="25px" Font-Size="11" Font-Bold="False" ForeColor="Black" BorderWidth="1px" BorderColor="Gray" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#EFF3FB"  Height="22px" CssClass="craig"/>
            <Columns>
                <asp:TemplateField HeaderText="Open">
                    <ItemTemplate>

...

我已将下面的overflowHidden 函数添加到包含在下面ScriptManagerProxy 中的AutoExtend.js 文件中。

function overflowHidden() {
    document.getElementById('ContentPlaceHolder1_UCOrdersControl_gvHeadersjEsCoOl_headerDiv').style.msOverflow = 'hidden';
}

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server" >
    <Scripts>
       <asp:ScriptReference Path="../common/script/AutoExtend.js"/>
    </Scripts>
</asp:ScriptManagerProxy>

由于这是母版页的一部分，我必须使用这个ScriptManagerProxy 标签，对吗？ HTML 仍然没有改变。

<asp:UpdatePanel ID="pnlOrders" runat="server" Width="942px" Style="margin-left: 10px" UpdateMode="Always">
    <ContentTemplate>
        <script type="text/javascript">
            $(function() {
                overflowHidden();
            });
        </script>
    <div id="HeaderDiv" runat="server" >
        <cool:CoolGridView ID="gvHeaders" runat="server"

如果我将上面的overflowHidden() 函数替换为 alert("hellow world");我确实收到了这条消息，但是，首先我得到的是一个 JavaScript 运行时错误：

'overflowHiden' 未定义。

<asp:UpdatePanel ID="pnlOrders" runat="server" Width="942px" Style="margin-left: 10px" UpdateMode="Always">
    <ContentTemplate>
        <script type="text/javascript">
            $(function () {
                alert("About to set msOverFlow style to hidden");
                document.getElementById('ContentPlaceHolder1_UCOrdersControl_gvHeadersjEsCoOl_headerDiv').style.msOverflow = 'hidden';
            });
        </script>
    <div id="HeaderDiv" runat="server" >
        <cool:CoolGridView ID="gvHeaders" runat="server"
        ...

这是我上面的最新尝试。我确实收到了警报弹出窗口，但呈现的 HTML 保持不变。

Answer 1

当涉及到 ASP.NET 中的服务器控件呈现时，除了彻底检查正在使用的控件的文档以修改其布局之外，您无能为力（BTY，对生成的 HTML 缺乏控制是切换到 ASP.NET MVC 的主要原因之一）。但是，您始终可以通过 JavaScript 破解生成的 HTML。所以你可以这样做：

(function() {
   document.getElementById('ContentPlaceHolder1_UCOrdersControl_gvHeadersjEsCoOl_headerDiv').style.msOverflow = 'hidden';
})();