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

我想在复选框之前插入一个彩色div，使用jQuery 1.5.1的.before()方法，它可以在FF，Chrome，IE8 +上正常运行;但对于IE7，插入的颜色div与复选框不在同一行。我希望有人能给我任何建议。谢谢。码附：JQuery方法.before（）或.insertBefore（）在IE7上

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

更新：

添加浮动：左： enter image description here

不使用浮点数，增加“zoom：1; *显示：内联;“： enter image description here

来源

2011-11-09 Simon

变化显示：inline-block的内联，应该解决这个问题块显示器类型会使标签后是一个换行符

来源

2011-11-09 18:18:50

在这种情况下不起作用。 – Simon

抱歉，意思是说要设置为内联。 –

不工作......谢谢！ – Simon

你可以让他们对同一行。加入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/

来源

2011-11-09 18:19:01 Jasper

它的工作原理，但并不完美。你知道如何让他们完全一样吗？正如你所看到的，颜色div仍然比复选框高一点..感谢您的帮助！ – Simon

当我想让事情排队在一条线上时，我通常会添加一个容器元素并设置其行高。 – Jasper

的问题是与inline-block样式设置IE7并没有真正做是正确的尝试FL将其留在容器内而不设置inline-block。

更新：你可以找到问题的说明，并在另一种解决办法：http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html

摘要：添加“缩放：1; *显示：内联;”

来源

2011-11-09 18:22:02 tvanfosson

在这种情况下不起作用.. – Simon

现在..颜色框大致在同一行，但稍微低一点... – Simon

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

回答

相关问题