2

最近ワードプレスのテーマを購入しましたが、修正できないように見える CSS の問題にぶつかりました。残念ながら、テーマメーカーはもうサポートを提供していないので、あなたの誰かがここで私を助けてくれることを願っています:D

このサイトを見ると：

demo.shakenandstirredweb.com/shaken-grid/

Google Chrome では、ヘッダーが左に浮いていることがわかります。良い！

ただし、Firefox でサイトを表示すると、ヘッダーが左に浮いておらず、中央にいくらか留まっていることがわかります。IDとクラスのヘッダー、ラップ、サイト情報をいじっていますが、FirefoxのヘッダーをChromeのように左にフロートさせることができないようです。

クロム

http://d.pr/i/YbPH

ヘッダーは、本文の内容に従って左にフロートします。

ファイアフォックス

http://d.pr/i/hrTI

ヘッダーはやや真ん中に残ります。

助言がありますか？

これを読んでくれてありがとう！

編集:さて、私はそれがdivclassであることを理解しましたwrap。Firefox では最大幅がオンのままですが1300px、Chrome では幅が自動的に拡張されます。奇妙なこと.wrapに、スタイルシートの幅は1010px、マージン自動に設定されています。私が何をすべきか知っている人はいますか？

編集：さて、それはjavascriptと関係があると思います。この関数は Firefox では動作しないと思います:

function centerLayout(){
    if( jQuery(window).width() > mobile_width ){
        jQuery('#header .wrap, #footer .wrap, #filtering-nav, .navigation').css('width', jQuery('.isotope').width() - 10);
    }
}

任意のヒント？

4

3 に答える 3

0

次のようなことをしてみてください

CSS

#header {
  overflow: hidden;
}

#header > .wrap {
  float: left;
  width: 100%;
}

JS

function centerLayout(){
  if(jQuery(window).width() > mobile_width ){
    newWidth = jQuery('.isotope').width() - 10;
    jQuery('#header .wrap, #footer .wrap, #filtering-nav, .navigation').css('width',newWidth);
  }
}
jQuery(document).ready(centerLayout);
于 2012-11-30T18:26:27.127 に答える
0

これで修正されるはずです：

これをスタイル シートに追加します。

#grid {
  margin: auto;
  width: 1050px;
}
于 2012-11-29T20:53:13.820 に答える
0

みたいにやってみる

たとえば、これでは3つの列を配置していますが、すべてのブラウザで動作することを確認するために

-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3; /*normal att*/

-moz- で 1 回、-webkit- で 1 回、なしで 1 回実行します。

一部のプロパティはすべてのブラウザーがそれを理解するわけではないため、例のようにブラウザーが使用するキット名を追加する必要があります。複数の列は常にサポートされていないため、キット名を追加する必要がありました

使用したいプロパティは「column-count」です。いつものように書き、他のすべてのブラウザで完全に機能することを確認するために、プロパティ名の前に「-kit name-」を追加します

今回はうまく説明できれば幸いです=]

于 2012-11-29T20:54:11.870 に答える