CSS：Width和Max-Width

Question

为什么：

width: 98%;
max-width: 1140px;

执行与

width: 1140px;
max-width: 98%;

第一个是有意义的，我说宽度是98%，但不要超过1140px宽。

然而，第二个会说页面是1140px宽，但然后会去和98%的页面一样大，对吧？所以例如超过1140px...但显然不是，因为它和第一个一样。

有人能解释为什么吗？

Answer 1

根据我对物业的了解：

if width > max-width use max-width
if max-width > width use width

因此，使用您的例子，这一定意味着1140px在您正在查看的屏幕分辨率下严格小于98%。

缩小你的浏览器屏幕，你会得到不同的结果。

这有点不相关，但我发现max-width（以及相应的属性max-height)在Internet Explorer中的图像存在问题，并发现这有助于引导它使用正确的值：

img {
    max-width: 150px;
    max-height: 120px;
    width: auto !important;
    height: auto !important;
}

如果没有最后两个属性，大多数符合标准的浏览器都会正确地维护纵横比，但Internet Explorer不会这样做，除非您这样做。

编辑：看起来我说的答案和其他人基本一样。