c# - 在 Internet Explorer 中删除不需要的垂直滚动条

Question

在 Internet Explorer 11 中(其他浏览器没有这个问题)，下面的代码在标题中显示了一个不需要的垂直滚动条。

使用开发人员工具，您可以看到下面的蓝线覆盖了我上面两行的“!重要”覆盖

有谁知道如何隐藏这个滚动条？我的第一次尝试是将相同的代码放入样式表中，但这也无济于事(只是让您知道我已经尝试了两种方法)。不知何故，浏览器生成的代码总是把 -ms-overflow-y: visible code 放在每次!我还尝试在后面的代码中加入以下行: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"

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

'overflowHiden' is undefined.

<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';
})();