6

我有一个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属性。

ul这段代码在 Firefox 中工作得很好——带有更新 id的元素的 cssdatasetContent就好了。

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

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


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

4

1 回答 1

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

可能会更好。

于 2013-08-11T04:10:58.663 回答