jqGrid字体设置被jQueryUI选项卡设置覆盖
我有一个类似的问题。 我使用jQueryUI选项卡来控制页面上的内容,在一些选项卡上我使用jqGrid来显示信息。 jqGrid的字体设置被选项卡定义的较大字体覆盖。 该示例中的解决方案是将选项卡定义为类ui-jqgrid
。 但除了标签下的网格外,他们没有任何东西,所以解决方案有效。 如何覆盖网格的字体设置并允许jqGrid使用自己的字体设置,但保留选项卡下其他所有内容的设置?
你可以在这里看到它覆盖我的jqGrid字体大小。 我也尝试使用百分比,但它也忽略了这一点。
更新 – CSS计算风格:
有很多方法可以解决这个问题。 如何确认此处描述的方式有效,但它使其他文本具有您不需要的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 Developer Tools中相同的信息,以找到覆盖jqGrid font-size
的CSS样式。 例如,在我的第一个演示中,您将看到
因此,如果在您的应用程序中我的上述建议不起作用,您应该检查适用于任何网格单元格的有效CSS样式,并找到覆盖jqGrid的CSS的CSS设置。
更新2 :从您通过电子邮件发送给我的链接中我可以看到问题存在,因为您忘记在之前包含任何
声明。 因此,Web浏览器将您的页面解释为在HTML 3.2发布之前(1997年之前)编写的非常旧的HTML样式。 这就是Quirks模式 。
要解决这个问题,你应该在之前包含这样的行
要不就
(HTML5标准)。 此外,我严格建议您在某些HTML valirador中validation您的HTML页面,例如http://validator.w3.org/ 。 您当前的代码是HTML和XHTML之间的混合,这是不好的。
更新2 :我另外发布了function请求 ,我建议在document.documentMode <= 5
情况下停止创建jqGrid,因此在使用Quirks模式的情况下 (没有 )。
更新3 :基于问题/答案,我向trirand发布了两条建议: 这个和这个 。 两个建议都被接受了,现在是jqGrid的一部分(见这里和这里 )。 因此,下一版本的用户应该没有所描述的问题。