Question

我有一个Div里面有五个浮动div：

var div=document.createElement("div");
div.className="cssDivNino";

var divFolio=document.createElement("div");
divFolio.className="cssFolio";
div.appendChild(divFolio);

var divCurp=document.createElement("div");
divCurp.className="cssCurp";
div.appendChild(divCurp);

var divNombre=document.createElement("div");
divNombre.className="cssNombre";
div.appendChild(divNombre);

var divLocalidad=document.createElement("div");
divLocalidad.className="cssLocalidad";
div.appendChild(divLocalidad);

var divClear=document.createElement("div");
divClear.className="clear";
div.appendChild(divClear);

divFolio.innerHTML= someData;
divCurp.innerHTML= someData;
divNombre.innerHTML= someData;
divLocalidad.innerHTML= someData;

这是css：

.cssDivNino {padding: 0; margin: 0}
.cssFolio {font-family:arial; font-size:10px; color:#000000; background-color:#FFFFFF; float: left; width: 7%; margin-right: 1%; padding: 0}
.cssCurp {font-family:arial; font-size:10px; color:#000000; background-color:#FFFFFF; float: left; width: 17%; margin-right: 1%; padding: 0}
.cssNombre {font-family:arial; font-size:10px; color:#000000; background-color:#FFFFFF; float: left; width: 36%; margin-right: 1%; padding: 0}
.cssLocalidad {font-family:arial; font-size:10px; color:#000000; background-color:#FFFFFF; float: left; width: 35%; margin-right: 1%; padding: 0}
.clear { clear:both; width: 0%; height: 0; padding: 0; margin: 0; border: thin; border-color:#000000}

它在IE7 and Firefox和IE6中的显示方式。注意IE6上子div下父div的额外空格。

我试图用javascript解决这个问题：

div.style.height = divFolio.style.height;

但它不起作用。

Answer 1

一些注意事项：

只需使用<table>表格就可以省去很多麻烦。
与让浏览器只渲染原始HTML相比，通过DOM构建这些东西的速度非常慢。需要注意的事项。

无论如何，我会立即尝试将容器div .cssDivNino向左移动，明确地将顶部和底部边距设置为0，并密切关注IE6's suite of float/margin bugs.

Answer 2

我同意Tpiptych，但为了论证，如果我想完成这个，我最终会为缺陷浏览器使用不同的样式表（在本例中为IE6）。

请注意，您可能无法获得100％的相同外观，并且您可能需要为IE6设计略微不同的外观。

即使在我写完之后，我仍然支持＆lt; table＆gt;解。

HTH！

的问候，
弗兰克

在IE6和IE7 / FF中使div看起来相同

2 个答案: