1

CSS3 を使用していくつかの Web ページをデザインしました。Google Chrome では見栄えがしますが、Internet Explorer ではスタイルがぎこちなくなります。これらに関して 2 つの質問があります。

このようなことはできますか : 2 つのスタイル シートを作成し、ユーザーのブラウザーに応じて適切なバージョンを読み込むことができます。もっと明確にしましょう：

if browser is Internet Explorer
    use stylesheet1.css
else
    use stylesheet2.css

私の主な問題は、border-radiusプロパティの使用法です。これを直接回避する方法はありますか。

4

4 に答える 4

6

HTML/ヘッダーで次の操作を行います。

<!--[if IE]>
 <link rel = "stylesheet" type = "text/css" href = "ie-css.css" />
<![endif]-->

さらに分解することもできます。

<!--[if IE 7 ]>     
 <link rel = "stylesheet" type = "text/css" href = "ie7-css.css" />
<![endif]-->

または他の多くの組み合わせ:

<!--[if IE 7 ]>
<!--[if lt IE 7]>     <--- less than IE7
<!--[if gt IE 7]>     <--- greater than IE7
<!--[if IE 8 ]>
<!--[if IE 9 ]>
<!--[if !IE]>

HTML5 Boilerplateによる推奨 (および使用される条件) :

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
于 2012-11-27T13:35:24.197 に答える
2

はい、できます！これらは条件付きコメントと呼ばれ、探していることを正確に実行します。

<link relblablabla />

<!--[if lt IE9]>
    <link relblablabla />
<![endif]-->

上記の例では、使用している Internet Explorer のバージョンが IE9 未満である場合にのみ、代替の 2 番目のスタイルシートを読み込みます。他の例については、上記のリンクを参照してください。

于 2012-11-27T13:36:52.853 に答える
2

これらの種類のものは、2 つの異なる css ファイルを持つことで修正できます。クロスブラウジングの問題全体に関する彼の解決策を読んでください。

IE7/8 で CSS3 の border-radius と box-shadow をエミュレートする

于 2012-11-27T13:37:20.967 に答える
2

あなたはこのようにすることができます

onload で関数を呼び出す

function something()
{
nav=navigator.userAgent;
if (nav.indexOf("IE 8.0")!=-1)
{    

    var $ = document; 
    var cssId = 'myCss';  // you could encode the css path itself to generate id..
    if (!$.getElementById(cssId))
    {
        var head  = $.getElementsByTagName('head')[0];
        var link  = $.createElement('link');
        link.id   = cssId;
        link.rel  = 'stylesheet';
        link.type = 'text/css';
        link.href = 'css/cssyouwant.css';
        link.media = 'all';
        head.appendChild(link);
    }
}
}

navigtor.userAgent には、ブラウザ名が表示されます。

于 2012-11-27T13:37:40.980 に答える