title: IE10 not using correct priority for max-width and min-width
body: <p>I'm creating a responsive website and want images to take up at most 2/3 of their column, but not be smaller than 300px wide (or larger than the original image width).</p>
  
  <p>I'm using the following CSS:</p>
  
  <p><code>img {max-width:66%;min-width:300px;}</code></p>
  
  <p>In Chrome + Firefox, this works perfectly - starting from very wide, the image displays at its uploaded size; then when that is 2/3 of the column, it starts shrinking until it hits 300px, then doesn't shrink any further.</p>
  
  <p>In IE10, the image continues to shrink past 300px - it ignores 300px altogether.</p>
  
  <p>Is there any way IE10 can understand that min-width should take priority?</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/WHDsm/3/" rel="nofollow">http://jsfiddle.net/WHDsm/3/</a></p>
  
  <p>Note that using something like width:66% isn't an option, since then there is no way of saying 'don't display larger than uploaded'.</p>