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

Question

我有一个ul使用JavaScript动态生成的HTML .生成之后,我ul使用JQuery的$('#id').css('property',value)方法设置样式.这就是有问题的代码:

$('#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中运行得很好 - ul具有datasetContent更新ID 的元素的css 就好了.

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

有没有人知道可能导致这个问题的原因是什么？

更新我尝试切换ul到a div,这根本没有任何区别.问题特别是JQuery CSS和列计数属性.也许这是直接提交给JQuery的人们的东西？我将等待,看看这里是否有任何回复,如果没有,我会在那里找到合适的通道.

Answer 1

您是否考虑过使用单个.css({ // array })而不是链接来应用 CSS .css(property, value)？正如您在上面所写的，您的样式在 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' 
});

可能会工作得更好。