1

一部のブラウザーでは正しく機能し、IE や Safari などの他のブラウザーでは機能しない css ファイルを使用しています。

異なるブラウザー互換性のために異なる.cssおよび.jsファイルを使用する手法はありますか?

4

4 に答える 4

3

絶対に、そしてこれはそれを行う方法を示す素晴らしい記事であり、それは一般的に悪い習慣であると認識されており、避けるべきである. ただし、多くのレガシー サポートを必要とする非常に複雑なサイトや設計指向のサイトでは、注意事項がわかっている場合は避けられないことがよくあります。全体として-しないでください！

于 2013-11-12T13:10:40.280 に答える
1

バージョン 9 までの Internet Explorer は、条件付きコメントをサポートしています。これにより、HTML を特定のバージョンの IE で表示したり、非表示にしたりできます。これを使用して、特定の CSS および JavaScript ファイルを特定のバージョンの Internet Explorer に配信できます。例えば：

<!--[if IE 8]>
<link rel="stylesheet" href="ie8.css">
<![endif]-->

<!--[if lt IE 9]>
<link rel="stylesheet" href="less-than-ie-9.css">
<![endif]-->

IE (バージョン 9 まで) は特にバグが多く、他のブラウザーに比べて標準のサポートが大幅に少なかったため、条件付きコメントを使用して修正することがよくあります。Paul Irish などは、条件付きコメントを使用してページにいくつかの HTML タグを含め、使用されている IE のバージョンを識別するクラスを含めることを提案しています。これにより、IE 固有の CSS を残りの CSS と同じスタイルシートに保持できます。 . 例えば：

<!--[if lt IE 7]><html lang="en" class="lte-ie9 lte-ie8 lte-ie7 lte-ie6"><![endif]-->
<!--[if IE 7]>   <html lang="en" class="lte-ie9 lte-ie8 lte-ie7"><![endif]-->
<!--[if IE 8]>   <html lang="en" class="lte-ie9 lte-ie8"><![endif]-->
<!--[if IE 9]>   <html lang="en" class="lte-ie9"><![endif]-->
<!--[if !IE><!--><html lang="en"><!--<![endif]-->

(ただし、これによりX-UA-Compatible、 doctype の前に空の条件付きコメントを含めない限り、メタ タグが機能しなくなることに注意してください。人々が IE の古いバージョンのサポートをやめたがっている理由がわかります。)

他のブラウザーは同様のメカニズムをサポートしていません。@ExtProの回答のリンクが示すように、ブラウザには通常、そのブラウザでコードをターゲットにするために使用できる、独自の何らかのCSS解析バグがあります。ただし、その道を進むと、バグのある動作に依存することになります。ご存じのとおり、ターゲットにしたくない将来のブラウザーには、誤って同じバグが含まれる可能性があります。一般に、最善のアプローチは、標準に従ってコーディングし、特定のブラウザーで見つかったバグを回避することです。

また、いくつかのもの (フォーム コントロールなど) は、異なるブラウザーでは同じように見えないことも覚えておく価値がありますが、それは問題ありません。通常、エンド ユーザーを混乱させることはありません。

于 2013-11-12T13:15:05.230 に答える
1

Safari の場合、特別な CSS は必要ありません。IE の一般的な用途は、いくつかのスタイルをオーバーライドする特別な css を作成することです。

<link rel="stylesheet" type="text/css" href="style.css" media="all">
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="styleIE.css" media="all">
<![endif]-->
于 2013-11-12T13:14:01.693 に答える
0

同じ問題があったので、この古い質問を見つけたので、検索しました。多分これはあなたにとって良い解決策です。少なくとも私にとってはそうです。そこで、さまざまなブラウザでさまざまな styles.css を使用する方法のコードを次に示します。

JavaScript のみ:

<script type="text/javascript">
        var cssId = 'myCss';
        var head  = document.getElementsByTagName('head')[0];
        var link  = document.createElement('link');
        link.id   = cssId;
        link.rel  = 'stylesheet';
        link.type = 'text/css';
        link.media = 'all';

        /*----------------------------------------------------------------*/
        var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
        var isFirefox = typeof InstallTrigger !== 'undefined';
        var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
        var isChrome = !!window.chrome && !isOpera; 
        var isIE = /*@cc_on!@*/false || !!document.documentMode;

    if (!document.getElementById(cssId)){
        var output = "";
        if(isFirefox){
            output += "Firefox";
                link.href = 'firefox.css';
                head.appendChild(link);
        }
        else if(isChrome){
            output += "Chrome";
                link.href = 'chrome.css';
                head.appendChild(link);
        }
        else if(isSafari){
            output += "Safari";
                link.href = 'safari.css';
                head.appendChild(link);
        }
        else if(isOpera){
            output += "Opera";
                link.href = 'opera.css';
                head.appendChild(link);
        }
        else if(isIE){
            output += "IE";
                link.href = 'ie.css';
                head.appendChild(link);
        }
        document.body.innerHTML = output;
    }
    </script>

お役に立てば幸いです。

于 2015-03-20T09:37:42.557 に答える