⛪️ 🍝 ✊ さまざまなブラウザのcss修正 👨🏽‍✈️ 🈺 🧥

抽象的な顧客と抽象的なレイアウトデザイナーの抽象的な会話を想像してください。

「メニューにバグがあり、すべてが上に移動しました」と顧客は言います。

-すべてのブラウザで見た、いや！何を見ているの？ -タイプセッターは言う。

-Firefoxで。

「すべてが正常です」とレイアウトデザイナーは、Firefoxのすべてのバージョンでサイトを閲覧しています。

-バグがあります。これが重要な場合、私はケシの出身です。

おそらく残念だ...

少し前まで、古いハードからファイルをソートして、そこに小さなJavaScriptのアーカイブを見つけました。そうですね（アーカイブ内）、すべてのブラウザーのレイアウトのバグを修正するように設計された非常に便利なスクリプトが見つかりました。

実際のソース：

  var cssFix = function（）{
   var u = navigator.userAgent.toLowerCase（）、
   is = function（t）{return（u.indexOf（t）！=-1）};
   $（ "html"）。addClass（[
     （！（/ opera | webtv / i.test（u））&& / msie（\ d）/。test（u））？（ 'ie ie' + RegExp。$ 1）
       ：is（ 'firefox / 2'）？ 'gecko ff2'
       ：is（ 'firefox / 3'）？ 'gecko ff3'
       ：is（ 'gecko /'）？ 'gecko'
       ：is（ 'opera / 9'）？ 'opera opera9'：/ opera（\ d）/。test（u）？ 'opera opera' + RegExp。$ 1
       ：is（ 'konqueror'）？ 'konqueror'
       ：is（ 'applewebkit /'）？ 'webkit safari'
       ：is（ 'mozilla /'）？ 'gecko'： ''、
     （is（ 'x11'）|| is（ 'linux'））？ '  linux '
       ：is（ 'mac'）？ '  mac
       ：is（ 'win'）？ '  「：」に勝つ
   ] .join（ ''））;
 }（）;

upd：jQueryを使用しないソース

  var cssFix = function（）{
   var u = navigator.userAgent.toLowerCase（）、
   addClass = function（el、val）{
     if（！el.className）{
       el.className = val;
     } else {
       var newCl = el.className;
       newCl + =（ "" + val）;
       el.className = newCl;
     }
   }、
   is = function（t）{return（u.indexOf（t）！=-1）};
   addClass（document.getElementsByTagName（ 'html'）[0]、[
     （！（/ opera | webtv / i.test（u））&& / msie（\ d）/。test（u））？（ 'ie ie' + RegExp。$ 1）
       ：is（ 'firefox / 2'）？ 'gecko ff2'
       ：is（ 'firefox / 3'）？ 'gecko ff3'
       ：is（ 'gecko /'）？ 'gecko'
       ：is（ 'opera / 9'）？ 'opera opera9'：/ opera（\ d）/。test（u）？ 'opera opera' + RegExp。$ 1
       ：is（ 'konqueror'）？ 'konqueror'
       ：is（ 'applewebkit /'）？ 'webkit safari'
       ：is（ 'mozilla /'）？ 'gecko'： ''、
     （is（ 'x11'）|| is（ 'linux'））？ '  linux '
       ：is（ 'mac'）？ '  mac
       ：is（ 'win'）？ '  「：」に勝つ
   ] .join（ ""））;
 }（）;

次に、このスクリプトの使用方法について説明します。

最初に行うことは、ページにスクリプトを貼り付けることです:)次に、CSSのみを編集します。

これで、追加のcssセレクター、つまりOSとブラウザーを自由に使用できます。つまり、設計は次のようになります。

。[OS]。[ブラウザ] cssセレクター

軸セレクター：

.win-Windows

.linux-Linux

.mac-MacOS

ブラウザーセレクター：

.ie-IEのすべてのバージョン

.ie8-IE 8.x

.ie7-IE 7.x

.ie6-IE 6.x

.ie5-IE 5.x

.gecko-firefoxおよび他のgeckoブラウザーのすべてのバージョン

.ff2-Firefox 2

.ff3-Firefox 3

.opera-オペラのすべてのバージョン

.opera8-オペラ8.x

.opera9-オペラ9.x

.konqueror-konqueror

.safari-サファリ

ポピーにfirefoxを使用して抽象的な状況に戻ると、解決策は次のようになります。

.mac.geckoセレクタ{/ *固定コード* /}

または

.mac.ff2（3）セレクター{/ *固定コード* /}

セレクターの優先順位に注目する価値があります。 FF3の例を分析しましょう。

.win.ff3 #id {背景：#aaa} / * 1 * /

.win.gecko #id {background：＃f00} / * 2 * /

.ff3 #id {背景：＃333} / * 3 * /

.gecko #id {background：＃00f} / * 4 * /

.win #id {background：＃ff0} / * 5 * /

表示する

PS：少なくとも誰かが最初の投稿に興味を持ってくれることを願っています。

PPS：このスクリプトについて既に書いている場合は教えてください-記事を削除します。

さまざまなブラウザのcss修正

More articles: