0

内部に 5 つの float 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. DOM を介してこのようなものを構築することは、ブラウザが生の HTML をレンダリングするだけに比べて非常に遅くなります。知っておくべきことだけです。

とにかく、私はすぐにコンテナーの div.cssDivNinoを左にフロートさせ、上下のマージンを明示的に 0 に設定し、IE6 の一連のフロート/マージン バグに注意を払います。

于 2008-12-19T16:16:33.313 に答える
0

私はTpiptychに同意しますが、議論のためにこれを達成したい場合、欠陥ブラウザ（この場合はIE6）に異なるスタイルシートを使用することになります。

同じ外観を 100% 得ることができない場合があり、IE6 用に少し異なる外観を設計する必要がある場合があることに注意してください。

これを書いた後でも、私は <table> ソリューションを支持します。

チッ！

よろしく、
フランク

于 2008-12-19T16:22:31.680 に答える