设置 column-count 属性时，JQuery CSS setter 在 webkit 中不起作用答案

【问题标题】：JQuery CSS setter not working in webkit when setting column-count property设置 column-count 属性时，JQuery CSS setter 在 webkit 中不起作用
【发布时间】：2013-06-24 08:12:25
【问题描述】：

我有一个使用 JavaScript 动态生成的 HTML ul。生成它之后，我使用 JQuery 的 $('#id').css('property',value) 方法在上述 ul 上设置样式。有问题的代码如下所示：

$('#actionSpace #datasetContent')
   .css('-moz-column-count',this.content.length)
   .css('-webkit-column-count',this.content.length)
   .css('column-count',this.content.length)
   .css('width',this.content.length*150 + 'px');

基本上，我设置了 3 个不同的 column-count 属性 - 一次用于常规 css，一次用于 -moz 域中的 css，一次用于 -webkit 域中的 css，然后我还设置了 width 属性。

这段代码在 Firefox 中运行良好 - id 为 datasetContent 的 ul 元素的 css 更新得很好。

但是，当我在 webkit（Safari 或 Chrome）中运行它时，它会停止工作。奇怪的是 width 属性（我在上面那一长串 css 中设置的最后一件事）设置正确，但没有设置其他属性。如果我在 Chrome 的检查器中手动更改它们，网站更新就好了。但是，当然，我不能合理地期望我网站的用户在我的页面上手动修改 CSS 以使其看起来不错:)

有人知道是什么原因导致了这个问题吗？

更新我尝试将ul 切换为div，但这根本没有任何区别。问题只是 JQuery CSS & column-count 属性。也许这是直接向 JQuery 的人们提出的问题？我会在这里等着看有没有回应，如果没有，我会在那里寻找合适的渠道。

【问题讨论】：

标签： jquery html css css-multicolumn-layout

【解决方案1】：

您是否考虑过使用单个.css({ // array }) 而不是链接.css(property, value) 来应用您的CSS？正如您在上面所写的那样，您的样式可以在 Firefox 中工作是有道理的，因为 -moz-column-count 已正确应用，但我不确定 .css() 的两个连续使用是否可以像这样链接。这不会在 Chrome 开发工具中引发错误？

我认为

$('#actionSpace #datasetContent').css({
  '-moz-column-count': this.content.length,
  '-webkit-column-count': this.content.length,
  'column-count': this.content.length,
  'width': this.content.length * 150 + 'px' 
});

可能会更好。

【讨论】：