Question

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

Gridview Header

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

enter image description here

有谁知道如何隐藏此滚动条？我的第一次尝试是将相同的代码放入样式表中，这也没有任何帮助（只是让你知道我已尝试过两种方式）。不知何故，浏览器生成的代码总是在每次都使用-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功能添加到AutoExtend.js下面的ScriptManagerProxy文件中。

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'未定义。

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

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

1 个答案: