IE10未使用正确优先级的最大宽度和最小宽度

Question

我创建了一个响应式网站，并且希望图像占据最多2/3的列，但不小于300像素宽（或大于原始图像宽度）。

我用下面的CSS：

img {max-width:66%;min-width:300px;}

在Chrome浏览器火狐+，这完美的作品 - 从非常宽的开始时，图像显示在其上传的大小;那么当它是列的2/3时，它开始收缩直到它达到300px，然后不再收缩。

在IE10中，图像继续缩小超过300像素 - 它完全忽略了300像素。

有没有什么办法IE10可以理解最小宽度应该优先？

小提琴：http://jsfiddle.net/WHDsm/3/

注意，使用类似宽度：66％是不是一种选择，因为再没有说“不显示除上传大”的方式。

Answer 1

在这种情况下，您不需要设置max-width，只需要width。

img { 
    width: 66%; 
    min-width:300px; 
} 

作品在IE10：http://jsfiddle.net/WHDsm/9/

“需要注意的是使用类似宽度：66％是不是一种选择，从此 没有说“不显示大于方式上传”。”

这里还有一点逻辑问题。 max-width和min-width通常意味着在使用响应式布局确保元素不超出或超出用户定义的固定维度的情况下替代width。说一个元素永远不会超过一定比例是不好的形式，因为百分比与其父元素的比例是不变的。它始终是其父元素的66％ - 除非您定义了min/max。

当该父容器的66%在300px和1000px之间时，设置width: 66%; max-width: 1000px; min-width 300px;会为您提供基于父容器的一系列值。如果您的用户无法上传大于width: 1000px;的图片，那么图片将永远不会超过1000px，并且您不会看到任何图片质量问题。