Question

我正在开发webApp（仅限IOS）。我正在通过jQuery加载一些HTML并用它们填充应用程序，将它们添加到DOM中。我想使用CSS3 coloumn布局（在.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;
}

任何指针，建议，建议都更受欢迎。我真的很接近放弃专栏。非常感谢，

埃琳娜

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

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

只能沿X轴滚动。我想这个bug与Zynga卷轴和CSS3 colomns之间的交互有关。

<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/

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

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

1 个答案: