internet-explorer - IE10 没有为最大宽度和最小宽度使用正确的优先级

Question

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

我正在使用以下 CSS:

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

在 Chrome + Firefox 中，这非常有效 - 从非常宽的地方开始，图像以其上传的大小显示；然后当它达到列的 2/3 时，它开始缩小直到达到 300 像素，然后不再进一步缩小。

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

IE10 有什么办法可以理解 min-width 应该优先？

fiddle :http://jsfiddle.net/WHDsm/3/

请注意，使用 width:66% 之类的东西不是一个选项，因为那样就没有办法说“不要显示大于上传的”。

Answer 1

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

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

适用于 IE10:http://jsfiddle.net/WHDsm/9/

"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'."

这里也有一点逻辑问题。 max-width 和 min-width 通常意味着覆盖 width 在使用响应式布局以确保元素不超过的情况下或者在用户定义的固定维度之前。说一个元素永远不能超过某个百分比是错误的形式，因为该百分比与其父元素的比率是恒定的。它将始终是其父元素的 66%——除非您定义了 min/max。

设置宽度:66%；最大宽度:1000px； min-width 300px; 当父容器的 66% 介于 300px 和 1000px 之间时，会根据父容器提供一系列值。因此，如果您的用户不能上传大于 width: 1000px; 的图片，那么图片将永远不会扩展到超过 1000px，您将不会看到任何图片质量问题。