设置列计数属性时，JQuery CSS setter 在 webkit 中不起作用

Question

我有一个使用 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 和列数属性。也许这是要直接向 JQuery 的人们提出的问题？我会等着看这里有没有回应，如果没有，我会在那里找合适的 channel 。

Answer 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' 
});

可能会更好。