Question

我有一个使用JavaScript动态生成的HTML ul。生成它之后，我使用JQuery的ul方法在所述$('#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，然后我还设置{{1} } property。

此代码在Firefox中运行良好 - 身份为width的{{1}}元素的css更新正常。

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

是否有人知道可能导致此问题的原因？

更新我已尝试将datasetContent切换为width，但这并没有带来任何影响。问题特别是JQuery CSS＆amp;列数属性。也许这是直接提交给JQuery的人们的东西？我将等待，看看这里是否有任何回复，如果没有，我会在那里找到合适的通道。

Answer 1

您是否考虑过使用单.css({ // array })而不是链接.css(property, value)来应用CSS？正如您在上面所写的那样，因为-moz-column-count被正确应用，所以你的样式在Firefox中可行是有意义的，但我不确定.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' 
});

可能会更好。

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

1 个答案: