Edge不会在flexbox中拉伸iframe

作者：牛尾巴2010 | 2023-09-11 09:10

如何解决《Edge不会在flexbox中拉伸iframe》经验，为你挑选了1个好方法。

将iframe在下面的演示是柔性的项目:

* {
  margin: 0;
  border: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  display: flex;
}
iframe {
  background: olive;
  flex: 1;
}







但它不包括flex容器:

  

如果你iframe用a 替换div,它没有问题.  


这是为什么？
解决问题的正确方法是什么？

    
  




  
  
  

    

      

        Sampson..
         5
      
      
Microsoft Edge和Chrome/Firefox之间似乎存在互操作问题.在回答完这个问题后,我会立即对此提出错误,让团队进一步调查.

我立即建议是增加一个
绕</code>,弯曲<em>那个</em> <code><div></code>,然后设置<code>width</code>和<code>height</code>的<code><iframe></code>来<code>100%</code>.我打算这样做,当我发现Chrome似乎没有像Firefox和Microsoft Edge那样调整iframe的大小.</p>

<p>我确实通过以下方法找到了成功:</p>

<pre class="lang-html prettyprint-override"><code><body>
    <div>
        <iframe src="http://bing.com">
    

    
        Flex item number 2
    



html, body, div, iframe {
  border: 0; padding: 0; margin: 0;
}

html, body {
  height: 100%;
}

body {
  display: flex;
}

div {
  flex: 1;
  position: relative;
}

iframe {
  position: absolute;
  width: 100%; height: 100%;
}


结果:http://jsfiddle.net/jonathansampson/o7bvefy1/


1> Sampson..：
Microsoft Edge和Chrome/Firefox之间似乎存在互操作问题.在回答完这个问题后,我会立即对此提出错误,让团队进一步调查.

我立即建议是增加一个
绕</code>,弯曲<em>那个</em> <code><div></code>,然后设置<code>width</code>和<code>height</code>的<code><iframe></code>来<code>100%</code>.我打算这样做,当我发现Chrome似乎没有像Firefox和Microsoft Edge那样调整iframe的大小.</p>

<p>我确实通过以下方法找到了成功:</p>

<pre class="lang-html prettyprint-override"><code><body>
    <div>
        <iframe src="http://bing.com">
    

    
        Flex item number 2
    



html, body, div, iframe {
  border: 0; padding: 0; margin: 0;
}

html, body {
  height: 100%;
}

body {
  display: flex;
}

div {
  flex: 1;
  position: relative;
}

iframe {
  position: absolute;
  width: 100%; height: 100%;
}


结果:http://jsfiddle.net/jonathansampson/o7bvefy1/



    

    

    
        推荐阅读
        
            
                                
                    
                        程序员
                        区别:Intellij IDEA中的构建和制作
                    

                    
                                                
                        如何解决《区别:IntellijIDEA中的构建和制作》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何裁剪canvas.toDataURL
                    

                    
                                                
                            
                        
                                                
                        如何解决《如何裁剪canvas.toDataURL》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        什么是objc_sync_exit(个体经营)
                    

                    
                                                
                        如何解决《什么是objc_sync_exit(个体经营)》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Haskell:验证构造函数是否为Monad
                    

                    
                                                
                        如何解决《Haskell:验证构造函数是否为Monad》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        使用Laravel Elixir将Sass和普通CSS组合成一个文件
                    

                    
                                                
                        如何解决《使用LaravelElixir将Sass和普通CSS组合成一个文件》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        按下后退按钮后重新选择正确的NavigationView菜单项
                    

                    
                                                
                        如何解决《按下后退按钮后重新选择正确的NavigationView菜单项》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Django管理员在使用gunicorn Web服务器时缺少静态文件
                    

                    
                                                
                        如何解决《Django管理员在使用gunicornWeb服务器时缺少静态文件》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        在GitHub代码搜索中转义字符
                    

                    
                                                
                        如何解决《在GitHub代码搜索中转义字符》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        无法使用Python在PostgreSQL中获取最后一个插入的id
                    

                    
                                                
                        如何解决《无法使用Python在PostgreSQL中获取最后一个插入的id》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        返回与相同函数分离的第一个truthy值
                    

                    
                                                
                        如何解决《返回与相同函数分离的第一个truthy值》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        从html代码中过滤掉空的<span>标记
                    

                    
                                                
                        如何解决《从html代码中过滤掉空的<span>标记》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Scala中的线性化顺序
                    

                    
                                                
                            
                        
                                                
                        如何解决《Scala中的线性化顺序》经验，为你挑选了4个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        懒惰的符号绑定失败Ruby Racer
                    

                    
                                                
                        如何解决《懒惰的符号绑定失败RubyRacer》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        矢量化OR函数,用于计算FALSE | NA和NA | 假为假？
                    

                    
                                                
                        如何解决《矢量化OR函数,用于计算FALSE|NA和NA|假为假？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Windows UDP套接字:recvfrom()失败,错误10054
                    

                    
                                                
                        如何解决《WindowsUDP套接字:recvfrom()失败,错误10054》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        在docker中添加主机重定向
                    

                    
                                                
                        如何解决《在docker中添加主机重定向》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        是不是"同情"比Mathematica慢得多？
                    

                    
                                                
                        如何解决《是不是"同情"比Mathematica慢得多？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        使用LIKE或MATCH的SQL查询
                    

                    
                                                
                        如何解决《使用LIKE或MATCH的SQL查询》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何使用lambda将数组中的每个项目相乘？
                    

                    
                                                
                        如何解决《如何使用lambda将数组中的每个项目相乘？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Azure中的Wordpress托管,集成了媒体服务和上传器安全性
                    

                    
                                                
                        如何解决《Azure中的Wordpress托管,集成了媒体服务和上传器安全性》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                

            
        
    

    
        吐了个 "CAO" !
        
            
                吐个槽吧,看都看了
            
            
                
                                        会员登录 | 用户注册
























    

    
        
            
            
                
                    
                
            

            
                牛尾巴2010            

            
                这个屌丝很懒，什么也没留下！            
            
            

                                
                    
                    关注作者
                            

        
    


    
        Tags | 热门标签
        
            
                                
                    ajax
                
                                
                    bootstrap
                
                                
                    chart
                
                                
                    chrome
                
                                
                    css
                
                                
                    css3
                
                                
                    firebug
                
                                
                    firefox
                
                                
                    html
                
                                
                    html5
                
                                
                    javascript
                
                                
                    jquery
                
                                
                    json
                
                                
                    node.js
                
                                
                    npm
                
                                
                    postman
                
                                
                    vue.js
                
                                
                    webkit
                
                                
            
        
    


    
        RankList | 热门文章
        
            
                                
                    1react-router和cordova无法正常工作
                
                                
                    2Swift 2.1 [UInt8] --utf8-&gt;字符串？
                
                                
                    3将键值数据帧转换为列表
                
                                
                    4如何防止回调被送入javascript函数
                
                                
                    5在Bootstrap Date Range Picker中配置语言
                
                                
                    6保存对立即调用的函数的引用
                
                                
                    7既然Swift是开源的,我可以在不是Mac的计算机上编写和编译iOS应用程序吗？
                
                                
                    8将<Header>设置为Other Elements  -  CSS
                
                                
                    9通过API将Twilio语音响应设置为URL而不是TwiML App
                
                                
                    10张量流中具有未指定尺寸的张量
                
                                
                    11访问DbSet时的Effort(EF6)异常(字典中没有给定的密钥)
                
                                
                    12CakePHP:找不到FlashComponent
                
                                
                    13Cordova应用程序在Android上获得404所有XMLHttpRequests
                
                                
                    14SQL Server中的UNION如何将一行与另一行进行比较？
                
                                
                    15配置Nodejs中的最大旧空间大小
                
                                
                    16反向/ dev/null
                
                                
                    17安装Swift开源Xcode工具链时出错:您无法在此位置安装Swift开源Xcode工具链
                
                                
                    18jQuery  - 元素闪烁
                
                                
                    19跨程序集和命名空间的依赖注入
                
                                
                    20为什么局部变量是goroutine中匿名函数的不同参数