Does anyone get zero-height select fields in Firefox 3.6.3?

开发者 https://www.devze.com 2022-12-31 21:17 出处：网络

If you open this HTML in Firefox 3.6.3 (confirmed in some earlier versions too), and click the drawStuff() link repeatedly, it doesn\'t render the contents of the last div consistently.Looking more cl

If you open this HTML in Firefox 3.6.3 (confirmed in some earlier versions too), and click the drawStuff() link repeatedly, it doesn't render the contents of the last div consistently. Looking more closely it seems like it's rendering select fields with height=0. Any idea why this would happen?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title> A Page </title>
    <script type="text/javascript">
      var num_select_options = 800;

      function drawStuff() {
        for (var i = 0; i <= 1; i++) {
          var foobar = document.getElementById('elem_' + i);
          while (foobar.childNodes.length >= 1) {
            foobar.removeChild(foobar.firstChild);
          }
          for (var j = 0; j < 4; j++){
            var elem_select = document.createElement('select');
            for (var k = 0; k < num_select_options; k++) {
              elem_select.appendChild(new Option("Blah", k));
            }
            foobar.appendChild(elem_select);
          }          
        }
      }
    </script>    
  </head>

  <body>
    <table border=1 style="width:900px;" summary="A Table">
      <tr>
        <td> <div id="elem_0"></div> </td>
        <td> <div>abc</div>  <div id="elem_1"></开发者_StackOverflow中文版div> </td>
      </tr>
    </table>

    <a href="javascript:drawStuff()"> drawStuff() </a>

    <script type="text/javascript">
      drawStuff();
    </script>

  </body>  
</html>

It works as it should for me.

The only strange thing I can see in the code is that you escape the "/" character in the closing tags, which isn't needed.

I can reproduce it. However, I see nothing particularly wrong in your code.

Just a guess... You are injecting large amounts of raw HTML in your page. Perhaps the browser cannot cope with it under certain circumstances. I think you could try a different approach: use DOM methods rather that innerHTML. Something like:

var select = document.createElement("select");
select.options.push( new Option("Blah", i) );
document.getElementById("elem_" + i).appendChild(select);

In my experience, browsers sometimes prefer this.

Update

One more thing you can try: store all the raw HTML in a variable and perform the injection at once. Perhaps you can avoid issues related to asynchronous execution of DOM functions :-?

Examine the layout using Firebug. Is the height really 0? If so, use the other panes to figure out where it comes from. Maybe a user style sheet?

[EDIT] Where is the form element?

Also, you place an inline element (select) next to a block element (the div with abc). Try to create the select in a div.

If that also doesn't work, try to set the size of the select with CSS. Then report a bug against Firefox with your findings.