3

http://onpole.org/roland/では、背景画像を使用してページを装飾しています。私自身、Mozilla Firefox を使用しているので、そのブラウザーを念頭に置いて CSS を作成しました。

ただし、同じ Web サイトを別のブラウザー (Chrome、Safari、IE はまだ試していません) で開くと、レイアウトが乱れる小さな違いが見られます。

例:

(これは実際には Firefox では間違っています)

ページの上部には、ウェブサイトの次の部分に白い線が出て下がっている図があります。
Firefoxだと次の部分になるとエラーが出て、 これを見る

しかし、Safari と Chrome では、この行は正しいです!

これを見る

もっと例を投稿したいのですが、どうやら私の評判は低すぎて 2 つ以上のリンクを投稿できません。具体的です。

線から矢が出ている部分もあります。これは Firefox では問題なく動作しますが、Safari と Chrome の両方でエラーが発生します。

したがって、最初のエラーは Firefox では正しくありませんが、Safari と Chrome では問題なく動作します。2 番目のエラーは、まったく逆です。

これらの問題に対処する方法についてアドバイスが必要なので、ここに投稿します。行を 1 ピクセル移動するブラウザ固有の CSS を作成する必要がありますか? それとも何か他の方法がありますか？または、これらの違いがなぜ生じるのか知っている人はいますか?

4

1 に答える 1

1

単なる提案ですが、別のスタイルシートを作成してみませんか? 会社の Web サイトの再設計を手伝ったとき、上司と私は、スタイルシートが Chrome では適切にレンダリングされたが、Firefox では正しくレンダリングされないことに気付きました。最終的に、これらの領域を修正するためのスタイルシートを作成しました。使用されているブラウザが Firefox の場合にのみ起動します。

簡単なコマンドを使用して(また、スタイルシートがサイトのメイン テンプレート ディレクトリにあるCSSというフォルダーに保存されているPHPと仮定して)、使用されているブラウザーが Firefox であるかどうかを検出する方法を次に示します。これにより、ページが表示される前にスタイルシートが強制的に起動されます。ロードされても：GeckoGecko

// firefox
if ($this['useragent']->browser() == 'firefox') {

  // add gecko stylesheet
  $this['asset']->addFile('css', 'css:gecko.css');

}

重要: Gecko ベースのブラウザー専用のスタイルシートを作成する場合、シートは次のように作成する必要があります。

@-moz-document domain(YOUR-DOMAIN.com) {

  /* ADD YOUR CSS HERE */

}

間のコードのみが{ }Firefox で読み取られます。サイトの特定のサブドメインをターゲットにしたい場合は、そのサブドメインの宣言をすべて同じスタイルシートに追加できます。

@-moz-document domain(YOUR-DOMAIN.com) {

  /* ADD YOUR CSS HERE */

}

@-moz-document domain(SUBDOMAIN.YOUR-DOMAIN.com) {

  /* ADD YOUR CSS HERE */

}

{ }中括弧内にルールを入れておくことを忘れないでください。

于 2013-10-08T23:48:56.877 に答える