jqGrid字体设置被jQueryUI标签设置覆盖

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

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

CSS Calues

更新 - CSS计算样式： enter image description here

来源

2012-06-07 Dave

有很多方法来解决这个问题。如何确认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的的文档间接建议（见例如here 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; }

这种方法的结果，你可以在the next demo看到：

enter image description here

如果我理解你纠正它是你想要的结果。

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

enter image description here

因此，如果您的应用程序我的上述建议没有工作，你应该检查应用。查阅全文任何网格单元有效的CSS样式，并找到其CSS设置的jqGrid的覆盖CSS。

更新2：从你给我每封邮件，我可以看到问题存在，因为你忘了<html>之前，包括任何<!DOCTYPE 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页面中验证您的HTML页面，如http://validator.w3.org/。您目前的代码是HTML和XHTML之间的混合，并不好。

更新2：我还the feature request张贴在我建议停止的jqGrid的创造的document.documentMode <= 5情况，所以在使用Quirks mode的情况下（无<!DOCTYPE html ...>）。

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

来源

2012-06-07 17:14:38 Oleg

这正是我所期待的。但是当我尝试'.ui-jqgrid {position：relative; font-size：11px！important;}'它只是改变了标题的字体大小。表中的数据和导航栏中的数据都很大。我尝试了您的替代方案，但似乎也没有效果。 – Dave

@Dave：原因可能只有**你多使用一个CSS **。只需使用F12打开IE开发人员工具。选择“HTML”标签。按刷新（F5）加载页面数据。按下Ctrl-B或使用“查找”菜单，然后选择网格的任何单元格。在右侧部分滚动样式并找到其中'font-size'仍处于活动状态的CSS样式。这是在你的情况下解决问题的CSS。在我的演示中，它将是'.ui-widget .ui-widget {font-size：1em; }就像我在我的回答中所描述的那样。 – Oleg

我明白了。我似乎无法弄清楚的是如何为jqGrid覆盖该值，但是对于整个jqGrid。你的答案关于使用'！important'在你的第三个例子中是完美的，那就是我正在寻找的东西。但是当我这样做时，它只是用正确的字体大小格式化表格的标题。 – Dave

jqGrid字体设置被jQueryUI标签设置覆盖

回答

相关问题