Question

我在这个网站www.runebs.dk上工作并且排版有问题。当该网站在我的本地主机上时，排版看起来很好但是当我将它上传到服务器时，它会变得非常像素化。

我试图改变排版，但这不起作用。我可能认为它可能是下面这个脚本中的东西，因为它只在脚本显示的div中，排版是像素化的。排版在网站的其他部分看起来很好。

是因为脚本打印内容两次还是？

以下是在线版http://imgur.com/CzwJiEZ 这是本地版本http://imgur.com/v6jGIRy

我真的希望有人在这里指出我正确的方向..

html ...

<div id="subHeadline">
   <h3 class="h3 title"></h3>
   <h3><div class="year"></div></h3>
   <h3><div class="description"></div></h3>
   <h3 class="showHide">(–)</h3>
</div>

<header class="article-header">
   <h3 class="h3 title">title text</h3>

<div class="year">
    <h3>year text</h3>
</div>

<div class="description">
   description text
</div>

    <h3 class="showHide"></h3>

css ..

.article-header { display: none;}
 #subHeadline {position:fixed; top:0px; left: 0; margin-left: 22px; padding-top: 64px; height:   auto; width: 600px; z-index:1; }
 #subHeadline .description { display: block; width: 255px; position: relative; margin-top: 28px;}
 #subHeadline .showHide  { display: none; width: 255px; position: relative; margin-top: 28px; cursor: pointer;}
.year {display: block; margin-top: -19px;}

和jquery ......

function toggleInfo () {
 $('.showHide').on('click',function(){
 $(this).toggleClass('active');
 $( '#subHeadline .description' ).slideToggle(200);
 var currentState = $(this).text();
 console.log('state: ', currentState);
 if($(this).hasClass('active')) {
    $('.showHide').empty();
    $(this).text('(+)');
} else {
  $(this).text('(–)');
}
});
}

$(document).ready(function(){

    // firing toggleInfo when doc ready
     toggleInfo();

var $window = $(window);

$window.trigger('scroll'); // init the value

$window.on('scroll', function(){

var pos = $('#subHeadline').offset();
  $('.article-header').each(function(){
      if (pos.top <= $(this).offset().top && pos.top >= $(this).next().offset().top) {
        var desc = $('.description', this).text();
        var title = $('.h3', this).text();
        var year = $('.year', this).text();
        var button = $('.showHide', this).text();
          $('#subHeadline .title').text(title);
          $('#subHeadline .year').text(year);
          $('#subHeadline .description').text(desc);
          $('#subHeadline .showHide').show();
          return;
      }
  });
});

排版在线版本中显示为pixileted

0 个答案: