Question

我试图在复选框之前插入一个颜色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： IE7

IE8： IE8

更新：

添加float：left： enter image description here

不使用浮动，添加＆＃34;缩放：1; * display：inline;＆＃34;： enter image description here

Answer 1

您可以通过将float:left;添加到colorHtml外部div的样式来获取它们：

<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/

Answer 2

更改显示：内联块到内联，这应该解决问题。块显示类型在标记

之后导致换行

Answer 3

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

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

摘要：添加“zoom：1; * display：inline;”

IE7上的JQuery方法.before（）或.insertBefore（）

3 个答案: