带有*的CSS3儿童组合器

Question

我正在尝试使用CSS3子组合器（>）将div的任何子项设置为max-width: 100%;。结合box-sizing:border-box;，我试图设置它，以便div的任何内容永远不会大于包含div。

* {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
}
div > * {
    max-width: 100%;
}

现在我在div中有一个图像：

<div style="width: 70%;">
    <img src="foo" width="750" height="200" />
</div>

如果750像素宽于div的70％宽度，则图像会突破div。如果我将CSS更改为：

div > img {
    max-width: 100%;
}

...然后图像缩小以适应div（这就是我想要的）。我在这里错过了什么？是否存在通配符*在这种情况下无效的已知问题？

Answer 1

子选择器支持（delete）的日期基于IE 7，通用选择器（>）也可以追溯到IE 7（除非您使用的是命名空间）

对于图像，您需要* height来防止它伸展。

auto

* {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
}
div > * {
    max-width: 100%;
    height: auto;
}