首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

父框仅在IE中不包装

是指在IE浏览器中,父级元素(框)不会自动包装其子级元素。这是由于IE浏览器在解析HTML和CSS时存在一些特殊的行为。

在其他现代浏览器中,父级元素会自动包装其子级元素,以便正确显示和布局页面内容。但在IE浏览器中,如果父级元素没有明确设置宽度或高度,它将不会包装其子级元素,导致布局出现问题。

这种行为可能会导致页面在不同浏览器中显示不一致,特别是在处理响应式布局和自适应设计时。为了解决这个问题,开发人员可以采取以下措施:

  1. 明确设置父级元素的宽度或高度:通过设置父级元素的宽度或高度,可以确保其包装子级元素并正确布局。
  2. 使用CSS hack:可以使用一些特定的CSS hack来针对IE浏览器进行样式修复。例如,可以使用条件注释或IE特定的CSS选择器来为IE浏览器提供特定的样式。
  3. 使用CSS框架或库:使用一些流行的CSS框架或库,如Bootstrap或Foundation,它们已经考虑了跨浏览器兼容性,并提供了解决此类问题的解决方案。

总结起来,父框仅在IE中不包装是指在IE浏览器中,父级元素不会自动包装其子级元素的特殊行为。开发人员可以通过明确设置父级元素的宽度或高度,使用CSS hack或使用CSS框架来解决这个问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

java面对对象(.2)(多态性,终极类,instanceof,包装类等)

若编译时类型和运行时类型不一致,就出现了对象的多态性(Polymorphism) 多态情况下, “看左边”:看的是类的引用(不具备子类特有的方法) “看右边”:看的是子类的对象(...,所以类类型的引用可以指向子类的对象:向 上转型 (upcasting) 一个引用类型变量如果声明为类的类型,但实际引用的是子类 对象,那么该变量就不能再访问子类添加的属性和方法...} } 子类继承类 若子类重写了类方法,就意味着子类里定义的方法彻底覆盖了类里的 同名方法,系统将不可能把类里的方法转移到子类。...对于实例变量则不存在这样的现象,即使子类里定义了与类完全相同的 实例变量,这个实例变量依然不可能覆盖定义的实例变量  接下来我们说下,目前学习我听过最中二的名字终极类(Objext)...趁热打铁我们下面来了解下包装类 我们都知道java有基本数据类型和引用数据类型,而它的口号又是“万事万物皆对象”,所以针对基本数据类型,他提出了包装类的概念,实现从基本数据类型到类的转化!!

42230
  • 关于拖拽功能在IE11 、Firefox和Safari兼容的问题

    拖拽功能不兼容主要有4大主要原因: 1是event的path属性引起的bug(ie,firebox,safari) 2是event的dataTransfer.setData属性(ie,firebox...) 3是firefox在拖动的时候会打开一个新窗口 (firbox) 4是ie11不支持onclick属性方法 ; ie11 里元素对象的attributes的排序和其他浏览器不同, ie11 ...remove()方法work (ie) 对于原因1的解决方案 其中IE11 压根就不支持path属性,firefox和Safari还勉强通过hack的方式获取到path,获取方式如下: const...attributes的属性排序和其他浏览器不同,会引起bug。...解决这个问题 ,我是通过遍历attributes 找到符合我要的代替之前的写死的attributes顺序 针对ie11 remove()work的情况,可以用代码 parent.removeChild

    3.3K30

    BuildAdmin12:vue3子组件调用组件方法,实现弹出

    弹出框定义点击事件 在弹出,定义了click事件,绑定了onContextmenuItem方法。...* 在vue,defineProps是子组件接收组件传递的值,defineEmits则子组件调用组件事件,同时还可以传递参数,总的来说都是父子组件通信的。...menu) return是对禁用的标签不作处理,因为在上图onContextmenuItem方法的第81行,如果标签禁用,则menu赋值。...思考 为什么非要在tabs实现实现这些功能,还要父子组件各种值和方法传递,直接在弹出组件实现不好吗?...灵活性:如果有多个组件使用弹出组件,组件通过传递不同的item,就能定制每个组件的弹出标签列表。 tabs已经拿到了一些变量,例如所有的tab(tabsViews),激活的tab等。

    40800

    CSS清除浮动

    什么是浮动 浮动的可以向左或向右移动,直到它的外边缘碰到包含或另一个浮动的边框为止。 由于浮动不在文档的普通流,所以文档的普通流的块表现得就像浮动不存在一样。...因为它不再处于文档流,所以它不占据空间,实际上覆盖住了 2,使 2 从视图中消失。 如果把所有三个都向左移动,那么 1 向左浮动直到碰到包含,另外两个向左浮动直到碰到前一个浮动。...如果我们清除了浮动,元素自动检测子盒子最高的高度,然后与其同高。 优点:通俗易懂,方便 缺点:添加无意义标签,语义化差 建议使用。...2.级添加overflow属性(元素添加overflow:hidden)(推荐) 通过触发BFC方式,实现清除浮动 .fahter{ width: 400px; border: 1px solid...清除浮动的方式 *号只有IE6-IE7执行,其他浏览器执行*/ } <div class=

    2.3K20

    制作H5响应式页面注意事项、微信二次分享

    =edge,chrome=1" /> <meta name="description...只对行内元素有效,注意不是对文字进行设置,而是对占空间的图片等进行设置,text-top、text-bottom           1.4.5     input type="tel"     app开发时,输入会第一时间弹出数字输入...2、关于微信二次分享 http://www.cnblogs.com/joshua317/p/4761948.html      2.1     页面引入js文件 <script type="text...({ // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,<em>仅在</em>...: wurl, // 分享链接 imgUrl: wimg, // 分享图标 // type: '', // 分享类型,music、video或link,<em>不</em>填默认为

    1.3K90

    制作H5响应式页面注意事项、微信二次分享

    =edge,chrome=1" /> <meta name="description...只对行内元素有效,注意不是对文字进行设置,而是对占空间的图片等进行设置,text-top、text-bottom           1.4.5     input type="tel"     app开发时,输入会第一时间弹出数字输入...2、关于微信二次分享 http://www.cnblogs.com/joshua317/p/4761948.html      2.1     页面引入js文件 <script type="text...({ // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,<em>仅在</em>...: wurl, // 分享链接 imgUrl: wimg, // 分享图标 // type: '', // 分享类型,music、video或link,<em>不</em>填默认为

    1.4K00

    scrollWidth,clientWidth,offsetWidth的区别

    ,会随对象内容的多少改变(内容多了可能会改变对象的实际宽度) clientWidth 是对象可见的宽度,包滚动条等边线,会随窗口的显示大小改变。...当一行内容超出文本的宽度,就有横向滚动条出来了,scrollWidth的值就变了。 scrollWidth是对象实际内容的宽度。...不含边线) offsetWidth是对象看到的宽度(含边线,如滚动条的占用的宽) top、postop、scrolltop、scrollHeight、offsetHeight 1. top 此属性仅仅在对象的定位...offsetParent 属性指定的坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop...clientWidth:是对象可见的宽度,包滚动条等边线,会随窗口的显示大小改变。

    2.2K20

    css面试点三:清除浮动的九方法-高度塌陷理解-伪元素使用

    浮动的定义 使元素脱离文档流,按照指定方向发生移动,遇到级边界或者相邻的浮动元素停了下来。 浮动的可以左右移动,直到遇到另一个浮动或者遇到它外边缘的包含。...浮动不属于文档流的普通流,当元素浮动之后,不会影响块级元素的布局,只会影响内联元素布局 当包含的高度小于浮动的时候,此时就会出现“高度塌陷”。 为什么要清除浮动?...那么它的高度就会塌缩为零 解决方法: 1.级div定义伪类:after和zoom 原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题...div定义height 原理:级div手动定义height,就解决了级div无法自动获取到高度的问题 缺点:只适合高度固定的布局,要给出精确的高度,如果高度和级div不一样时,会产生问题 建议:推荐使用...建议:推荐使用,只作了解。

    95920

    FLOAT坍塌原理及解决方案

    定位方案的三种流 普通流:包括对块级的块格式,对行级的行格式,对块级和行级的相对定位; 浮动:在浮动模型,一个先按照正常排版来摆放,再将它从排版流取出并尽可能地向左或向右偏移,其它内容可以排在一个浮动的周围...; 绝对定位:在绝对定位模型,一个会从排版流完全脱离出来(它对后续的兄弟没有影响),并相对其包含块来指定其位置(包括 absolute, fixed )。...: 400px; border: 5px solid #FF6B5B; float: left; //使元素拥有创建BFC的条件,但是要注意此时在parent-container所在的文档流...添加空元素来清除浮动 //增加了无意义的元素,推荐 ...line-height: 0; //for IE font-size: 0; //for IE } 7).

    43220

    一文玩转jQuery+Ajax

    而通过jQuery获取的对象是jQuery包装集对象,简称jQuery对象,只有jQuery对象才能使用jQuery提供的方法。...// DOM对象转Jquery对象 var divDomToJquery = $(divDom) console.log(divDomToJquery); jQuery对象转DOM对象 获取包装集对象中指定下标的元素...指定元素") 选择元素的所有指定元素(包含第一代、第二代等) 子代选择器 $("元素 > 指定元素") 选择元素的所有第一代指定元素 相邻选择器 $("元素 + 指定元素") 选择元素的下一个指定元素...-- 第二个大DIV包含一个div --> 选择器2 选择器2的div <!...内容") 设置元素的文本内容,包含html标签 val() 获取元素的value值(表单元素) val("值") 设定元素的value值(表单元素) 表单元素:文本text、密码password

    4K21

    CSS布局解决方案(上)

    (2)代码实例 (3)优缺点 缺点:低版本浏览器(ie6 ie7 ie8)不支持 5)使用flex+justify-content (1)原理、用法 原理:通过CSS3的布局利器flex的justify-content...(2)代码实例 (3)优缺点 优点:简单 缺点:ie6下兼容性存在一定问题 2)使用table (1)原理、用法 原理:通过将改变为表格,将左右转换为类似于同一行的td以达到多列布局,设置宽度...用法:先将设置为display: table、width: 100%,再设置左、右display: table-cell,最后设置左width: 0.1%、padding-right以及左的内容...(2)代码实例 (3)优缺点 缺点:ie6 ie7不支持 3)使用flex (1)原理、用法 原理:通过设置CSS3布局利器flex的flex属性以达到多列布局,加上给左的内容定宽、给右设置flex...用法:先将设置为display:flex,再设置右flex:1,最后设置左margin-right:20px、左的内容width。

    1.2K40

    清除过的浮动

    浮动不属于文档的普通流,当一个元素浮动之后,不会影响到块级的布局而只会影响内联(通常是文本)的排列,文档的普通流就会表现得和浮动不存在一样,当浮动高度超出包含的时候,也就会出现包含不会自动伸高来闭合浮动元素... 3)元素设置 overflow:hidden 通过设置元素overflow值设置为hidden;在IE6还需要触发 hasLayout ,例如 zoom:1; <div class="wrap...某些情况会造成内容全选;<em>IE</em><em>中</em> mouseover 造成宽度改变时会出现最外层模块有滚动条等,firefox早期版本会无故产生focus等, 请看 嗷嗷的 Demo ,不要使用 5)<em>父</em>元素也设置浮动...优点:不存在结构和语义化问题,代码量极少 缺点:使得与<em>父</em>元素相邻的元素的布局会受到影响,不可能一直浮动到body,<em>不</em>推荐使用 6)<em>父</em>元素设置display:table 优雅的 Demo  优点...anonymous boxes),而匿名<em>框</em><em>中</em>的display:table-cell可以创建新的BFC,换句话说,触发块级格式化上下文的是匿名<em>框</em>,而不是display:table。

    86120

    Vue 自定义指令

    举个聚焦输入的例子,如下: // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 指令的定义;当被绑定的元素插入到 DOM 时…… inserted...在这里可以进行一次性的初始化设置 inserted:被绑定元素插入节点时调用 (仅保证节点存在,但不一定已被插入文档) update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode...DOM ==binding==:一个对象,包含以下几个 property,就不展开说了,官方文档描述的也详细 ==vnode==:Vue 编译生成的虚拟节点 ==oldVnode==:上一个虚拟节点,仅在...: { imgLazy } } 然后就可以愉快地使用 v-imgLazy 玩耍啦(v-imgLazy="imgSrc")绑定的值是图片地址 注意 IntersectionObserver 兼容...IE,万恶的 IE 啊 如果想要兼容,只能通过计算的方式来判断是否进入可视区域了 博客地址:https://ainyi.com/94

    75020

    CSS3之position:sticky使用

    一、简介css3position有个属性值sticky,即粘型定位,初级面试中会经常问到,大多数面试者往往会忽略这个属性值,其可以理解为相对定位(relative)和固定定位(fixed)的结合。...三、注意事项元素高度必须大于sticky元素的高度设置元素高度的时候,元素不能使用除了overflow的visiable属性,比如auto、scroll设置元素高度,子元素高度超过元素高度,...元素使用auto、scroll等属性,此时且出现了滚动,sticky依然是有效设置元素高度,子元素高度没有超过元素高度,此时没有出现滚动,sticky仅在元素高度内有效sticky元素需要设置top...overflow: auto;background: #4CAF50;} */测试数据注意: IE.../Edge 15 及更早 IE 版本不支持 sticky 属性。

    45600

    HTML+CSS高级

    1.2     label                1.2.1     这是标签     //for 点击标签触发焦点在input...: top;           1.8     文字复制问题:两个浮动元素中间,有内联元素或者注释,并且和级元素宽度相差超过3px-->会出现小尾巴(文字自动被复制到内联元素) 解决办法1:两个浮动元素中间避免出现内联元素或注释...               解决办法1:子元素宽度超过级3px           1.9     级包不住relative的子级                解决办法:针对IE6、7给级加上...          1.2     label                1.2.1     这是标签     //for 点击标签触发焦点在input...: top;           1.8     文字复制问题:两个浮动元素中间,有内联元素或者注释,并且和级元素宽度相差超过3px-->会出现小尾巴(文字自动被复制到内联元素) 解决办法1:两个浮动元素中间避免出现内联元素或注释

    5.8K61

    CSS布局解决方案(居中布局)

    当然,在此之前,我们需要设置为相对定位,使成为子的相对。...ie7 ie8)不支持 5)使用flex+justify-content (1)原理、用法 原理:通过CSS3的布局利器flex的justify-content属性来达到水平居中。...ie7 ie8)不支持 垂直居中 1)使用table-cell+vertical-align (1)原理、用法 原理:通过将转化为一个表格单元格显示(类似 和 ),再通过设置属性...将子设置为绝对定位,移动子,使子框上边距离相对框上边边框的距离为相对高度的一半,再通过向上移动子的一半高度以达到垂直居中。当然,在此之前,我们需要设置为相对定位,使成为子的相对。...flex的属性align-times,使子垂直居中。

    1.6K20

    CSS-项目中遇到IE兼容问题,处理随笔

    : 在日常布局中一定少不了有隐藏的弹窗、下拉啥的,然后需要让他出来的时候他才出来。...同样,子元素也会用到一个必要的属性:z-index——用来设定在所有浮动元素的高低层级、以及比浮动的元素要高一点以达到遮挡的效果。 我按常理出牌设置css,但是ie按常理出牌啊!...这是我ff的正常效果 但到了ie中就成了这样: ? 浮动的白,被下边正常文档流的banner图给遮挡了! exceme me!! ?...元素竟然比子元素高了,尽管子元素的z-index远远超出元素 ? 于是,最终给z-index加了一个ie的特殊标志,只有ie才能解析的那种 ? 最终解决了问题: ?...ie元素加了*z-index的效果。 所以:总结就是:用了relative,一定后边跟一个*z-index:1;来处理兼容,基本算固定搭配了吧。

    2K70

    常用页面布局分享

    布局方式 Float flex position table block&Inline-block 兼容性 IE4 IE10 IE7 IE8 IE8 注意 清除浮动 设置自适应子容器与容器 嵌套使用,...浮动不属于文档的普通流,当一个元素浮动之后,不会影响到 块级的布局而只会影响内联(通常是文本)的排列,文档的普通流就会表现得和浮动不存在一样,当浮动高度超出包含的时候,会导致本属于普通流的元素浮动之后...在实际布局,往往这并不是我们所希望的,所以需要闭合浮动元素,使其包含表现出正常的高度。  使用浮动布局方式,一定要记得清楚浮动,不清楚浮动有可能导致元素重叠,或其他兼容问题。 ?...2.4)使其父元素也设置浮动        会导致与元素相邻的元素的布局会受到影响,不可能一直浮动到body,推荐使用 2.5)元素设置display:table         使用此方法元素会具有...7.样式的嵌套建议超过5层。尽量避免用+  >  # 此类的选择器,最好统一使用.class以防破坏样式的优先级。

    2.6K80
    领券