0

我有一个内部有五个浮动 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 和 Firefox以及IE6中的外观。请注意 IE6 上子 div 下的父 div 的额外空间。

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

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

但它不起作用。

4

2 回答 2

3

几点注意事项：

  1. <table>只需使用表格形式的数据， 您就可以省去很多麻烦。

  2. 与让浏览器只渲染原始 HTML 相比，通过 DOM 构建这些东西要慢得多。只是需要注意的事情。

无论如何，我会立即尝试将容器 div.cssDivNino也向左浮动，明确地将顶部和底部边距设置为 0，并密切关注IE6 的浮动/边距错误套件。

于 2008-12-19T16:16:33.313 回答
0

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

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

即使在我写完这篇文章之后，我仍然支持 <table> 解决方案。

！

问候，
弗兰克

于 2008-12-19T16:22:31.680 回答