jqGrid字体设置被jQueryUI选项卡设置覆盖 [英] jqGrid font settings overwritten by jQueryUI tab settings
问题描述
我与这个问题类似.我正在使用jQueryUI选项卡来控制页面上的内容，在某些选项卡上，我正在使用jqGrid来显示信息.选项卡定义的较大字体将覆盖jqGrid的字体设置.该示例中的解决方案是将选项卡定义为类ui-jqgrid.但是除了选项卡下的网格外，他们什么都没有，因此该解决方案有效.如何只为网格覆盖字体设置，并允许jqGrid使用其自己的字体设置，但保留选项卡下其他所有元素的设置?
I have a similar problem to this one. I am using jQueryUI tabs to control content on the page, and on some of the tabs I am using jqGrid to display information. The font settings from jqGrid are being overwritten by the larger fonts defined by the tabs. The solution in that example was to define the tab as being of class ui-jqgrid. But they didn't have anything except the grids under their tabs, so that solution works. How do I override the font settings for just the grid and allow jqGrid to use its own font settings, but retain the settings for everything else under the tab?
您可以在此处看到其覆盖我的jqGrid字体大小的位置.我也尝试使用百分比，但是它也忽略了这一点.
You can see here where it is overwriting my jqGrid font size. I tried using a percentage as well, but it just ignored that too.
已更新-CSS计算样式:
UPDATED - CSS Computed Style:
推荐答案
有很多方法可以解决此问题.如何确认此处所描述的方式，但是它使其他文本具有11px字体，而您却没有想要.
There are many ways to solve the problem. How you can confirm the way described here works, but it makes other texts to have 11px font which you don't want.
The problem with the font is the CSS setting (see here)
.ui-widget .ui-widget { font-size: 1em; }
因为Tab和jqGrid都具有类"ui-widget"，所以该设置会覆盖jqGrid.css中的字体设置(请参见
Because both Tab and jqGrid have the class "ui-widget" the setting overwrite the font setting from the jqGrid.css (see here):
.ui-jqgrid {position: relative; font-size:11px;}
结果，您在
As the result you have the picture like on the demo:
jQuery UI使用em样式.因此，例如，您可以在页面的CSS中包含以下内容
jQuery UI uses em style. So you can for example include in the CSS of your page the following
html, body { font-size: 75% }
(请参见此处).在这种情况下，您将获得以下结果(请参见演示) :
(see here). In the case you will have the following results (see the demo):
By the way the documentation of jqGrid suggest indirectly (see example of HTML page here). I understand that it could be situations where you want don't change the size of other fonts on the page.
在这种情况下，您可以使用
In the case you can use for example
.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; }
您可以在
如果我了解您的要求，那就是您想要的结果.
If I understand you correct it's the results which you want to have.
已更新:如果您使用Chrome的开发者工具，则可以看到与IE开发者工具中相同的信息，以查找覆盖jqGrid的font-size的CSS样式.例如，在我的第一个演示中，您会看到
UPDATED: If you use Developer Tools of Chrome you can see the same information as in IE Developer Tools to locate the CSS style which overwrite font-size of jqGrid. For example in my first demo you will see
因此，如果上面的建议在您的应用程序中不起作用，则应检查适用于任何网格单元的有效CSS样式，并找出哪个CSS设置会覆盖jqGrid的CSS.
So if in your application my above suggestions not work you should examine the effective CSS styles aplied to any grid cell and find which CSS setting overwrite CSS of jqGrid.
更新2 :从您通过电子邮件发送给我的链接中，我可以看到问题存在，因为您忘记了在<html>之前包含任何<!DOCTYPE html ...>声明.因此，Web浏览器将您的页面解释为在发布HTML 3.2之前(1997年之前)编写的非常老风格的HTML.这样命名为 Quirks模式.
UPDATED 2: From the link which you send me per email I could see that the problem exist because you forgot to include any <!DOCTYPE html ...> declaration before <html>. So the web browser interpret your page as very old style HTML written in the time before even HTML 3.2 was published (before 1997). It's so named Quirks mode.
要解决该问题，您应该在<html>之类的行之前添加
To solve the problem you should include before <html> the line like
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
或者只是
<!DOCTYPE html>
(HTML5标准).此外，我强烈建议您在 http://validator.w3.org/.您当前的代码是HTML和XHTML之间的混合，效果不好.
(HTML5 standard). Moreover I strictly recommend you to validate your HTML pages in some HTML valirador like http://validator.w3.org/. You current code is a mix between HTML and XHTML which is not good.
更新2 :我另外发布了 Quirks模式(否<!DOCTYPE html ...>).
UPDATED 2: I posted additionally the feature request where I suggest to stop creating of jqGrid in case of document.documentMode <= 5, so in case of usage Quirks mode (no <!DOCTYPE html ...>).
更新3 :基于问题/答案，我向trirand发表了两个建议:此.这两个建议都已被接受并且现在是jqGrid的一部分(请参见此处和此处).因此，下一版本的用户应该不会遇到上述问题.
UPDATED 3: Based on the question/answer I posted two suggestions to trirand: this and this. Both suggesting was accepted and are the parts of jqGrid now (see here and here). So the user of the next version should don't have the described problem.
这篇关于jqGrid字体设置被jQueryUI选项卡设置覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
