現在4つのブラウザでほぼ同じような動作・見栄えをするサイトを制作しております。
4つのブラウザとは(opera ie6 ie7 firefox)です。
そこで、現在、ie6だけで生じる表示崩れがあり、
そのcssの解決方法も発見したのですが、
それを解決すると今度は逆に、opera,ie7,firefoxでエラーが起きてしまいます。
読み込んでいるのは、一つの外部cssファイル、main.cssです。
現在考えられる解決方法としては、
1.ie6だけにcssを掛けるハック?
この場合、どのようにハックをかければいいのでしょうか。
色々しらべましたが、スターハックなど、現在使って良いハックというのは何になるのでしょうか。
具体的なcssコードは、以下です。
#pull a:hover{
display:block;
/*以下ie6だけに指示したい命令 現状コメントアウトしています*/
/*margin-bottom:-20px;*/
}
2.ie6だけ別の外部cssファイルを読み込ませる。
ブラウザ毎に違うcssファイルを読み込ませることってできるのでしょうか。
(javascriptで判別するのでしょうか?)
ie6 なら、main_ie6.cssを読み込み、
それ以外のブラウザなら main.cssを読み込ませる
一番ベストな方法を教えていただければと思います。
No.4
- 回答日時:
同じく何がベストか・・・は、状況によりますが。
簡便なのは No.1さんの回答でしょうね。
何がハックか、の定義は決まっていなくて、使って良い悪いは、個人の判断によるところが大きいと思います。ハックはブラウザの"バグ"を利用して何かをする・させる辺りから名付けられたのでしょうね、多分。
ハック技と言われるものは、使い始めるとcssが膨大になりがちです。私などは、どうしてもハック技の類いじゃないと解決しない場合は使いますが、極力簡単に書いて行くようにしています。後々のメンテナンスを考えると、シンプルなほうが楽だからですけども。
No.1さんの例、 Condirional Commentsは、"未満"ですので、IE5,IE5.5も含みます。それと、Mac IE5は対応してない(らしい)。まあ、IE6を問題になさってらっしゃるので、MacIEは関係ないですか・・・。
Conditional Comments または 条件付コメント で検索なさると、たくさんhitするはずです。詳しい検証サイトもありますので、お確かめ下さい。
2.の別cssを読み込ませる場合、php,javascriptなどで判別し、それぞれに見合うcssを用意することになります。ただ、種別を欺くUAも存在するので、100% 確実とは言い切れません。
他に、セレクタを使う方法があります。
IE6以前のブラウザに適用する指定を先に書いて、次にセレクタを利用します。セレクタを利用する目的は、モダンブラウザに本来の表示をさせるところにあります。
例えば、
body{
/* IE6以前 のブラウザに適用 */
}
html > body{
/* モダンブラウザに適用 */
}
モダンブラウザは後から書かれた指定、上書きされる方を適用します。IEに限らず、です。指定がダブルになるため、分岐の必要な指定が膨大な場合、cssの見通しがちょっと悪くなるかも知れません。
No.3ベストアンサー
- 回答日時:
私の場合
// _kon : true = konqueror, false = others
_kon =navigator.userAgent.toLowerCase().indexOf('konqueror')!=-1;
// _safari : true = safari, false = others
_safari=navigator.userAgent.toLowerCase().indexOf('safari')!=-1;
// _dom : kind of DOM.
// IE4 = 1, IE5+ = 2, NN4 = 3, NN6+ = 4, others = 0
_dom = document.all?(document.getElementById?2:1):
(document.getElementById?4:
(document.layers?3:0));
_createLayerNo = 0; // layer no.
lod_asw=9;
if(_dom==2 || _dom==1){
browser = navigator.appName;
if (browser == "Microsoft Internet Explorer") browser = "MSIE";
appVer = navigator.userAgent;
s = appVer.indexOf("MSIE ",0) + 5;
e = appVer.indexOf(";",s);
ver = eval(appVer.substring(s,e));
if(ver > "5") lod_asw=0;}
if(lod_asw==0) {dirName="../c_f/o_ie01.css";}
if(lod_asw==9) {dirName="../c_f/o_ta01.css";}
document.write("<link rel='stylesheet' href='"+dirName+"' type='text/css'>");
等3種類の方法で使用しています
参考URLは、
http://www.din.or.jp/~hagi3/JavaScript/JSTips/De …
の汎用関数とオブジェクト のライブラリ集
や
http://www.kisc.meiji.ac.jp/~pz03013/html/css_ch …
http://www.usamimi.info/~geko/arch_web/02_sample …
を参考に作成しました
No.2
- 回答日時:
ベストは状況に拠りますが……。
・cssをサーバーの機能で振り分けてしまう
ApacheのRewriteCond + RewriteRuleでcssを機械的に分離する等。
cssを二つ用意してしまえば,あとは特別な記述が要らないのである意味簡単。
・htmlではなくjsp/asp/php等なら,読み込むファイルをUser-Agentで変更してしまう
サーバー側でプログラムを動かせるなら,この方法が手っ取り早いかもしれません。
ただし,呼び出し箇所が複数になるので,そのあたりがちょっと面倒です。
・cssを実はjsp/asp/php等が返すようにしておく
jspなどのプログラムは,何もtext/htmlを返さないといけないわけではないですし,CSSのURIが.cssで終わっていないといけないわけでもないです。
なので,プログラムがtext/cssを返すようにすれば,上記RewriteRule等と同等のことができます。
上記は全てサーバー側で振り分けてしまう,という方法です。
なので,利用可能な状況は限られてしまう上,UAを詐称されると対応出来ないものの,Javascript Off環境下でも問題なく動く,UA側の独自拡張に頼らないという利点があります。
ただし,一般のプロバイダ等では,サーバー側の振り分けは厳しいでしょう。
会社等であれば,これらの振り分けが有効かもしれません。
No.1
- 回答日時:
IEには「条件付きコメント」というのが書けるので、
IE6にだけ別のスタイルを追加・上書きしてはどうでしょうか?
<!--[if lt IE 7]>
↑ HTMLの文法的にはただのコメント。
IE7未満では有効になります。
<style>~</style> や
<link rel="stylesheet" ~ > とかを書く。
<![endif]-->
参考
http://www.keynavi.net/ja/bugh/comments.html
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- HTML・CSS Chrome のキャッシュについて 3 2022/05/26 07:50
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- HTML・CSS HTMLとCSS(ブラウザ関連)について質問です。 1 2023/03/07 08:07
- Chrome(クローム) 最近のGoogle Chromeのデータ読み込みの遅延やエラーって頻発しますか? 2 2023/01/06 22:12
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript ローディングアニメーションのロゴがページを読み込んだ後でも消えません 1 2022/09/20 21:50
- ホームページ作成・プログラミング ホームページ作成について。「ワードプレスではありません」。 3 2023/08/13 14:44
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
CSS のみのタブ切り替えについて
-
静止画画像をクリックすると音...
-
CSSが効かずどのように指定すれ...
-
cssの display: flex;で横並び...
-
css初心者 フレックスボックス...
-
詐欺メールがまた来ました。5月...
-
HTMLタグのあるCSVファイルを利...
-
WEBページを強制的に横画面で見...
-
ウェブサイトにアップされてい...
-
角丸画像の背景色を透明にした...
-
Chromeのパスワードマネージャ...
-
HTMLで画像をポップアップで表...
-
テーブルタグのセルの幅の一部...
-
<!DOCTYPE html>あってますか?...
-
<!DOCTYPE html>あってますか?...
-
Duolingo のソースコードの名前...
-
テーブルのセルデータを自動改...
-
HTMLですCSSです この画像のよ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSS、Bootstrapについて contai...
-
携帯では指定のタグを無効化す...
-
リンクの色一括指定について。
-
cssでリンク先のurlを表示させ...
-
メールソフトBecky!のHTMLメー...
-
safari でcssがききません!
-
ホームページについて質問です...
-
ホームページビルダーでcssのサ...
-
複数のcheckboxを間隔を空けず...
-
Chromeでcssを表示させると、cs...
-
CSSシグネチャ
-
文字の色、大きさを変えるWe...
-
HTMLで、IE/firefox 書き分ける...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
入力規則のリストの文字の大き...
-
テーブル内の文字サイズを変更...
-
PDFファイルを開かずに印刷...
-
ペイント3Dのテキストサイズ変更
おすすめ情報