Question

我遇到与this one类似的问题。我使用jQueryUI选项卡来控制页面上的内容，在一些选项卡上我使用jqGrid来显示信息。来自jqGrid的字体设置被选项卡定义的较大字体覆盖。该示例中的解决方案是将选项卡定义为类ui-jqgrid。但除了标签下的网格外，他们没有任何东西，所以解决方案有效。如何仅覆盖网格的字体设置并允许jqGrid使用自己的字体设置，但保留选项卡下其他所有内容的设置？

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

CSS Calues

更新 - CSS计算风格： enter image description here

Answer 1

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

字体的问题是CSS设置（请参阅here）

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

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

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

结果你得到了the demo上的图片：

enter image description here

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

html, body { font-size: 75% }

（见here）。如果您将获得以下结果（请参阅the demo）：

enter image description here

顺便提一下jqGrid的文档间接建议（参见HTML页面here的例子）。据我所知，您可能希望不要更改页面上其他字体的大小。

如果您可以使用例如

.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; }

您可以在the next demo上看到的方法的结果：

enter image description here

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

更新：如果您使用Chrome的开发者工具，您可以看到与IE Developer Tools中相同的信息，以找到覆盖jqGrid font-size的CSS样式。例如，在my first demo中，您将看到

enter image description here

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

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

要解决此问题，您应该在<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 ：我另外发布the feature request我建议在document.documentMode <= 5的情况下停止创建jqGrid，因此在使用Quirks mode的情况下（否） <!DOCTYPE html ...>）。

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

jqGrid字体设置被jQueryUI选项卡设置覆盖

1 个答案: