Internet Explorer 静态 GridView 问题答案

【问题标题】：Internet Explorer Static GridView issuesInternet Explorer 静态 GridView 问题
【发布时间】：2017-04-22 16:12:47
【问题描述】：

我的静态 GridView Header 遇到了一些非常奇怪的问题。 IE 中的行没有正确排列；他们中的一些人这样做，而另一些人则没有。有人可以帮我吗？它在 Chrome 中完美运行，而不是在 IE 中。

铬：

IE：

这是我的相关代码。

    <script type="text/javascript">
                    function MakeStaticHeader(gridId, height, width, headerHeight, isFooter) {
                        var tbl = document.getElementById(gridId);
                        if (tbl) {
                            var DivHR = document.getElementById('DivHeaderRow');
                            var DivMC = document.getElementById('DivMainContent');
                            var DivFR = document.getElementById('DivFooterRow');

                            //*** Set divheaderRow Properties ****
                            DivHR.style.height = headerHeight + 'px';
                            DivHR.style.width = (parseInt(width) - 50) + 'px';
                            DivHR.style.position = 'relative';
                            DivHR.style.top = '0px';
                            DivHR.style.left = (tbl.clientLeft-25) +'px';
                            DivHR.style.zIndex = '10';
                            DivHR.style.verticalAlign = 'top';
                            DivHR.style.alignContent = 'center';

                            //*** Set divMainContent Properties ****
                            DivMC.style.width = width + 'px';
                            DivMC.style.height = height + 'px';
                            DivMC.style.position = 'relative';
                            DivMC.style.top = -headerHeight + 'px';
                            DivMC.style.zIndex = '1';
                            //****Copy Header in divHeaderRow****
                            DivHR.appendChild(tbl.cloneNode(true));
                        }
                    }



                    function OnScrollDiv(Scrollablediv) {
                        document.getElementById('DivHeaderRow').scrollLeft = Scrollablediv.scrollLeft;
                        //if (document.getElementById('DivHeaderRow').scrollLeft >= 300) {
                        //    document.getElementById('DivHeaderRow').scrollLeft = 300;
                        //}
                    }

                </script>

CSS

  html, body {
  margin:0px;
  padding:0px;
  width: 100%;
  box-sizing: border-box;
 }

CSS 标题样式

.GVFixedHeader
    {
        font-weight: bold;
        background-color: Green;
        position: relative;
        font-size: 12px;
        text-align: left;
    }

【问题讨论】：

标签： html css asp.net internet-explorer gridview

【解决方案1】：

这与 IE 如何呈现 GridView 有关。我会在表格的一个单元格上自定义更改我的格式，但这会弄乱 IE 并更改默认设置。 Chrome 会正确识别出我只想添加样式而不是完全更改。

  for (int i = 0; i < e.Row.Cells.Count; i++)
                {
                    if (e.Row.RowType == DataControlRowType.Header)
                    {
                        e.Row.Cells[i].Attributes.Add("style", "white-space: inital;");
                        e.Row.Cells[i].Attributes.Add("style", "text-align: left;");//THIS IS WHAT I ADDED + some altering of the width of the JS
                        if (i == 1)
                        {
                            e.Row.Cells[i].Text = "Make Inactive?";
                        }
                        if (i == 9)
                        {
                            e.Row.Cells[i].Text = "Total Invoice YTD";
                            e.Row.Cells[i].Attributes.Add("style", "white-space: normal;");
                        }
                        if (i == 13)
                        {
                            e.Row.Cells[i].Attributes.Add("style", "white-space: normal;");
                        }
                    }
                    if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Cells[i].Attributes.Add("style", "white-space: nowrap;"); } //ALWAYS makes sure there is no wrapping of text
                }

【讨论】：