仅在单击inspect元素时才正确渲染

时间：2013-11-06 11:14:24

标签： javascript jquery css

我有一个项目需要将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;}

代码有点乱，但有人请帮我解决这个问题。 提前谢谢。
   这是图像：enter image description here

3 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

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

答案 2 :(得分：0)

当我在身体上方放置100％宽度100％高度div时，我遇到了类似的问题，其不透明度变化以创造背景效果。除非我检查了页面，否则身体的背景往往不会出现。

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

$(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());
});

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

相关问题
最新问题