javascript - Columnizer と呼ばれる Jquery プラグインが IE で正しく機能しない

Question

Columnizer という Jquery プラグインを使用してテキストをレイアウトしていますが、Firefox では完全に動作しますが、IE では新しい列を作成して静的に配置しないとおそらく動作しません。

http://welcome.totheinter.net/columnizer-jquery-plugin/

Firefox では、要素を列に自動的に配置します

IEでも動作させるにはどうすればよいですか? 頑張ってるのに全然動かない

ここに画像の説明を入力

私のhtml

   <script type = "text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type = "text/javascript" src ="https://raw.github.com/adamwulf/Columnizer-jQuery-Plugin/master/src/jquery.columnizer.js"></script>

<script type="text/javascript">
$(function(){
    $('h1').addClass('dontend');
    $('.wide').columnize({
        width : 120,
        height : 400
    });
});
  </script>

   <script  style="display:none" type="text/javascript">var Mint=new Object();Mint.save=function()
  {var now=new Date();var debug=false;if(window.location.hash=='#Mint:Debug'){debug=true;};var path='http://welcome.totheinter.net/mint/?record&key=6a56784248357a3735323031363633316663796c526d';path=path.replace(/^https?:/,window.location.protocol);for(var developer in this)
  {for(var plugin in this[developer])
  {if(this[developer][plugin]&&this[developer][plugin].onsave)
  {path+=this[developer][plugin].onsave();};};};path+='&'+now.getTime();if(debug){window.open(path+'&debug&errors','MintLiveDebug'+now.getTime());return;};var ie=/*@cc_on!@*/0;if(!ie&&document.getElementsByTagName&&(document.createElementNS||document.createElement))
  {var tag=(document.createElementNS)?document.createElementNS('http://www.w3.org/1999/xhtml','script'):document.createElement('script');tag.type='text/javascript';tag.src=path+'&serve_js';document.getElementsByTagName('head')[0].appendChild(tag);}
  else if(document.write)
  {document.write('<'+'script type="text/javascript" src="'+path+'&amp;serve_js"><'+'/script>');};};if(!Mint.SI){Mint.SI=new Object();}
  Mint.SI.Referrer={onsave:function()
  {var encoded=0;if(typeof Mint_SI_DocumentTitle=='undefined'){Mint_SI_DocumentTitle=document.title;}
  else{encoded=1;};var referer=(window.decodeURI)?window.decodeURI(document.referrer):document.referrer;var resource=(window.decodeURI)?window.decodeURI(document.URL):document.URL;return '&referer='+escape(referer)+'&resource='+escape(resource)+'&resource_title='+escape(Mint_SI_DocumentTitle)+'&resource_title_encoded='+encoded;}};Mint.save();</script> 






  <meta charset="utf-8" />
  <link rel="stylesheet" href="f.css">



  <div class="container"> <div class="wide">


      <div class="block"> Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello </div><br>
      <div class="block"> Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello </div><br>
      <div class="block"> Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello </div><br>
      <div class="block"> Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello </div><br>
      <div class="block"> Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello </div><br>
      <div class="block"> Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello </div><br>


  </div></div>

私のCSS

  .container {
      background-color: #;
      height: 300px;
      width: 700px;

  }
  .block {
      width: 100px;
      height:150px;
      background-color: #;
      margin: 10px;
      margin-top: 5px;
  }

score 1 · Accepted Answer

クラス<div class="block">内のプレーンテキストを削除して保持します。wideこれはうまくいくはずです.columnizerプラグインは各ブロックのクラスを自動的に追加します.

例えば：

<div class="container"> 
  <div class="wide">
     <p>Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello </p>
     <p>Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello </p>
  </div>
</div>

Columnnizer は、テキストを自動的に異なる列に分割します。以下のように

<div class="wide" style="width: 2700px;">
  <div class="first column" style="width: 300px; float: left;">
  <div class="column" style="width: 300px; float: left;">
  <div class="column" style="width: 300px; float: left;">
</div>

新しいコード(このコードをテキストエディターに貼り付けて HTML ページとして保存し、IE8 と IE7 で HTML ページを確認してください)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<head>
 <style>
.column *{ padding: 5px; }
</style> 
   <script type = "text/javascript" src ="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type = "text/javascript" src ="https://raw.github.com/adamwulf/Columnizer-jQuery-Plugin/master/src/jquery.columnizer.js"></script>
        <script type="text/javascript">
        $(function(){
            $('h1').addClass('dontend');
            $('.wide').columnize({
                width : 300,
                height : 200
            });
        });
        </script>

</head>
<body>
  <div id="wrapper"> 
    <div class="wide">
    <h1>Lorem ipsum ne justo</h1>
 <p>Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello hello Hello  hello Hello  hello HelloHello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello   hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello </p>
     <p>Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello </p>
     <p>Hello  hello HellHello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello o  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello </p>
     <p>Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  heHello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello llo Hello  hello Hello  hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello </p>
      <p>Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello </p>
     <p>Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello hello Hello  hello Hello  hello Hello  hello Hello  hello Hello  hello Hello </p>
    </div>
  </div>
 </body> 
 </html>

javascript - Columnizer と呼ばれる Jquery プラグインが IE で正しく機能しない

2 に答える 2

Related

Reference