web-dev-qa-db-ja.com

IEスタイルシート内の条件付きコメントを使用する

HTML内でIE条件付きコメントを使用できることを知っています。

<!--[if IE]>
  <link href="ieOnlyStylesheet.css" />
<![endif]-->

しかし、IEでstylesheetのみをターゲットにしたい場合は、html内の特定の要素にcssルールを設定します。たとえば、このChromeを使用できます/ SafariハックCSSコードとしてCSSファイル内...

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .myClass{
        background: #fff;
        background:rgba(255,0,255,0.7);
    }
}

しかし、IE CSSスタイルシート内のハックを次のように使用すると：

 <!--[if IE]>
      .myClass{
        background: #fff;
        background:rgba(255,0,255,0.7);
    }
 <![endif]-->

動作しません。何を使用しますか？スタイルシート内ターゲットIEのみ？

cssconditional-comments
30
Dexter Schneider

条件付きコメントはスタイルシート内では機能しません。代わりに、HTMLで条件付きコメントを使用して、異なるCSSクラスまたはIDを要素に適用し、CSSでターゲットにできます。

例えば：

<!--[if IE]>
  <div id="wrapper" class="ie">
<![endif]-->
<!--[if !IE]>
  <div id="wrapper">
<![endif]-->

また、 Modernizr などのツールもあり、非常によく似た方法で機能の検出を行います（クラスを<html>要素）。古いブラウザをサポートしながら、新しいブラウザのデザイン/スクリプトを徐々に強化するために使用できます。

23
Derek Hunziker

Derek Hunzikerが言ったことよりも簡単です。

このコードをそのまま含めるだけです。

<!DOCTYPE html>
<!--[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]-->
    <head>

次に、たとえばIE 8以下をターゲットにしたい場合に、簡単にターゲットを設定できます。

.lt-ie9 body{css rule here;}

これで完了です！

乾杯

18
Yannis Dran

条件付きコメントはInternet Explorer 9以下で機能しますが、Internet Explorer 10以降では無視されます。 スタイルシートでInternet Explorer固有のCSSルールを使用できます。ハック？ええ、しかし実際には汚いハックではありません。

Internet Explorer 8、9、10、および11をターゲットにするには、次を使用できます。

@ media screen\0 {…}

Internet Explorer 6および7をターゲットにするには、次を使用できます。

@ media screen\9 {…}

ソース： https://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/media-tests/

それは私のために働いた。 異なるブラウザでテストする時間がありませんでした。動作するかどうかを確認できる場合は、コメントを追加してください（テストしたブラウザで）

例：

/* Default CSS rule for all browsers */

span.icon {
        width: 16px;
        display: inline-block;
        margin-right: -16px;
}

/* Style rules in the media rules below will only be applied in Internet Explorer */
/* Other browsers will ignore them. */  

@media screen\0, @media screen\9 {      
  span.icon {
    margin-right: 8px;
        }       
}
--- Nothing to see here. Only CSS rules ---

完全な例：

span.icon {
        width: 16px;
        display: inline-block;
        margin-right: -16px;
}

/* Style rules in the media rules below will only be applied in Internet Explorer, other browsers will ignore them. */  

@media screen\0, @media screen\9 {      

        /* Style rules here will only be applied in Internet Explorer, other browsers will ignore them. */ 
        
        span.icon {
                margin-right: 8px;
        }       
}


/* -----------------------------------------------------------------------------*/

a.icon {
        -webkit-padding-start: 1.5em;
        text-decoration: none;
}

a.icon:hover {
        text-decoration: underline;
}

span.icon_file {
        background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABHUlEQVR42o2RMW7DIBiF3498iHRJD5JKHurL+CRVBp+i2T16tTynF2gO0KSb5ZrBBl4HHDBuK/WXACH4eO9/CAAAbdvijzLGNE1TVZXfZuHg6XCAQESAZXbOKaXO57eiKG6ft9PrKQIkCQqFoIiQFBGlFIB5nvM8t9aOX2Nd18oDzjnPgCDpn/BH4zh2XZdlWVmWiUK4IgCBoFMUz9eP6zRN75cLgEQhcmTQIbl72O0f9865qLAAsURAAgKBJKEtgLXWvyjLuFsThCSstb8rBCaAQhDYWgIZ7myM+TUBjDHrHlZcbMYYk34cN0YSLcgS+wL0fe9TXDMbY33fR2AYBvyQ8L0Gk8MwREBrTfKe4TpTzwhArXWi8HI84h/1DfwI5mhxJamFAAAAAElFTkSuQmCC ") left top no-repeat;
}

span.icon_dir {
        background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII= ") left top no-repeat;
}

span.icon_up {
        background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmlJREFUeNpsU0toU0EUPfPysx/tTxuDH9SCWhUDooIbd7oRUUTMouqi2iIoCO6lceHWhegy4EJFinWjrlQUpVm0IIoFpVDEIthm0dpikpf3ZuZ6Z94nrXhhMjM3c8895977BBHB2PznK8WPtDgyWH5q77cPH8PpdXuhpQT4ifR9u5sfJb1bmw6VivahATDrxcRZ2njfoaMv+2j7mLDn93MPiNRMvGbL18L9IpF8h9/TN+EYkMffSiOXJ5+hkD+PdqcLpICWHOHc2CC+LEyA/K+cKQMnlQHJX8wqYG3MAJy88Wa4OLDvEqAEOpJd0LxHIMdHBziowSwVlF8D6QaicK01krw/JynwcKoEwZczewroTvZirlKJs5CqQ5CG8pb57FnJUA0LYCXMX5fibd+p8LWDDemcPZbzQyjvH+Ki1TlIciElA7ghwLKV4kRZstt2sANWRjYTAGzuP2hXZFpJ/GsxgGJ0ox1aoFWsDXyyxqCs26+ydmagFN/rRjymJ1898bzGzmQE0HCZpmk5A0RFIv8Pn0WYPsiu6t/Rsj6PauVTwffTSzGAGZhUG2F06hEc9ibS7OPMNp6ErYFlKavo7MkhmTqCxZ/jwzGA9Hx82H2BZSw1NTN9Gx8ycHkajU/7M+jInsDC7DiaEmo1bNl1AMr9ASFgqVu9MCTIzoGUimXVAnnaN0PdBBDCCYbEtMk6wkpQwIG0sn0PQIUF4GsTwLSIFKNqF6DVrQq+IWVrQDxAYQC/1SsYOI4pOxKZrfifiUSbDUisif7XlpGIPufXd/uvdvZm760M0no1FZcnrzUdjw7au3vu/BVgAFLXeuTxhTXVAAAAAElFTkSuQmCC ") left top no-repeat;
        
}

.nowrap {
  white-space: nowrap ;
}

div.fileList {
        padding: 20px;
}

html, body {
    width: 100%;
    height: 100%;    
    margin: 0;
    padding: 0;
}

table.FileList {
    border-collapse: collapse;
    margin: 20px;
  }

  table.FileList th {
    text-align: left;
    font-weight: bold;
  }
  
  table.FileList td {
    border: 0px solid #000;
  }
  
table.FileList tr.heading{
    border-bottom: 1px solid black;
}
<table class="FileList">
        <tr class="heading"><th>Archive</th></tr>
            <tr><td>&nbsp;</td></tr>
            <tr><td><span class="icon icon_dir nowrap">&nbsp;</span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2018">2018</a></span></td></tr>
            <tr><td><span class="icon icon_dir nowrap">&nbsp;</span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2017">2017</a></span></td></tr>
            <tr><td><span class="icon icon_dir nowrap">&nbsp;</span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2016">2016</a></span></td></tr>
            <tr><td><span class="icon icon_dir nowrap">&nbsp;</span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2015">2015</a></span></td></tr>
            <tr><td><span class="icon icon_dir nowrap">&nbsp;</span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2015">2014</a></span></td></tr>            
    </table>
6
RWC

IE条件付きコメントは使用できませんが、ハックを使用できます。 CSSハックのこのページ 説明IEあなたが使用できるハック（もっと）。

4
John Conde

IEスタイルシートのハッキング

.Class {
   color:  green;     /* standard */
   color:  green\9;   /* IE 8 and below */
   *color: green;     /* IE 7 and below */
   color:  green !ie; /* IE 7 and below */
   _color: green;     /* IE 6 */
}
1
pcunite

他のブラウザの場合と同じように、スタイルシート内のすべてをスタイルするのがやりたいことです。通常のスタイルシートをページにインポートした後、通常の<!--[if IE]>条件ステートメントを使用してIE固有のスタイルシートをインポートします。

このメソッドに従うと、すべてのブラウザーのスタイルがインポートされ、IE固有のスタイルを使用して、互換性のないスタイル、正しくレンダリングされないスタイル、またはIEで使用するために調整する必要があるスタイルがオーバーライドされます。

0
Zachary Kniebel