IE6 中 jQuery 对话框的修复或解决方法 - 对话框包含表单时的主要布局问题

Posted 2023-05-09

【中文标题】IE6 中 jQuery 对话框的修复或解决方法 - 对话框包含表单时的主要布局问题

【英文标题】：Fix or workarount for jQuery dialog in IE6 - major layout issues when the dialog contains a form

【发布时间】：2010-09-28 21:08:41

【问题描述】：

我正在使用一个包含表单的 jQuery 对话框。在 ie6 中，表格上方有几英寸无法解释的填充。当我从标记中删除表单时，最严重的布局问题就消失了。我试过没有主题（默认）、Flora 和我的 themeroller 主题，它们似乎都有同样的问题。

我尝试对对话框 CSS 进行各种调整，但似乎没有任何效果，并且在创建对话框时会写入大量内联 CSS，从而阻止应用任何其他样式。

我尝试在表单本身上设置 css 属性，例如浮动、消除边距和填充、内联显示等，但只要表单存在，就会有额外的间距。有没有人能够找到解决方法？我宁愿不破解它并拥有没有表单标签的表单控件。

谢谢。

【参考方案1】：

每当我必须为现有网站、论坛、小部件等创建 CSS 主题时。我总是首先剥离所有样式表并将所有主要 html DOM 元素的边距和填充规范化为 0。当涉及到内联 CSS 时，这一点尤其重要。

您应该尝试删除表单元素本身的所有内联 CSS。然后尝试类似：

form 
    margin: 0;
    padding: 0;
    overflow: hidden;

在 IE6 中驯服溢出通常可以解决很多边距问题。尝试使用以下样式在所有 html 元素上临时设置边框，以查看是否有任何先前的元素溢出到表单的空间中。

* 
    border: solid 1px #FF0000;

如果您看到边框强加在表单上，​​那么您也应该尝试抑制该元素的溢出。

【讨论】：

我是个白痴，经过一番头疼后，我终于发现问题实际上是在我的 ie6 css 文件中设置的，在不同的位置 - 我在表单标签上应用了较大的上边距。所以这种诊断方法可以解决问题。我确实这样做了，但不是在我的 ie6 样式表中！

【参考方案2】：

在更改 CSS 之前，请确保您的页面具有正确的 doctype.

如果它没有文档类型，浏览器将以'quirks' 模式呈现，很多事情看起来都不太正确。

【参考方案3】：

我之前在按钮和无法解释的边距方面遇到过类似的问题。 IE6 中有一些元素继承了它们父元素的边距。好诡异……

试试这个修复：http://blog.netscraps.com/internet-explorer-bugs/ie6-ie7-margin-inheritance-bug.html

【参考方案4】：

试试这样的：

#yourDiv  padding:1.2em; margin-right:2.4em; 

#yourDiv 是包含您的标签的 div 的 id（我在输入时遇到了这个问题）。