jquery - 应用于通过 jQuery 加载的页面时 CSS3 列布局中的错误

Question

我正在开发一个 webApp(仅限 IOS)。我正在通过 jQuery 加载一些 HTML 并用它们填充应用程序，将它们添加到 DOM。我想用 CSS3 列布局(在 .css 文件中)呈现这些 HTML 位之一。当加载带有列布局的 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>

加载它的 Jquery 代码(#content 是我加载内容的 div):

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

欢迎任何指示、建议和意见。我真的快要放弃专栏了。非常感谢，

埃琳娜

------------------------------------ # 编辑

我重新创建了上面描述的页面，但无法重现错误。我用 jQuery 创建的单元格 div 包含在 Zynga Scroller 中 http://zynga.github.com/scroller/

只能沿 X 轴滚动。我猜这个错误与 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/

这也是跨浏览器的，很可能有修复等...