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

Internet explorer IE10未对最大宽度和最小宽度使用正确的优先级,internet-explorer,css,Internet Explorer,Css,我正在创建一个快速响应的网站,希望图像最多占据其列的2/3,但不能小于300px宽(或大于原始图像宽度) 我正在使用以下CSS: img{最大宽度:66%;最小宽度:300px;} 在Chrome+Firefox中,这一点非常有效——从非常宽的范围开始,图像以其上传大小显示;当这是柱的2/3时,它开始收缩,直到达到300px,然后不再收缩 在IE10中,图像继续缩小到300px以上——它完全忽略了300px IE10有没有办法理解最小宽度应该优先 小提琴: 请注意,使用宽度:66%之类的选项不是

我正在创建一个快速响应的网站,希望图像最多占据其列的2/3,但不能小于300px宽(或大于原始图像宽度)

我正在使用以下CSS:

img{最大宽度:66%;最小宽度:300px;}

在Chrome+Firefox中,这一点非常有效——从非常宽的范围开始,图像以其上传大小显示;当这是柱的2/3时,它开始收缩,直到达到300px,然后不再收缩

在IE10中,图像继续缩小到300px以上——它完全忽略了300px

IE10有没有办法理解最小宽度应该优先

小提琴:


请注意,使用宽度:66%之类的选项不是一个选项,因为这样就没有办法说“不要显示大于上载的大小”。

在这种情况下,您不需要设置
最大宽度
,只需设置
宽度

img {
    width: 66%; 
    min-width:300px;
}
IE10中的工作:

“请注意,从那时起,使用宽度:66%之类的东西就不是一个选项 没有办法说“不要显示大于上传的内容”

这里也有一点逻辑问题<代码>最大宽度和
最小宽度
通常表示为对
宽度
的覆盖,在使用响应式布局以确保元素不超过或位于用户定义的固定尺寸之前的情况下。说一个元素永远不能超过某个百分比是不好的,因为这个百分比与它的父元素的比率是恒定的。它将始终是其父元素的66%——除非定义了
min/max


设置<代码>宽度:66%;最大宽度:1000px;最小宽度300px66%介于300px和1000px之间时,code>根据父容器提供一个值范围。因此,如果您的用户无法上传大于
宽度:1000px的图像,则图像将永远不会扩展到1000px以上,并且您不会看到任何图像质量问题。

最大宽度作为百分比非常常见,事实上几乎总是与最大宽度100%一起使用。如我所说,将宽度设置为固定百分比真的毫无意义——这意味着用户完全无法控制图像显示的大小;您强制它们以完全相同的宽度显示,而标准是尽可能以上传的大小显示它们。根据官方的CSS规范,最小宽度应该优先于最大宽度,所以错误在IE10中。