Question

我尝试做的是使用此代码生成相同的内容两次。目标是让测试提示：＆＃39;出现在左侧，然后是右侧的文本框，最后是一个直接位于右侧的16x16像素框。

在HTML生成阶段，我很成功，但我试图在javascript中完全生成这种格式，该格式适用于Internet Explorer 7等旧版本的Web浏览器。我在计算机上测试过它在较新的浏览器（歌剧11）中，事实证明16x16像素框直接位于提示下方。我该如何解决这个问题？

<h2>HTML generation of the form</h2>
<form>
  <div style="overflow:hidden;width:100%">
    <b style="float:left;background:#777">Test prompt:</b>
    <input type="text" style="float:left">
    <div style="float:left;background:#AAA;width:16px;height:16px"></div>
  </div>
</form>
<h2>Javascript generation of the same form</h2>
<!-- This phase does not work correctly -->
<div ID="CONTAINER">
</div>

<script>
  c=document.getElementById('CONTAINER'); //get container
  f=document.createElement('FORM'); //make form

  d=document.createElement('DIV'); //make containing DIV
  ds=d.style;
  ds.overflow='hidden';
  ds.width='100%';

  b=document.createElement('B'); //make prompt label
  b.innerHTML='Test prompt:';    //and set prompt
  bs=b.style;
  bs.float='left';
  bs.background='#777';

  i=document.createElement('INPUT'); //make textbox
  i.type='text'; //<-- not sure if I need this
  i.style.float='left';

  ed=document.createElement('DIV'); //Make 16x16 box
  eds=ed.style;
  eds.float='left'; 
  eds.background='#AAA';
  eds.width='16px';
  eds.height='16px';

  c.appendChild(f);//add form
  f.appendChild(d); //ad container div

  d.appendChild(b); //add prompt
  d.appendChild(i); //add textbox
  d.appendChild(ed); //add square box
</script>

为什么这两个代码片不能产生相同的输出？

0 个答案: