-2

CSSファイルでスタイル設定されたHTMLがあります。問題は、ブラウザの互換性にいくつか問題があることです。すべての問題を解決するには、問題を修正するために新しいCSSルール（マージンまたは高さ）を追加する必要があります。Webページの訪問者のブラウザに応じて、5〜6divを変更する必要があります。たとえば、次の名前の特定の人を取り上げましょう。


<div>#main_menu

#main_menu{
widht: 800px;
height: 35px;
line-height: 35px;
}

次に、Webブラウザに応じて新しいCSS固有のルールを追加する必要があります。

  • Mozilla Firefoxの場合、次のように設定する必要がありますheight: 34;。height: 35;
  • Operaの場合、次のように設定する必要があります。top-margin: -3px;
  • Internet Explorerの場合、次のように設定する必要があります。top-margin: -2px;

私はこのようなことをしようとしましたが、残念ながらそれがどのように機能するのかわかりません：

#main_menu{
widht: 800px;
height: 35px;
line-height: 35px;

-moz-height: 34; /* for Firefox */
-o-top-margin: -3px; /* for Opera */
-ms-top-margin: -2px; /* for IE */
}

PS：CSSコードはChromeとSafariで問題なく動作します。

お時間をいただきありがとうございます！

4

4 に答える 4

1

あなたが求めていることはCSSではできません。

CSS仕様によって提供される粒度のレベルは、オプションで特定のファイル（既に知っている）を含めることです。ある程度のブラウザ検出と組み合わせることで、「基本」スタイルに存在するスタイルを上書きするスタイルを提供できます。

この目的でInternetExplorerの条件付きコメントを使用することは非常に一般的です。

<link rel="stylesheet" type="text/css" href="base.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

ベンダー固有のプレフィックス（-ms、-moz、-webkitなど）は、特定のブラウザーをターゲットにするためのものではありません。これらは、正式なCSS仕様にはない機能を提供するために、ベンダーが提供する独自のスタイルです。多くの場合、これらは開発中のCSS仕様に基づく「実験的な」プロパティであり、仕様が正式化されたときに非推奨になることを目的としています。

于 2013-01-30T17:29:21.187 に答える
0

CSSのみを介して特定のブラウザをターゲットにするベストプラクティスの方法はありません。コメントに記載されているように、などのベンダープレフィックス-mozは、実験的または開発中の仕様用であり、機能が削除または「リリース」されると、各ブラウザから削除されます。

どうしてもブラウザターゲティングを行う必要がある場合は、JavaScriptを使用してブラウザを検出し、bodyタグを識別するクラスを追加してみてください。次に、次のようなルールを作成できます。

body.firefox #main-menu { height: 34; }
于 2013-01-30T17:34:04.237 に答える
0

シンプルなソリューション。このJSライブラリを使用するだけで、すべてのブラウザとOSの組み合わせにスタイルを簡単に適用できます。

BrowserClass.js

これにより、bodyタグにクラス名が表示され、ブラウザの現在の名前とバージョン、および使用されているOSが表示されます。

あなたの場合：

ファイルを含めた後：

<script src="js/browserclass.js"></script>

サイト全体の設定、元の設定：

#main_menu{
  widht: 800px;
  height: 35px;
  line-height: 35px;
}

Firefox固有の設定：

body.ff #main_menu{
    height: 34px
}

オペラ固有の設定：

body.opera #main_menu{
    top-margin: -3px;
}

インターネットエクスプローラ：

body.ie #main_menu{
    top-margin: -2px;
}

注：バージョンごとにIEをチェックして、IE10以降に削除された[IEの場合]統計が同じ結果になることを確認することをお勧めします。これがその解決策です。

于 2014-04-15T20:37:30.113 に答える
-1 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#selector{ /* Chrome or Safari */
    background: green;
}

#selector{ /* Internet Explorer 8 or bigger vers. */
    background: pink\9;
}

@-moz-document url-prefix(){ /* Firefox */
#selector{
background: lime;
}
}

doesnotexist:-o-prefocus, #selector{ /* Opera */
  background: red;
}
</style>
</head>

<body>
<div id="selector" style="padding:100px;">ss</div>
</body>
</html>
于 2013-01-31T09:06:15.760 に答える