2

我有一个项目需要将 html 页面加载到另一个页面。我为此使用了 jquery。但问题是每当加载页面时，div 元素的位置不正确（请查看下面的图片截图）。一旦单击检查元素，它们就会工作。我已经根据这个奇怪的功能检查了许多问题，但无法解决这个错误。这是我的代码：
HTML 部分：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script  src="js/jquery1.js" type="text/javascript"></script>
    <script src="js/custom.js"></script>  
</head>
<body>
      <div id="sidebar">
           <ul>
             <li id="ft-bar"><h3><a><span class="icon-signal"></span>Freshtime Context Bar</a></h3></li>
           </ul>
      </div>
      <div id="maincontent">
      </div>
   <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
   <script type="text/javascript">
   </script>
</body>
</html>

Javascript： 

    $(document).ready(function(){
            $('#ft-bar').click(function(){   
               $('#maincontent').load('ftp-bar.html');     
         })     
    });

ftp-bar.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Product Life range slider</title>  
  <link rel="stylesheet" type="text/css" href="css/main.css" />  
  <script  src="js/jquery1.js"></script>
  <script  src="js/colResizable-1.3.min.js"></script>
  <script type="text/javascript">
$(function(){   

    //callback function
    var onSlide = function(e){
        var columns = $(e.currentTarget).find("td");
        var ranges = [], total = 0, i, s ="Ranges: ", w;
        for(i = 0; i<columns.length; i++){
            w = columns.eq(i).width()-10 - (i==0?1:0);
            ranges.push(w);
            total+=w;
        }        
        for(i=0; i<columns.length; i++){            
            ranges[i] = 100*ranges[i]/total;
            carriage = ranges[i]-w
            s+=" "+ Math.round(ranges[i]) + "%,";           
        }           
        s=s.slice(0,-1);            
        $("#text").html(s);
    }

    //colResize the table
   $("#product-life-slider").colResizable({
        liveDrag:true, 
        draggingClass:"", 
        onResize:onSlide,
        gripInnerHtml:"<div class='box1'>Grower <br> 2 Days</div>   <div class='label1'></div>", 
        minWidth:8
        });

}); 
  </script>

 </head>
 <body>
<div class="containerftp">  

        <table width="80%" border="0" cellspacing="5" cellpadding="0">
      <tr>
        <td width="20%"><input type="text" class="ftp" name="Days to Useby" placeholder="Days to Useby" value=""></td>
        <td width="20%"><input type="text" class="ftp" name="Storage Temp" placeholder="Storage Temp" value=""></td>
        <td width="20%"><input type="text" class="ftp" name="Storage Time" placeholder="Storage Time" value=""></td>
        <td width="20%"><input type="range" class="ftp" value="30" min="0" max="100"/></td>
        <td width="20%"><input type="text" class="ftp" name="Average Temperature" placeholder="Average Temp" value=""></td>
      </tr>
    </table>    

    <br/><br/><br/><br/><br/><br/>      

    <table id="product-life-slider" width="80%" cellspacing="0" cellpadding="0" border="0" padding-left="2%">
        <tr>
            <td class="partner" width="2%"></td>
            <td class="partner" width="24%"></td>
            <td class="partner" width="6%"></td>
            <td class="partner" width="27%"></td>
            <td class="consumer" width="14%"></td>
            <td class="useby" width="27%"></td>
        </tr>
    </table>

</div>

CSS部分：

.containerftp{margin:5% auto;text-align:left; position:relative;}

input[type=range].ftp:first-of-type {width: 120px;}
input.ftp {padding:10px;width:85%;border:1px solid #c5dbef;border-radius:5px; background:#e0effc;font-size:14px;}
input.ftp ::-webkit-input-placeholder {color: rgba(0,5,143,.5);text-transform: uppercase;}
input.ftp ::-moz-placeholder {color: rgba(0,5,143,.5);text-transform: uppercase;}
input.ftp :-moz-placeholder {color: rgba(0,5,143,.5);text-transform: uppercase;}  /* Older versions of Firefox */
input.ftp :-ms-input-placeholder { color: rgba(0,5,143,.5);text-transform: uppercase;}

#product-life-slider {border:1px solid #A6C9E2; border-radius:5px;}
#product-life-slider td{height:100px;border:none;}


.partner{background: rgba(154,255,87,1);
background: -moz-linear-gradient(top, rgba(154,255,87,1) 0%, rgba(68,201,59,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(154,255,87,1)), color-stop(100%, rgba(68,201,59,1)));
background: -webkit-linear-gradient(top, rgba(154,255,87,1) 0%, rgba(68,201,59,1) 100%);
background: -o-linear-gradient(top, rgba(154,255,87,1) 0%, rgba(68,201,59,1) 100%);
background: -ms-linear-gradient(top, rgba(154,255,87,1) 0%, rgba(68,201,59,1) 100%);
background: linear-gradient(to bottom, rgba(154,255,87,1) 0%, rgba(68,201,59,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9aff57', endColorstr='#44c93b', GradientType=0 );   
border-right: 1px solid #000 !important;}

/* consumer */    
.consumer{background: rgba(255,238,87,1);
background: -moz-linear-gradient(top, rgba(255,238,87,1) 0%, rgba(255,176,66,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,238,87,1)), color-stop(100%, rgba(255,176,66,1)));
background: -webkit-linear-gradient(top, rgba(255,238,87,1) 0%, rgba(255,176,66,1) 100%);
background: -o-linear-gradient(top, rgba(255,238,87,1) 0%, rgba(255,176,66,1) 100%);
background: -ms-linear-gradient(top, rgba(255,238,87,1) 0%, rgba(255,176,66,1) 100%);
background: linear-gradient(to bottom, rgba(255,238,87,1) 0%, rgba(255,176,66,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffee57', endColorstr='#ffb042', GradientType=0 );
border-right: 1px solid #000 !important;}

 /* UseBy */      
.useby{background: rgba(255,160,87,1);
background: -moz-linear-gradient(top, rgba(255,160,87,1) 0%, rgba(255,88,66,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,160,87,1)),    color-stop(100%, rgba(255,88,66,1)));
background: -webkit-linear-gradient(top, rgba(255,160,87,1) 0%, rgba(255,88,66,1) 100%);
background: -o-linear-gradient(top, rgba(255,160,87,1) 0%, rgba(255,88,66,1) 100%);
background: -ms-linear-gradient(top, rgba(255,160,87,1) 0%, rgba(255,88,66,1) 100%);
background: linear-gradient(to bottom, rgba(255,160,87,1) 0%, rgba(255,88,66,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa057', endColorstr='#ff5842', GradientType=0 );}

  /* column anchors */    
div.box1{   position: absolute;
        margin-top:-55px;
         margin-left:-36.8px; 
         width:70px;height:40px;
         background:#e0effc; 
         border-radius:5px; 
         border:1px solid #c5dbef; 
         font-size:13px; 
         padding:5px; 
         text-align:center;
          }
 div.label1 {position: absolute; 
        margin-left:-9px;
        width:0;height:0;
        border-left:13px solid transparent;
        border-right: 13px solid transparent;
        border-top: 13px solid #e0effc; 
        cursor:e-resize;}

代码有点乱，但请有人帮我解决这个问题。提前致谢。
这是图像：在此处输入图像描述

4

3 回答 3

1

当我在身体上方放置一个 100% 宽度 100% 高度的 div 时，我遇到了类似的问题，我改变了它的不透明度以创建背景效果。除非我检查了页面，否则身体的背景通常不会出现。

我找到的解决方案是以编程方式设置此 div和主体的宽度和高度（强制文档加载和窗口调整大小）。

$(document).ready(function() {
    $('#panel').height($(window).height());
    $('#panel').width($(window).width());
    $('body').height($(window).height());
    $('body').width($(window).width());
});
$(window).resize(function() {
    $('#panel').height($(window).height());
    $('#panel').width($(window).width());
    $('body').height($(window).height());
    $('body').width($(window).width());
});

您可以找到类似的解决方案。

于 2016-09-18T07:52:04.657 回答
0

好吧，这没有什么奇怪的，检查元素会调整屏幕大小，所以如果你的设计不是静态的并且响应窗口大小，你会得到奇怪的结果。解决方案是让您的设计完全静态，独立于浏览器窗口的大小，或者修复 CSS 的响应性 :)

于 2013-11-06T11:34:48.647 回答
0

我有同样的问题。问题是主 DIV 中的元素之一的高度为 %（百分比）。评论高度为我解决了这个问题。

于 2014-09-17T11:33:27.177 回答