尊重嵌入内容(iframe、对象、嵌入)宽度属性的 CSS 宽度值

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 像素宽，但它是 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/它将允许您使用许多 javascript 库之一在 IE6-8 中使用 :not()。

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

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

仅当 iframe 位于您知道需要的 div 中时，才将 iframe 宽度声明为 100%。然后删除 .width-auto .embed-container iframe { width: auto; 完全。