• ベストアンサー

firefox だけ専用のCSSを表示させたいのですが、、、

firefox 専用のCSSを表示させたいのですが、 stylelink.js として var var_css=''; if(checkB.Mac) { if(checkB.SAF) { var_css="SAF"; } else if(checkB.IE52) { var_css="MacIE52"; } else if(checkB.IE5 || checkB.IE51 || checkB.IE6) { var_css="MacIE5"; } else if(checkB.NN6 || checkB.NN7) { var_css="MacNN6"; } else { var_css="common"; } } else if(checkB.Win) { if(checkB.IE) { var_css="IEGEK"; } else if(checkB.Win) { if(checkB.gecko) { var_css="firefox"; } else { var_css="common"; } } document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"/css/"+var_css+".css\" title=\"fontproperty\">"); としましたが 外部 firefox.css が上手く反映しません。 どうすればよいのでしょうか? 御教授をお願いいたします。

  • ya-ya-
  • お礼率42% (110/256)

質問者が選んだベストアンサー

  • ベストアンサー
  • NTJ
  • ベストアンサー率44% (46/103)
回答No.2

可能性としてまず、「判定文が誤っている」可能性は忌めないと思います。 とりあえず、以下のように単純化して、CSSが反映されるかを確認するのが先決と思われます。 <SCRIPT> document.write('<LINK rel="stylesheet" type="text/css" href="/css/firefox.css">'); </SCRIPT> 混乱の多い¥によるエスケープを、JavaScript側の文字列定義をシングルコートに変更して回避している点にもご注目ください。 もし、この記述でも反映されないのなら、問題はスクリプトの側にではなくCSSそのものの定義にあるか、パスの指定誤りと思われます。(たぶん、パスを絶対パスへ変更すると直るような気がしますが。) 逆にこれで反映されるなら、その前の分岐処理の誤りです。 LINKの出力部分を alert(var_css); へ書き換えて、期待通りの出力になっているかご確認ください。 JavaScriptはデバックのし難い処理系なので、このように原因を切り分けて少しづつ問題を絞り込んで行く努力が必要です。 デバッカを自力で組み込むような作業が必要な場合も多いですね。 頑張ってください。

ya-ya-
質問者

お礼

御礼が遅くなり申し訳ございません。 色々と試して基本的なところまでさかのぼって頑張って見ましたが別の方向から解決することになりました。 有難う御座いました。

その他の回答 (1)

  • fire--
  • ベストアンサー率49% (146/293)
回答No.1

checkBって何でしょう? 全然、別のやり方ですが、以下のサイトを参考にしてはどうでしょう。

参考URL:
http://www.keynavi.net/ja/bugh/css_multi.html

関連するQ&A

  • Macfirefox3とMacfirefox2以下でCSSを切り替えたい

    MacのFirefox3は、Firefox2までとはデフォルトフォントサイズが 違うので、Firefox3とそれ以外のFirefoxで分けたいです。 今まで、CSSを以下のスクリプトでブラウザ別に分岐していました。 MacのFirefox3の分岐を増やしてみたのですが、それ以外のFirefoxのCSSに 分岐されてしまいます。 あまりJavascriptに明るくないので、 どうしてわかれてくれないものか困っています。 どうぞお知恵をお貸し下さい! ↓以下、かいてみたソースです。 var Win=(navigator.userAgent.indexOf("Win")!=-1); var Mac=(navigator.userAgent.indexOf("Mac")!=-1); var Explorer=(navigator.appName.indexOf("Explorer")!=-1); var Firefox=(navigator.userAgent.indexOf("Firefox") !=-1); var Netscape=(navigator.appName.indexOf("Netscape")!=-1); var opera=(navigator.userAgent.indexOf("Opera")!=-1); var safari=(navigator.userAgent.indexOf("Safari")!=-1); var Version=navigator.appVersion.charAt(0); if(safari){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Win && Explorer && Version=="6"){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } else if(Win && Firefox){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } else if(Win && opera){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } /*増やしたところ*/ else if(Mac && Firefox && Version=="3"){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); }/*増やしたところ終わり*/ else if(Mac && Firefox){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else if(Mac && opera){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Win && Netscape && Version=="4"){ document.write('<LINK rel="stylesheet" href="/css/win_nn.css" type="text/css">'); } else if(Mac && Explorer && Version=="5"){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Mac && Netscape && Version=="7"){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else if(Mac && Netscape && Version=="4"){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else{ document.write('<LINK rel="stylesheet" href="/css/font.css" type="text/css">'); }

  • CSSをあとから読み込みたい。

    「CSS読み込み」クリックで、追加CSSを読み込みたいのですが、 以下のやり方でIE6以外ではできたのですがIE6で動きません。 どなたかアドバイスいただけると幸いです。 ▼JS=============================================================== function roadcss(){ if(navigator.userAgent.indexOf("MSIE") > -1){ document.createStyleSheet('/answer.css'); } else { var tag=document.createElement('link'); tag.setAttribute("type","text/css"); tag.setAttribute("rel","stylesheet"); tag.setAttribute("href","/answer.css");​ document.getElementsByTagName('head')[0].appendChild(tag); } } ▼HTML============================================================= <a href="javascript:void(0)" onClick="roadcss()">CSS読み込み</a>

  • cssの振り分けについて

    下記のjavascriptの内容でわからないのでおしえてください。 if(cssFile){ if (document.getElementById && !opera5 && !opera6 && !(mac && ie5) && !icab){ var head = document.getElementsByTagName('HEAD').item(0); var newLink = document.createElement('LINK'); newLink.rel = "stylesheet"; newLink.type = "text/css"; newLink.href = cssFile; head.appendChild(newLink); }else{ document.open(); document.write('<link rel="stylesheet" href="' + cssFile + '" type="text/css">'); document.close(); } } よろしくお願いします。

  • NNだけCSSのリンクが切れる?!

    <link href="common/top.css" rel="stylesheet" type="text/css"> 上記のようなソースで外部ファイルにリンクしてるのですが、 サーバにあげたときだけNNで見るとCSSが適用されません。(IEでは表示されます) ローカルでみれば、IEでもNNでも問題なく表示されるし、 外部ファイルをやめて、HTML内にCSSを記述すればサーバにあげても表示されます。 サーバ側に原因があるのか、ソースコードで解決できるのか どなたかこの現象の解決方法を教えて下さい!!

  • IE用と、その他のCSSを条件分岐

    お世話になっています。 IE用と、その他のCSSを条件分岐させるために 以下の用にやったのですが その他のfirefoxなどもIE用(wholerulesie)のスタイルシートになってしまいます。 どこが悪いのでしょうか? <link rel="stylesheet" type="text/css" href="wholerules.css" /> <!–[if IE 8]> <link rel="stylesheet" type="text/css" href="wholerulesie.css" /> <![endif]–>

    • ベストアンサー
    • HTML
  • ブラウザによるCSSの切替スクリプト

    ブラウザによるCSSの切替スクリプトを作りましたが上手くいきません。 ====css.js====================================================== function browserCheck(){ //変数myBrowにユーザの環境を代入 myBrow = navigator.userAgent; //変数myBrowに文字列Operaが入っていた場合(Opera)の処理 if (myBrow.match(/Opera[\/\s](\d\.\d+)/))     document.write("<link rel="stylesheet" type="text/css" href="Opera.css" charset="Shift_JIS">"); //Operaの処理 //変数myBrowに文字列MSIEが入っていた場合(IE)の処理。 //Operaにも文字列MSIEが入っているため、Operaの処理の後に行います。 else if (myBrow.match(/MSIE (\d\.\d+)/))     document.write("<link rel="stylesheet" type="text/css" href="MSIE.css" charset="Shift_JIS">"); //MSIEの処理 //変数myBrowに文字列Firefoxが入っていた場合の処理。 else if (myBrow.match(/Firefox[\/\s](\d\.\d+)/))     document.write("<link rel="stylesheet" type="text/css" href="Firefox.css" charset="Shift_JIS">"); //Firefoxの処理 //変数myBrowに文字列Netscapeが入っていた場合の処理。 else if (myBrow.match(/Netscape[\/\s](\d\.\d+)/))     document.write("<link rel="stylesheet" type="text/css" href="Netscape.css" charset="Shift_JIS">"); //Netscapeの処理 //上記以外の処理 else myBrow = "unknown"; //それ以外のブラウザ     document.write("<link rel="stylesheet" type="text/css" href="unknown.css" charset="Shift_JIS">"); //それ以外のブラウザの処理 } ================================================================ <html> <head> <script language="JavaScript" src="css.js"></script> <Script language="JavaScript"><!-- browserCheck(); //--></Script> </head> </html> どこか間違っているでしょうか? ご回答、宜しくお願い致します。

  • ファイヤーフォックスでCSSが読み込まれません

    会社のホームページを担当していて困っています。 IEでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか? よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>

  • cssのリンクをimport.cssに書きかえれないです!(@dreamweaver)

    はじめまして。 今ある <link href="style.css" rel="stylesheet" type="text/css" /> を common/import.cssをリンクし、 <link href="/common/import.css" rel="stylesheet" type="text/css" /> に変更したいのですが、なぜかできません>< ちなみにimport.cssの中身は @charset "shift_jis"; @import "/common/css/base.css"; @import "/common/css/contents.css"; @import "/common/css/right.css"; このような感じです。 ためしにcommon.cssにいろいろ書いたところ、反映されたので、common.cssそのものは参照できていると思うのですが・・・ ご教授いただければ幸いです。

    • ベストアンサー
    • HTML
  • ファイヤーフォックスでCSSが機能しません

    会社のホームページを担当していて困っています。 IEでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか? よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>

  • 外部CSSの@charasetの取得

    外部CSSに@charsetがある場合と無い場合で、そのCSSを読み込んでいるlink要素に対して同じcharaset属性を追加したいと思っています。 (@charasetは必ずcssの1行目にあります。) 以下途中までは書いたのですが、肝心の@charasetを参照する部分がわかりませんでした。 window.onload = function() { var Link=document.getElementsByTagName('LINK'); for (var i=0;i<Link.length;i++){ var Rel= Link[i].getAttribute("rel"); if(Rel=='stylesheet' || Rel=='alternate stylesheet'){ Link[i].setAttribute("charaset", ); }}}; 対応させたいブラウザがSafariのみなのでIEに対応したりする必要はとくにありません。 よろしくお願いします。

専門家に質問してみよう