jQueryを通じてロードされたページにCSS3の列レイアウトを適用するとバグが発生する

Question

私はWebアプリケーション（IOSのみ）で作業しています。私はjQueryを通してHTMLのビットを読み込んで、それらにアプリケーションを移入してDOMに追加します。 これらのHTMLビットの1つを（.cssファイル内の）CSS3 coloumnレイアウトでレンダリングしたいとします。 列レイアウトのdivが読み込まれると、その中のリンクがもう機能していないことがわかりました。私が列を使用しない場合、彼らは正常に動作します。ロードされたHTMLの

例：

<div class='page layout_article'> 
    <div class="articleColoumnLayout"> 
    <h2>Fragmentation in Care</h2> 
    <p>Lorem Ipsum</p> 
<div class='quoteContainer'> 
    <em>Lorem Ipsum</em> 
    <a href='roz'>Roz</a> <!-- THIS IS THE NON WORKING LINK --> 
    </div> 
    </div> 
</div> 

（#contentは私がものをロードするdiv要素である）、それロード

のjQueryコード：

var fileUrl = "path/page.html"; 
$.get(fileUrl, function(data){ 
    var html = $(data); 
    var elements = html.filter('.page'); 
    var currentCell = 0; 

    jQuery.each(elements, function(index, value){ 
    jQuery('<div/>', { 
     id: "cell"+currentCell, 
     "class": "cell" 
     }).appendTo("#content"); 

    $('#cell'+currentCell).append(value); 
    currentCell++; 
    } 

CSSを

.articleColoumnLayout{ 
    margin: 64px; 
    height: 608px; 
    overflow: hidden; 
    text-align: justify; 

    -moz-column-count: 2; 
    -moz-column-gap: 32px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 32px; 
    column-count: 2; 
    column-gap: 32px; 
} 

任意のポインタ、提案、アドバイスは大歓迎です。私は本当に列をあきらめている。 どうもありがとう、

エレナ

------------------------------------ ---＃EDIT

私は上記のページを作り直しましたが、私はバグを再現できません。私はjQueryを使って作成してい 細胞のdivは、X軸に沿ってスクロールすることができるZyngaのスクローラ http://zynga.github.com/scroller/

内に含まれます。私はバグがZyngaスクロールとCSS3列の間の相互作用に関係していると思います。

<div id="container"> 
    <div id="content"></div> 
</div> 

<script type="text/javascript"> 
var container = document.getElementById("container"); 
var content = document.getElementById("content"); 

// Initialize Scroller 
scroller = new Scroller(render, { 
scrollingY: false, 
paging: true 
}); 

// Setup Scroller 
var rect = container.getBoundingClientRect(); 
scroller.setPosition(rect.left+container.clientLeft, rect.top+container.clientTop); 
scroller.setDimensions(container.clientWidth, container.clientHeight, 1024*pages.length, content.offsetHeight); 
scroller.setSnapSize(1024, 738); 
</script> 

Answer 1

私は、これはIE6、IE7、IE8で動作すると思ういけないだけでなく、あなたの代わりに左にフロートを使用しての優れているか、下のリンクを見てみましょう。

http://dotmac.rationalmind.net/2011/03/cross-browser-multi-columns-with-jquery-and-css3/

これは