CSS 宽度值尊重嵌入内容（iframe、对象、嵌入）宽度属性

发布于 2024-12-09 14:23:38 字数 1398 浏览 0 评论 0原文

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

<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>

With 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 像素宽！

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

注意这里的iframe代表的是任意嵌入内容，所以我不想在其上正则表达式附加样式属性，或以任何其他方式修改它。

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

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

原文

i'm using a grid based layout, which, in short, looks like this:

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

The appropriate CSS:

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

The problem starts when i want to introduce auto width:

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

With 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? */ 
}

What i expect is that iframe would go back to take its width from its own width attribute and be 400 pixels wide, but instead it is 300px wide!!!

Here it is live:
http://jsfiddle.net/ETUkD/2/

Note that what is represented by iframe here is any embedded content, so i don't want to regex additional style attribute on it, or modify it in any other way.

UPDATE: One solution is to use :not() selector, but that is not supported by internet explorer...

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你如我软肋 2024-12-16 14:23:39

解决方案1：
您可以考虑使用 Selectivzr。 http://selectivizr.com/ 它将允许您使用多种方法之一在 IE6-8 中使用 :not() JavaScript 库。

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

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

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

Solution 1:
You could consider using Selectivzr. http://selectivizr.com/ It will allow you to use :not() in IE6-8 using one of many javascript libraries.

Solution 2: Why not be more specific in your CSS like this? http://jsfiddle.net/pkY8K/

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

Declare the iframe width to be 100% only when it's in the div's you know need it. And then drop the .width-auto .embed-container iframe { width: auto; } entirely.

回复收藏 0 原文

~没有更多了~