带有*的CSS3儿童组合器

时间:2017-09-27 19:36:03

标签: css css3

我正在尝试使用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(这就是我想要的)。我在这里错过了什么?是否存在通配符*在这种情况下无效的已知问题?

1 个答案:

答案 0 :(得分:0)

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

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

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