Here is my situation, I'm having a jquery ui dialog with a jqgrid inside of it. When I opened the dialog, I can see that the grid's style has been overwritten by the dialog's style.
Is it possible to make the content of a dialog uncontaminated by the dialog's style?
I'm very sorry if the question has been asked before. Please do give me links to the threads if you be so kind.
I have made a jsfiddle here
Please any response would be appreciated
PS. Oh yes iframes does come to mind to overcome the style overwriting, but I dismissed the idea
Remove the following line ".ui-widget .ui-widget { font-size: 1em; }" from jquery-ui.css file.
Before you create more complex solution probably this simple CSS
html, body { font-size: 75%; }
will be already the workaround. The problem is that jqGrid CSS use em (relative font size) and jqGrid use absolute values in pixel. To use the same font size on the whole page you can use above CSS.
来源：https://stackoverflow.com/questions/7266992/how-to-make-jquery-uis-style-not-overwrite-jqgrids-style