iframe右侧裁剪失效：CSS right:-80px属性未完全生效

你的问题出在iframe的width设置和定位属性冲突，导致right: -80px的偏移没有让内容超出父容器的右侧范围，自然不会被overflow:hidden裁剪。

问题根源 #

父容器宽度是600px，你给iframe设置了width:620px，同时又设置了left:-25px和right:-80px。当绝对定位元素同时指定left、right和固定width时，浏览器会优先使用固定宽度，忽略right的约束。此时iframe的实际右端位置是：父容器左侧位置 -25px + 620px = 595px，比父容器的右侧（600px）还少5px，根本没有超出父容器，所以右侧不会被裁剪。

修复方案 #

去掉iframe的固定width，让left和right属性自动拉伸iframe的宽度，这样iframe的宽度会是父容器宽度 + 25px + 80px = 705px，右侧超出的80px就会被父容器隐藏。同时可以把scrolling="yes"改成scrolling="no"，避免iframe自身的滚动条干扰裁剪效果。

修改后的代码：

<html lang="en">
<body>

<style>
 #div-id{
    border   : 2px solid blue;
    width    : 600px;
    height   : 800px;
    position : relative;
    overflow : hidden;
}
 #iframe-id{
    position : absolute;
    top      : -160px;
    right    : -80px;
    left     : -25px;
    /* 移除固定width，让left/right控制宽度 */
    height   : 450vh;
    /* 关闭iframe自身滚动条，避免干扰 */
    overflow : hidden;
}
</style>
<div id="div-id">
 <iframe title="example" src="https://example.org" id="iframe-id" scrolling="no"></iframe>
</div>

</body>
</html>

补充说明 #

如果需要保留iframe的滚动功能，可以保留scrolling="yes"，但要确保嵌入的页面内容宽度足够大，这样超出父容器右侧的部分才会被裁剪。另外，部分浏览器对iframe的跨域内容有安全限制，但你的测试用example.org是可以正常显示的，所以这个问题不存在。

内容的提问来源于stack exchange，提问作者Displayname