在ie9及以下浏览器中,搜索结果显示在较低的页面


Search results displaying far down page in Internet Explorer 9 and below

我使用PHP和Javascript构建了一个相当简单的站点,返回一个充满搜索结果的表,但是由于某种原因,我的搜索结果表在Internet Explorer 9和以下版本中大约向下2页返回。在包括手机在内的现代浏览器中,结果看起来不错。我发现,在页面下方推送结果的距离与返回的结果数量成正比。此外,如果返回数千个结果,我可以在Android平板电脑上平移到空白区域,通常宽度是固定的。

            <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>

有什么建议我如何使它兼容至少IE9吗?

我认为问题很可能是你的<div>有一些内容("点击排序"等)作为你的<tbody>的直接子(第一个子),这是无效的,我可以想象这会让IE9崩溃。在表的中间也有</td>&nbsp;&nbsp;<td>,这可能是有问题的。尝试删除这些并将该div移到表的外部或将其放入<tr><td></td></tr>中,看看布局是否得到改善。