JQuery CSS setterが列数プロパティを設定するときにWebkitで動作しない

Question

JavaScriptを使用して動的に生成するHTML ulがあります。私がそれを生成した後、私は、ulのスタイルをJQueryの$('#id').css('property',value)メソッドを使って設定しました。 、-webkitドメインに一度定期的なCSSの、一度-mozドメインでのCSSの、そして一度CSSの -

$('#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のプロパティを設定します。これは、問題のコードは次のようになります次にwidthプロパティを設定します。

このコードはFirefoxでうまく動作します - datasetContentというIDを持つul要素のCSSはうまく更新されます。

ただし、これをWebkit（SafariまたはChrome）で実行すると、これは機能しなくなります。奇妙なのは、widthプロパティ（上記のCSSの長い行で設定した最後のもの）が正しく設定されているが、他のプロパティは設定されていないということです。 Chromeのインスペクタで手動で変更すると、サイトは正常に更新されます。しかし、当然のことながら、自分のサイトのユーザーがCSSでページを見て、見た目を良くすることはできません:)

この問題の原因は何ですか？

UPDATE私はdivにulを切り替え試みた、そしてそれはまったく違いはありませんでした。問題は具体的にはJQuery CSS &の列数プロパティです。おそらく、これはJQueryで直接人たちに提出するものですか？私は待って、ここに何かの反応があるかどうかを見て、もしそうでなければ、そこに適切なチャンネルを見つけるでしょう。

Answer 1

.css(property, value)を連結するのではなく、.css({ // array })を1つ使用してCSSを適用することを検討しましたか？上に書いたように、-moz-column-countが正しく適用されているので、あなたのスタイルはFirefoxでうまくいくはずですが、.css（）を2回連続して使用するとそのように連鎖することはできません。これはChrome Dev Toolsでエラーを発生させませんか？

私は

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

は良い仕事かもしれないと思うだろう。