jquery - jquery dialogs in quirks mode doesn't set height correctly

Question

I am writing a jquery based widget that will go on another company's website. When I try to set the height of the dialog via $('#dialog').height(450), it sets the dialog to be much shorter. I'm able to get it about 450px high by using 300 (I know, makes no sense). I've determine that the bug happens in IE8 in quirks mode. Yes, I know jquery doesn't support quirks mode. I can't change the doctype, since it's not my website.

Even though what I did worked, I need to understand why. Is there a definitive guide to how jquery works in quirks mode?

Answer 1

您是否对对话框应用了填充？

如果您使用的是 quirks 模式，盒子模型的呈现方式会有所不同。

见http://www.quirksmode.org/css/box.html

Answer 2

尝试添加此样式规则并根据您的要求调整高度：

.ui-dialog { height:700px !important; }

打开对话框

dialog.dialog("open");

并将对话框的高度设置为自动以调整内部内容：

dialog.css("height", "auto");

Answer 3

You should try to avoid quirks mode, if possible. However, if that isn't an option, I've had success doing this: (I'm assuming that you're using jQueryUI)

$(".ui-dialog-content").css("height", "450px");

Which resizes the outer CSS of the jQueryUI dialog.