jqGrid - 列的 HeaderText 未正确显示答案

【问题标题】：jqGrid - HeaderText of columns are not displayed properlyjqGrid - 列的 HeaderText 未正确显示
【发布时间】：2012-02-06 16:07:03
【问题描述】：

我有一个固定宽度为 445 像素的 jqGrid。在所有版本的 IE（v6、v7、v8 和 v9） 中，HeaderText 无法正常显示。在其他浏览器中它运行良好。 有解决这个问题的办法吗？

【问题讨论】：

在 IE 下你的意思可能是一些非常旧的 IE 版本，比如 IE6？
所有版本的 IE 6、7、8、9 的问题

标签： jquery jquery-plugins jqgrid

【解决方案1】：

我建议您验证 HTML 文件是否以 <!DOCTYPE html ... 开头：（<!DOCTYPE html> 或 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 取决于您使用的 HTML 或 XHTML 方言）。另外我建议你验证一下IE的配置是否激活了compatibility mode。如果使用兼容模式，问题可以通过包含来解决

<meta http-equiv="X-UA-Compatible" content="IE=edge" >

在 HTML 页面的 <head> 的开头。我在所有生产页面中都包含上述行。

【讨论】：

【解决方案2】：

嗯，这是一个与文档类型相关的问题。由于我正在使用一个组件并且没有页面文档类型的句柄，所以我试图找到一种解决方法。现在它对我来说效果很好..

   // Soon after rendering the jqGrid do the following operation 
   if ($.browser.msie) {
        var mode = Visifire.Validator.msiemode();
        if (mode == 5) {
            // Applying workaround for HeaderText warping issue in IE
            var gridParent = vc_JQ(dataGridSettings.parentId);
            var gridHeader = vc_JQ(".ui-jqgrid-htable", gridParent);
            var headerTextDivs = vc_JQ("div.ui-th-div-ie", gridHeader);
            headerTextDivs.width('90%');
        }
    }

【讨论】：

如果使用文本的页面没有<!DOCTYPE，文本大小错误并不是唯一的问题。您可能会在不同的浏览器中出现错误的对齐方式，例如不同的盒子模型计算等等。在这种情况下，网络浏览器将在quirks mode 中运行。你也会遇到使用 jQuery UI 的问题。我建议您，因为组件开发人员不支持在 quirks 模式下在分页中包含您的组件，就像您可能不支持在 IE5 或 IE4 中运行您的组件一样。