IE7 上的 JQuery 方法 .before() 或 .insertBefore()答案

【问题标题】：JQuery method .before() or .insertBefore() on IE7IE7 上的 JQuery 方法 .before() 或 .insertBefore()
【发布时间】：2011-11-10 02:51:22
【问题描述】：

我正在尝试在复选框之前插入一个颜色 div，使用 jQuery 1.5.1 的 .before() 方法，该方法在 FF、Chrome、IE8+ 上运行良好；但对于 IE7，插入的颜色 div 与复选框不在同一行。我希望有人能给我任何建议。谢谢。附上代码：

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <input type="checkbox" id="check1" />PINK
        <script type="text/javascript">
        var colorHtml = '<div style="border: 1px solid rgb(204, 204, 204); display: inline-block;   margin-left: 20px; width: 12px;"><div style="width: 4px; height: 0pt; border: 4px solid rgb(200,100,200); overflow: hidden;"></div></div>';
        $("#check1").before(colorHtml);
        </script>
    </body>
</html>

屏幕截图：

IE7：

IE8：

更新：

添加 float:left:

不使用浮点数，添加 "zoom:1; *display:inline;":

【问题讨论】：

标签： jquery css checkbox internet-explorer-7

【解决方案1】：

您可以通过在 colorHtml 外部 div 的样式中添加 float:left; 来将它们放在同一行：

<div style="float: left; border: 1px solid rgb(204, 204, 204); display: inline-block;   margin-left: 20px; width: 12px;"><div style="width: 4px; height: 0pt; border: 4px solid rgb(200,100,200); overflow: hidden;"></div></div>

这是一个 jsfiddle：http://jsfiddle.net/G4sY4/2/

【讨论】：

它有效，但并不完美。你知道如何让它们在同一行吗？如您所见，颜色 div 仍然比复选框高一点.. 感谢您的帮助！
当我想让东西排成一行时，我通常会添加一个容器元素并设置它的行高。

【解决方案2】：

问题在于inline-block 样式设置。 IE7 并没有真正做到这一点。尝试将其浮动在容器内，而不是设置inline-block。

更新：您可以在以下位置找到问题描述和替代解决方法：http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html

总结：添加“zoom:1; *display: inline;”

【讨论】：

【解决方案3】：

将显示：内联块更改为内联，这应该可以解决问题。块显示类型导致标签后换行

【讨论】：

对不起，意思是设置为内联。