title: Strange behavior of min-width in IE8
body: <p>I have a simple requirement ;
  Apply desktop.css for larger screen sizes AND
  Apply iPad.css for somewhat smaller screen sizes </p>
  
  <p>Now I want to use CSS Media Queries for these.</p>
  
  <pre><code>&lt;link rel="stylesheet" media="only screen and (min-width: 768px)" href="css\desktop.css"&gt;
  &lt;link rel="stylesheet" media="only screen and (max-width: 768px)" href="css\ipad.css"&gt;
  </code></pre>
  
  <p>Now I have read that older IE does not have support for min-width. But there is a strange kind of support that I see in IE8
  i.e IE8 recognizes  min-width as a property, but not as a media query.</p>
  
  <p>So </p>
  
  <blockquote>
    <p><code>#example{*min-width:100px;}</code></p>
  </blockquote>
  
  <p>works fine in IE8</p>
  
  <p>But this does not</p>
  
  <pre><code>@media only screen and (min-width:100px) 
  </code></pre>
  
  <p>I have already tried the following for IE</p>
  
  <pre><code>&lt;!--[if IE ]&gt;&lt;link rel="stylesheet" media="screen" href="css\desktop.css"&gt;&lt;![endif]--&gt;
  </code></pre>
  
  <p>But I want to apply IE desktop css at a particular min-width only and NOT always..</p>
  
  <p>Is there a JS workaround for this like;</p>
  
  <pre><code>&lt;!--[if IE AND min-width:100px]&gt;&lt;link rel...
  </code></pre>
  
  <p>Please let me know how I can apply 2 set of CSS in IE.</p>