2

ユーザー/訪問者がオペラを使用している場合、css で何かをオーバーライドして別のサイズを使用する方法はありますか?

例として、chrome、ff、safari ではこれがうまく機能します。

.section#search h3 a {
    background: url("../img/search.png") no-repeat 0 50%;
    padding: 0 0 0 25px;
    position: relative;
}

しかし、Opera ではパディングはあまり良くありません...追加top: 16px;するか、パディングを次のように変更する必要がありますpadding: 0 0 36px 25px;

IEやJavaScriptの使用のような「ハック」はありますか? アイデアなし...

私が必要とするのは、オペラのためだけにそのトップまたは新しいパディングを追加することだけです. ありがとう ;)

4

4 に答える 4

3

Modernizrのような JavaScript ライブラリを使用してブラウザをテストし、それが追加する CSS クラスを使用して特に Opera をターゲットにすることができます。

于 2012-05-15T22:31:44.897 に答える
3

conditional-css ツールを使用すると、opera をターゲットにすることができますが、エンジンが重要です。conditional-css.com は次のように説明しています。

条件付き CSS は、ユーザーが使用しているブラウザーにそれほど関心があるわけではなく、ユーザーのブラウザーが使用しているレンダリング エンジンに関心があります。これが、Conditional-CSS がブラウザー条件の 1 つとして、よく知られている Firefox ではなく「Gecko」を使用する理由です。同様に、Safari の場合は「Webkit」が使用されます。これにより、同じレンダリング エンジンを使用する他のブラウザーが、同じターゲット CSS を受け取ることができます。この規則の例外は、IE の条件付きコメントが使用するものであり、Trident は特によく知られていないため、('Trident' を使用するのではなく) IE に対して作成されます。Opera の場合も同様に、Opera ブラウザのみが Presto レンダリング エンジンを使用するため、「Opera」が使用されます。

http://www.conditional-css.com/advanced

彼らは、条件付きタグが次のように形成されると書いています。

[if {!} browser]
[if {!} browser version]
[if {!} condition browser version]

そのブラウザ名は次のとおりです。

IE - Internet Explorer
Gecko - Gecko based browsers (Firefox, Camino etc)
Webkit - Webkit based browsers (Safari, Shiira etc)
'SafMob' - Mobile Safari (iPhone / iPod Touch)
Opera - Opera's browser
IEMac - Internet Explorer for the Mac
Konq - Konqueror
IEmob - IE mobile
PSP - Playstation Portable
NetF - Net Front

したがって、彼らによると、次の方法でターゲットにできることは論理的に従う必要があります。 [if Opera]

CSS ブロックで次のようにします。

[if Opera] .box {  
    width: 500px;  
    padding: 100px 0;  
} 

または、CSS の場合は次のようにインクルードします。

<!--[if Opera]>

<![endif]-->
于 2012-05-15T22:34:14.553 に答える
1

回避策とハックを使用する前に、次のことを考慮してください。

  1. あなたのページは厳密モードですか?そうでない場合は、ページの最初の行にDoctypeを追加します。

    <!DOCTYPE html>
    

    それ以外の場合、ページはクォークモードになり、ブラウザ間での不整合の主な原因になります。

  2. CSSリセットを使用してみてください。これにより、パディング、マージン、配置など、ブラウザ間のわずかな不一致が解消されます。このスタイルを他のスタイルの前にロードします。

于 2012-05-15T22:38:26.263 に答える
1

オペラのバージョンと種類は?このメディアクエリを使用できます

@media not all and (-webkit-min-device-pixel-ratio:0) { } で Opera 10、10.5、11、および 11.6 をターゲットにする

ここで確認してください:注、私はchrome19とopera 11.6でのみ表示しましたhttp://jsfiddle.net/jalbertbowdenii/fw94a/

より良い

x:-o-prefocus, p{}

http://jsfiddle.net/jalbertbowdenii/6pRPC/

于 2012-05-15T22:37:06.037 に答える