Сделайте так, чтобы div выглядел одинаково в IE6 и IE7 / FF

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 и Firefox и в IE6 . Обратите внимание на дополнительное пространство родительского элемента div под дочерним элементом div в IE6.

Я пытался исправить это с помощью JavaScript:

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

Но это не работает.

Answer 1

Несколько заметок:

1. Вы избавите себя от многих проблем, просто используя <table> для этих данных, которые являются табличными.

2. Создание этого материала с помощью DOM безумно медленное по сравнению с тем, что браузер просто отображает необработанный HTML. Просто что-то, о чем нужно знать.

В любом случае, я бы сразу же попытался переместить контейнер div .cssDivNino влево, явно установив верхнее и нижнее поля равным 0, и внимательно следя за набором ошибок IE6 в float / margin.

Answer 2

Я согласен с Tpiptych, но ради аргументов, если бы я хотел сделать это, я бы в конечном итоге использовал разные таблицы стилей для браузера дефектов (в данном случае IE6).

Имейте в виду, что вы, возможно, не сможете получить 100% внешний вид, и вам может потребоваться разработать немного другой вид для IE6.

Даже после того, как я напишу это, я все равно поддержу решение