2

我有一个与此类似的问题。我正在使用 jQueryUI 选项卡来控制页面上的内容，并且在某些选项卡上我使用 jqGrid 来显示信息。jqGrid 的字体设置被选项卡定义的较大字体覆盖。该示例中的解决方案是将选项卡定义为 class ui-jqgrid。但是除了选项卡下的网格之外，他们什么都没有，因此该解决方案有效。如何仅覆盖网格的字体设置并允许 jqGrid 使用自己的字体设置，但保留选项卡下其他所有内容的设置？

你可以在这里看到它覆盖了我的 jqGrid 字体大小。我也尝试使用百分比，但它也忽略了这一点。

CSS 计算

更新 - CSS 计算样式： 在此处输入图像描述

4

1 回答 1

3

有很多方法可以解决问题。您如何确认此处描述的方式有效，但它会使其他文本具有11px您不想要的字体。

字体的问题是 CSS 设置（见这里）

.ui-widget .ui-widget { font-size: 1em; }

因为 Tab 和 jqGrid 都有类"ui-widget"，所以设置会覆盖 jqGrid.css 中的字体设置（请参见此处）：

.ui-jqgrid {position: relative; font-size:11px;}

结果你得到了演示中的图片：

在此处输入图像描述

jQuery UI 使用em样式。例如，您可以在页面的 CSS 中包含以下内容

html, body { font-size: 75% }

（见这里）。在这种情况下，您将获得以下结果（请参阅演示）：

在此处输入图像描述

顺便说一下 jqGrid 的文档间接建议（请参阅此处的 HTML 页面示例）。我了解您可能不希望更改页面上其他字体的大小。

在这种情况下，您可以使用例如

.ui-jqgrid { font-size: 11px !important; }

或者以下

.ui-jqgrid .ui-jqgrid-view { font-size: 11px; }
.ui-jqgrid .ui-jqgrid-pager { font-size: 11px; }
.ui-jqgrid .loading { font-size: 11px; }

您可以在下一个演示中看到该方法的结果：

在此处输入图像描述

如果我理解你是正确的，那就是你想要的结果。

更新：如果您使用 Chrome 的开发者工具，您可以看到与 IE 开发者工具中相同的信息来定位覆盖font-sizejqGrid 的 CSS 样式。例如，在我的第一个演示中，您将看到

在此处输入图像描述

因此，如果在您的应用程序中我的上述建议不起作用，您应该检查应用于任何网格单元格的有效 CSS 样式，并找出哪个 CSS 设置覆盖了 jqGrid 的 CSS。

更新 2：从您通过电子邮件发送给我的链接中，我可以看到问题存在，因为您<!DOCTYPE html ...>之前忘记包含任何声明<html>。因此，Web 浏览器将您的页面解释为在 HTML 3.2 发布之前（1997 年之前）编写的非常老式的 HTML。它因此被命名为Quirks 模式。

要解决问题，您应该<html>在行之前包括

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

要不就

<!DOCTYPE html>

（HTML5 标准）。此外，我强烈建议您在一些 HTML valirador 中验证您的 HTML 页面，例如http://validator.w3.org/。您当前的代码是 HTML 和 XHTML 之间的混合，这不好。

更新 2：我另外发布了功能请求，我建议在 的情况下停止创建 jqGrid document.documentMode <= 5，因此在使用Quirks 模式（否<!DOCTYPE html ...>）的情况下。

更新 3：根据问题/答案，我向 trirand 发布了两个建议：this和this。这两个建议都被接受并且现在是 jqGrid 的一部分（请参见此处和此处）。所以下一个版本的用户应该没有描述的问题。

于 2012-06-07T17:14:38.230 回答