我正在尝试使用 jQuery 1.5.1 的 .before() 方法在复选框前插入一个颜色 div，该方法在 FF、Chrome、IE8+ 上运行良好；但是对于IE7，插入的颜色div和checkbox不在同一行。我希望有人能给我任何建议。谢谢。附上代码:
<!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 :左:
不使用 float ，添加“zoom:1; *display:inline;”:
最佳答案
您可以通过将 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/
关于IE7 上的 JQuery 方法 .before() 或 .insertBefore()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8069566/