CSS：绝对位置不赞成右值和底值？

Question

我想对iframe进行绝对定位，并定义它的左、上、右、下偏移量：

#x {
    position: fixed;
    left: 10px;
    top: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    height: auto;
    border: 2px solid #aaa;
    z-index: 100002;
    background: #abc;
    display:none
}​

我发现左侧和顶部的值受到尊重，而右侧和底部的值被忽略。如果没有设置左值和上值，则会正确处理右值和下值。检查这个小提琴：http://jsfiddle.net/7fTEF/

知道吗？

注意我不想设置元素的宽度和高度，因为我希望它相对于视口，也不想将宽度和高度设置为百分比，我只想将边界偏移保持为固定值，在这里说"10px"。

Answer 1

不知道为什么，但是，经过一番讨论，IFrame似乎出于某种原因不喜欢这种风格的定位。

我可以做的一个解决方案是将其封装在div中，并将div设置为所需的大小/位置。

http://jsfiddle.net/7fTEF/1/

此外，尽管是500x500px，但主体背景颜色将继续填充页面中的所有空间，但div的大小仍然正确。（调整机身大小以检查…）

Answer 2

不能同时设置left和right或top和bottom属性 edit：事实证明，只要你的定位是绝对的，你就可以了，正如我刚刚从这篇文章中了解到的那样：http://www.alistapart.com/articles/conflictingabsolutepositions（感谢@thirdender的小费！）。Iframe的行为似乎有所不同。

你可以这样实现你想要的：http://jsfiddle.net/7fTEF/2/

请注意，不需要绝对定位。我还使用了css3属性框大小。您必须添加浏览器特定的前缀，如下所述http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

请注意，这个解决方案在旧浏览器中不起作用，您最终会看到滚动条。如果你想让它完全兼容浏览器，我想yoy必须使用一些js，但你会遇到残疾人的问题。你也可以尝试两者的组合。这一切都取决于你的受众以及你觉得它有多重要…

Answer 3

您可以通过javascript和设置iframe大小后找到容器大小。

Answer 4

我在这里找到了这个页面http://www.alistapart.com/articles/conflictingabsolutepositions/这解释了一些解决方案，这些解决方案也与只使用CSS的旧IE浏览器兼容。否则，可能需要进行一些JavaScript计算。