css Iframe内容导致iframe跳转到parent内部

qni6mghb 于 2024-01-09 发布在其他

关注(0)|答案(2)|浏览(117)

bounty将在10小时后过期。回答此问题可获得+50声望奖励。realPro希望引起更多关注此问题。

这一定是有史以来最疯狂的html bug！iframe内容怎么可能影响父对象的布局。请注意，padding-top: 60px;应该保留，以及width/height 170%;和bascally，其余代码应该保持原样。
这种跳跃没有理由发生。
同样，transform: scale(0.6) translate(-33.5%, -33.5%);是这段代码的关键部分，必须保留。

<html><head><style>body, html { margin: 0; padding: 0; }
            ._inner_frame_ {
                margin: 0;
                width: 170%;
                height: 170%;
                transform: scale(0.6) translate(-33.5%, -33.5%);
                padding: 0;
                overflow:hidden;
                left:0; 
                position:absolute;
                background-color:red;
           
            }
            
            ._outer_
            {
    background-color:blue;
     width: 800px;
     height: 650px;
     overflow: hidden;
     position: absolute;
     top: 90px;
     left:90px;
     margin: 0;
     padding: 0;
     padding-top: 60px;
                 
            }
    
    </style>

    </head><body>
    
    <div class="_outer_">
    <iframe tabindex="-1" role="presentation" src="https://www.labuttiga.it/en" sandbox="allow-scripts allow-same-origin" referrerpolicy="origin" scrolling="no" class="_inner_frame_"></iframe>
    </div>
    </body></html>

字符串

css

来源：https://stackoverflow.com/questions/77729859/iframe-content-causes-the-iframe-to-jump-inside-parent

2条答案

按热度按时间

2guxujil1#

我猜这个问题与浏览器处理iframe的缩放和定位的方式有关。当你使用transform: scale(0.6) translate(-33.5%, -33.5%);时，它会对iframe应用一个转换，这可能会以一种意想不到的方式影响定位。
请使用此解决方案并让我知道状态。

body,
html {
  margin: 0;
  padding: 0;
}

._inner_frame_ {
  margin: 0;
  width: 1200px;
  height: 975px;
  overflow: hidden;
  position: absolute;
  background-color: red;
  top: -60px;
  left: -60px;
}

._outer_ {
  background-color: blue;
  width: 800px;
  height: 650px;
  overflow: hidden;
  position: absolute;
  top: 90px;
  left: 90px;
  margin: 0;
  padding: 0;
  padding-top: 60px;
}

个字符
根据需要调整值以满足布局要求。

赞(0）回复(0）举报 2024-01-09

kkbh8khc2#

web视图完全按照您的指示响应。iframe的高度长度偏高，超出了父容器。将iframe高度降低到160%或165%。希望这对您有帮助！

赞(0）回复(0）举报 2024-01-09