搜索结果显示在Internet Explorer 9及更低版本中的最下方页面

Question

I built a fairly simple site using PHP and Javascript to return a table full of search results but for some reason my table full of search results is returned about 2 pages down in Internet Explorer 9 and below. The results look good in modern browsers including mobile. I've found that the distance down the page where the results are pushed is proportional to the number of results returned. Also, if thousands of results are returned I'm able to pan over on an Android tablet to blank white space, where normally the width is fixed.

            <table width='100%' class="table table-bordered table-hover table-condensed">


            <colgroup width='18%'/>
            <colgroup id='colgroup' class='colgroup' align='center'
                    valign='middle' title='title' width='1*' span='3' />


            <thead>
                <tr>
                    <th>Drawing</th>
                    <th>Project Title</th>
                    <th>Sheet Title</th>
                    <th>Drawing Date</th>
                </tr>
            </thead>

            <tbody>

         <?php

            // gets value sent over search form
            $locnum = $_GET['locnum']; 
            $drawnum = $_GET['drawnum']; 
            $projttitle = $_GET['projtitle']; 
            $shttitle = $_GET['shttitle']; 
            $shtnum = $_GET['shtnum']; 
            $discp = $_GET['discp']; 
            $drawdate = $_GET['drawdate']; 

            //set minimum query length
            $min_length = 2;

            // if query length is more or equal minimum length then 
            if(strlen($locnum) OR strlen($drawnum) OR strlen($projttitle) OR strlen($shttitle) OR strlen($shtnum) OR strlen($discp) OR strlen($drawdate) >= $min_length){ // if query length is more or equal minimum length then

                // changes characters used in html to their equivalents, for example: < to &gt;
                $locnum = htmlspecialchars($locnum); 
                $drawnum = htmlspecialchars($drawnum); 
                $projttitle = htmlspecialchars($projttitle); 
                $shttitle = htmlspecialchars($shttitle); 
                $shtnum = htmlspecialchars($shtnum); 
                $discp = htmlspecialchars($discp); 
                $drawdate = htmlspecialchars($drawdate); 

                // makes sure nobody uses SQL injection
                //mysql_real_escape_string is deprecated as of PHP 5.5.0 and will be removed in the future
                $locnum = mysql_real_escape_string($locnum);
                $drawnum = mysql_real_escape_string($drawnum);
                $projttitle = mysql_real_escape_string($projttitle);
                $shttitle = mysql_real_escape_string($shttitle);
                $shtnum = mysql_real_escape_string($shtnum);
                $discp = mysql_real_escape_string($discp);
                $drawdate = mysql_real_escape_string($drawdate);

                //this query isn't perfect...ideally Location Number would be an exact match rather than containing the variable, but if I make that change, it becomes impossible to search on the other fields while $locnum is blank     
                $raw_results = mysql_query("SELECT * FROM draw
                    WHERE (`LocationNumber` LIKE '".$locnum."%' && `DrawingNumber` LIKE '%".$drawnum."%' && `ProjectTitle` LIKE '%".$projttitle."%' && `SheetTitle` LIKE '%".$shttitle."%' && `SheetNumber` LIKE '%".$shtnum."%' && `Discipline` LIKE '%".$discp."%' && `DrawingDate` >= '".$drawdate."%') ORDER BY LocationNumber, DrawingNumber, Discipline, SheetNumber") or die(mysql_error());
                    //ORDER BY LocationNumber, DrawingNumber, Discipline



                //'%$locnum%' has wildcards built in
                //if you want exact match use `field`='$locnum'
                // or if you want to match just full word use '% $locnum %' ...OR ... '$locnum %' ... OR ... '% $locnum'

                //Number of results 
                echo "<p><b>".mysql_num_rows($raw_results)." results"."</b>";

                //Sort order dropdown
                echo
                    "&nbsp Click any table heading <b>to sort</b> search results. <b>To save</b> a PDF, right-click link and choose Save-As or similar.</p>";

                //begin while loop
                if(mysql_num_rows($raw_results) > 0){ // if one or more rows are returned do following

                    while($results = mysql_fetch_array($raw_results)){
                    // $results = mysql_fetch_array($raw_results) puts data from database into array, while it's valid it does the loop

        //I need to replace all "\" in the 'Path' field with "/".  The hyperlink works fine in Chrome but not Firefox...haven't tried IE yet               
          echo "<tr>"."<td><b>"."<a href= http://facilities.ucsb.edu/_client/pdf/atlas/drawings/".$results['Path'].">".$results['LocationNumber']." - ".$results['DrawingNumber'].", ".$results['SheetNumber'].", ".substr($results['Discipline'],0,4)." </a></b></td>&nbsp&nbsp<td>".$results['ProjectTitle']."</td><td>".$results['SheetTitle']."</td><td>".substr($results['DrawingDate'],0,10)."</td></tr>";
                        // posts results gotten from database(title and text) you can also show id ($results['id'])

                    }

                }
                else{ // if there is no matching rows do following
                    echo "No results";
                }

            }

            else{ // if query length is less than minimum
                echo "Minimum search length is ".$min_length;
            }

        ?>
                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
                <script src="js/jquery.sortElements.js"></script>
                <script>
                    var th = jQuery('th'),
                        li = jQuery('li'),
                        inverse = false;

                    th.click(function(){

                        var header = $(this),
                            index = header.index();

                        header
                            .closest('table')
                            .find('td')
                            .filter(function(){
                                return $(this).index() === index;
                            })
                            .sortElements(function(a, b){

                                a = $(a).text();
                                b = $(b).text();

                                return (
                                    isNaN(a) || isNaN(b) ?
                                        a > b : +a > +b
                                    ) ?
                                        inverse ? -1 : 1 :
                                        inverse ? 1 : -1;

                            }, function(){
                                return this.parentNode;
                            });

                        inverse = !inverse;

                    });

                    $('button').click(function(){
                        li.sortElements(function(a, b){
                            return $(a).text() > $(b).text() ? 1 : -1;
                        });
                    });
                </script>
        </tbody>
        </table>

Any advice on how I can make this compatible with at least IE9?

Answer 1

I think the problem is most likely that you have a <div> with some contents ("Click to sort" etc) as a direct child (the first child) of your <tbody> , which is not valid and which I can imagine makes IE9 freak out. You also have </td>&nbsp;&nbsp;<td> in the middle of the table which could be problematic. Try removing those and moving that div to outside of the table or putting it inside <tr><td></td></tr> and see if the layout improves.