Question

我正在使用一个名为Columnizer的Jquery插件来布局我的文本，它在firefox上完美运行但是它在IE上可能不起作用而没有创建新列并静态放置它们。

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

使用Firefox，它会自动在列

中排列元素

我们怎样才能使它也适用于IE？我真的很努力，只是没有工作

enter image description here

我的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;
  }

Answer 1

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

Answer 2

我不明白为什么会这样，但它在IE8上适用于我：打开浏览器的控制台，它会起作用。

为此，请加载页面，单击F12（打开开发人员工具），单击脚本选项卡，然后单击控制台选项卡。

重新加载页面：它有效。您现在可以关闭开发人员工具窗口，所有后续加载也可以正常工作。

名为Columnizer的Jquery插件在IE上运行不正常

2 个答案: