Question

我正在使用基于网格的布局，简而言之，它看起来像这样：

<div class="width-2">
    <h1>300px</h1>
    <div class="embed-container">
        <iframe width="400" height="400" ...></iframe>
    </div>
</div>

适当的CSS：

h1 { width: 300px; }
.width-2 { width: 600px; }
.embed-container > iframe { width: 100%; /* Must turn out to be 600px wide */ }

当我想引入auto width：

时，问题就出现了

<div class="width-auto">
    <h1>300px</h1>
    <div class="embed-container">
        <iframe width="400" height="400" ...></iframe>
    </div>
</div>

使用css：

h1 { width: 300px; }
.width-2 { width: 600px; }

.embed-container > iframe { 
    width: 100%; 
} 
.width-auto .embed-container > iframe { 
    width: auto; /* Must revert to 400px, but doesn't? */ 
}

我期望iframe会从自己的width属性中恢复宽度，宽度为400像素，而是宽度为300px！

这是现场直播： http://jsfiddle.net/ETUkD/2/

请注意，iframe在此处表示的是任何嵌入内容，因此我不想在其上使用regex其他样式属性，或以任何其他方式对其进行修改。

更新：一种解决方案是使用:not()选择器，但Internet Explorer不支持...

div:not(.width-auto) > .embed-container > iframe { 
    width: 100%; 
}

Answer 1

解决方案1： 您可以考虑使用Selectivzr。 http://selectivizr.com/它允许你在IE6-8中使用：not（），使用许多javascript库之一。

解决方案2：为什么不在这样的CSS中更具体？ http://jsfiddle.net/pkY8K/

.width-2 .embed-container iframe {
    width: 100%;   
}

只有在你知道需要它的div中时，才将iframe宽度声明为100％。然后完全删除.width-auto .embed-container iframe { width: auto; }。

CSS宽度值以尊重嵌入内容（iframe，object，embed）宽度属性

1 个答案: