发表新帖
发表新帖

Using IE conditional comments inside a stylesheet

后端 未结
关注
6 1658
深忆病人
深忆病人 2021-02-01 02:59

I know that you can use an IE conditional comment inside HTML:
相关标签:
6条回答
  • 忘掉有多难
    2021-02-01 03:09

    You can't use IE conditional comments but you can use hacks. This page of CSS hacks explains IE hacks you can use (and more).

    0 讨论(0)
  • 后悔当初
    2021-02-01 03:10

    What you want to do is style everything in your stylesheet as you normally would for any other browser. AFTER you import the normal stylesheet into your page you will then import an IE-specific stylesheet with the regular <!--[if IE]> conditional statement.

    Following this method imports the styles for all browsers and then uses your IE-specific styles to override those that are not compatible, don't render correctly, or need to be adjusted for use in IE.

    0 讨论(0)
  • 孤街浪徒
    2021-02-01 03:15

    It can be easier than what Derek Hunziker said:

    Simply include this code as it is:

    <!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>

    Then you can target it easily, for example if you want to target IE 8 and lower you write:

    .lt-ie9 body{css rule here;}

    and you are done!

    Cheers

    0 讨论(0)
  • 不要未来只要你来
    2021-02-01 03:17

    Conditional comments do not work within stylesheets. Instead, you can use conditional comments in your HTML to apply different CSS classes or IDs to elements that you can then target with CSS.

    For instance:

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

    Also, there are tools such as Modernizr that do feature detection in a very similar way (by adding classes to the <html> element). You can use it to progressively enhance your design/script for newer browsers while still supporting older browsers.

    0 讨论(0)
  • 离开以前
    2021-02-01 03:21

    Conditional comments work in Internet Explorer 9 and below, but are ignored by Internet Explorer 10 and up. You can use Internet Explorer specific CSS rules in your stylesheet. Hacks? Yeah, but not really dirty hacks imho.

    To target Internet Explorer 8, 9, 10 and 11, you can use:

    @media screen\0 {…}

    To target Internet Explorer 6 and 7, you can use:

    @media screen\9 {…}

    Source: https://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/media-tests/

    It worked for me. I have not had time to test it in different browsers. If you can confirm it works (or not), please add some comments (with the browser you tested it in.)

    Example:

    /* 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 ---

    A complete example:

    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>

    0 讨论(0)
  • 日久生厌
    2021-02-01 03:22

    IE stylesheet hacks

    .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 */
}
    0 讨论(0)
 看不清?
提交回复
热议问题