CSS宽度值以尊重嵌入内容的宽度属性(iframe、object、embedded )

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宽度时，问题就开始了：

<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像素宽，但它是300 it宽！

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

请注意，这里用iframe表示的是任何嵌入的内容，所以我不想在它上重新定义其他样式属性，也不想以任何其他方式修改它。

UPDATE：一种解决方案是使用: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%;   
}

声明iframe宽度为100%，只有当它在div的时候，你知道它需要它。然后完全放弃.width-auto .embed-container iframe { width: auto; }。