让 div 在 IE6 和 IE7/FF 中看起来一样答案

【问题标题】：Make div look the same in IE6 and IE7/FF让 div 在 IE6 和 IE7/FF 中看起来一样
【发布时间】：2008-12-19 16:10:52
【问题描述】：

我有一个 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;

但它不起作用。

【问题讨论】：

如果您发布实际生成的 HTML 而不是 Javascript，人们会更容易帮助调试。

标签： html css internet-explorer-6

【解决方案1】：

几点说明：

只需对表格数据使用<table>，就可以省去很多麻烦。
与让浏览器只呈现原始 HTML 相比，通过 DOM 构建这些东西非常慢。只是需要注意的事情。

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

【讨论】：

是的 - 这是表格数据，它应该在表格中，语义可以双向工作

【解决方案2】：

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

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

即使在我写完这篇文章之后，我仍然会支持

解决方案。

HTH！

问候，
弗兰克

【讨论】：

只是好奇 - HTH 是什么意思？