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/



    

    

    
        推荐阅读
        
            
                                
                    
                        程序员
                        为什么python十进制库不为某些输入返回指定数量的有效数字
                    

                    
                                                
                        如何解决《为什么python十进制库不为某些输入返回指定数量的有效数字》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        使用true/false值数组选择数组元素的最佳方法是什么？
                    

                    
                                                
                        如何解决《使用true/false值数组选择数组元素的最佳方法是什么？》经验，为你挑选了2个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        PHP SoapClient不处理WSDL中的abstract和substitutionGroup属性
                    

                    
                                                
                        如何解决《PHPSoapClient不处理WSDL中的abstract和substitutionGroup属性》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        glfwGetVideoMode(glfwGetPrimaryMonitor())无效
                    

                    
                                                
                        如何解决《glfwGetVideoMode(glfwGetPrimaryMonitor())无效》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        从另一个工作簿运行宏
                    

                    
                                                
                        如何解决《从另一个工作簿运行宏》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        所有加密使用的= =最后一个
                    

                    
                                                
                        如何解决《所有加密使用的==最后一个》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        无法卸载.NET 5 RC1
                    

                    
                                                
                        如何解决《无法卸载.NET5RC1》经验，为你挑选了2个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        iOS应用程序VIPER架构 - 有多少数据管理器？
                    

                    
                                                
                        如何解决《iOS应用程序VIPER架构-有多少数据管理器？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        据我所知,下面的函数不是constexpr,但是代码用clang和g ++编译.我错过了什么？
                    

                    
                                                
                        如何解决《据我所知,下面的函数不是constexpr,但是代码用clang和g++编译.我错过了什么？》经验，为你挑选了2个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        了解Android 6权限方法
                    

                    
                                                
                        如何解决《了解Android6权限方法》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        R  - 如何为复杂的ggplot图像分配屏幕空间
                    

                    
                                                
                            
                        
                                                
                        如何解决《R-如何为复杂的ggplot图像分配屏幕空间》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        你能给UIStackView边框吗？
                    

                    
                                                
                            
                        
                                                
                        如何解决《你能给UIStackView边框吗？》经验，为你挑选了3个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        保留由Pyinstaller创建的exe文件的错误消息
                    

                    
                                                
                        如何解决《保留由Pyinstaller创建的exe文件的错误消息》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        DbGeography替代C#POCO
                    

                    
                                                
                        如何解决《DbGeography替代C#POCO》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Android注册安全提供程序
                    

                    
                                                
                        如何解决《Android注册安全提供程序》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        有没有办法在React Native(Android)中添加视频元素？
                    

                    
                                                
                        如何解决《有没有办法在ReactNative(Android)中添加视频元素？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Maven插件别名如何映射
                    

                    
                                                
                        如何解决《Maven插件别名如何映射》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        D3:鼠标悬停时从序号轴获取最接近的值
                    

                    
                                                
                        如何解决《D3:鼠标悬停时从序号轴获取最接近的值》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        是否可以在没有VPC的情况下启动RDS实例？
                    

                    
                                                
                        如何解决《是否可以在没有VPC的情况下启动RDS实例？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        为什么onActivityResult总是返回0,即使按下确定按钮？
                    

                    
                                                
                        如何解决《为什么onActivityResult总是返回0,即使按下确定按钮？》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                

            
        
    

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
























    

    
        
            
            
                
                    
                
            

            
                牛尾巴2010            

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

                                
                    
                    关注作者
                            

        
    


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


    
        RankList | 热门文章
        
            
                                
                    1Hazelcast地图同步
                
                                
                    2Application.Restart如何在.NET中运行？
                
                                
                    3在app delegate之外注册远程通知
                
                                
                    4可以使用代码块作为C宏的参数吗？
                
                                
                    5保留QTextEdit中的光标位置
                
                                
                    6通过ruby OpenURI下载文件时间歇性EOFError
                
                                
                    7返回Mvc.JsonResult并设置Response.StatusCode
                
                                
                    8取消定义在定义值之前在Enum中定义int变量
                
                                
                    9Xcode自动完成以显示"包含"而非"开始时"的建议
                
                                
                    10RxJS教程不假设熟悉反应式编程概念或Rx .NET？
                
                                
                    11如何设置默认URL /路由？
                
                                
                    12删除Vertica数据库中的重复行
                
                                
                    13如何使用twilio从MS Access发送消息？
                
                                
                    14将CSS规则标记为不太重要？
                
                                
                    15C# -  Powershell AddPSSnapin导致错误
                
                                
                    16逻辑运算符&&和javascript中的两个字符串
                
                                
                    17jQuery:从下拉结果中删除ui-autocomplete样式
                
                                
                    18忽略Racket中的多个返回值
                
                                
                    19为什么要在静态锁定成员而不是类上进行同步？
                
                                
                    20如何获取指向std :: vector的最后插入元素的指针？