解决高度塌陷问题-—高低版本浏览器兼容解决方案

最新推荐文章于 2022-08-11 05:20:52 发布
最新推荐文章于 2022-08-11 05:20:52 发布
阅读量246 收藏
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43263240/article/details/104413570
版权

我们写html结构是，当内容很少或者没有时，会有高度塌陷，这是需要设置一个最小高度。

方案一：

非IE6浏览器设置： min-height：像素px； （IE6不是识别此属性）
IE6浏览器设置： _height：像素px；（高级别浏览器不能识别此属性，注意有下划线）

方案二：css属性增加权重

{min-height:像素px;
height:auto!important;
height:像素px;}
非IE6浏览器只解析 min-height:像素px; height:auto!important;
IE6浏览器只解析 height:像素px;

以上两个方案
当不同浏览器就可以按照自身识别能力来翻译的height的内容

一直前行wei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css高度塌陷问题以及兼容IE6
wll_web的博客
03-14 191
css高度塌陷问题以及兼容IE6 首先我们要明白什么是高度塌陷：在父元素不设置高度的情况下，其高度是由子元素所撑开的，如果子元素脱离文档流，父元素就会出现高度塌陷的问题。 元素未脱离文档流的情况： <div class="box"> <div class="inner"></div> </div> <div class="wrap...
div设置了height，但浏览器显示没有高度
cc9200的博客
09-28 1622
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
浮动后缩放或调整浏览器大小导致塌陷 和 通过绝对定位来实现宽度高度自适应
qq_42339350的博客
02-19 856
1.浮动后缩放或调整浏览器大小导致塌陷 正常情况 缩放或调整了浏览器大小导致了塌陷 解决方法 父元素设置指定宽度(width或者min-width) 2.通过绝对定位来实现宽度高度自适应 问题 a，b 左浮动，c右浮动.怎么能让b在不同的缩放和浏览器大小下自动填满中间呢？ 解决方法 利用绝对定位 .left{ float: left; width: 300px; } .middle{ position: absolute; left: 300px;
html 高度塌陷,CSS之高度塌陷问题解决方案
weixin_39662432的博客
06-16 93
.box1{border: 10px red solid;/** 根据W3C的标准，在页面中都有一个隐含的属性叫Block Formatting Context* 简称 BFC，该属性可以设置打开或者关闭。默认是关闭的。* 当开启元素的BFC后，元素将会有一下特性：* 1、父元素的外边距不会和子元素重叠* 2、开启BFC的元素不会被浮动元素所覆盖* 3、父元素开启BFC可以包含浮动的子元素* 如何...
html塌陷问题和解决方案
wangtao的博客
11-24 1740
问题描述：如果父元素只包含了浮动元素 ，那么父元素在未设置高度的同时，则父元素高度塌缩为零; 解决方案：（使用clear属性） 1.创建一个用来清除浮动的css样式类（.clearfix） 2.针对包裹的全是浮动元素的父级容器使用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"...
css高度塌陷问题的解决方案
11-21
所以在开发中一定要避免出现高度塌陷的问题。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css">
Javascript解决常见浏览器兼容问题的12种方法
12-10
通过以上方法，可以有效地解决JavaScript和CSS在浏览器兼容性上的问题，确保你的Web应用在多种浏览器环境下都能正常运行并保持良好的用户体验。在实际开发中，结合使用这些技术与工具，可以显著提高网页的跨浏览器...
父级元素未设置高度和宽度时高度塌陷问题的解决方法
12-13
在网页布局设计中，一个常见的问题就是所谓的“高度塌陷”（Height Collapsing），这通常发生在父级元素没有设置高度和宽度，并且其内部包含了浮动元素（如`float:left`或`float:right`）的情况下。当子元素浮动后，...
浏览器兼容问题解决方案
09-09
以上就是一些常见的浏览器兼容性问题及其解决方案，这些技巧可以帮助开发者更好地处理不同浏览器下的样式差异，提高网站的兼容性和用户体验。在实际开发中，还需要结合具体的项目需求和最新的浏览器特性进行调整。
浅谈CSS 高度塌陷问题
09-22
选择合适的解决方案取决于项目的需求和浏览器兼容性考虑。在现代浏览器环境下，使用BFC（尤其是通过`overflow`属性）或单伪元素`after`方法通常是首选，因为它们既有效又具有良好的浏览器兼容性。在处理高度塌陷问题...
js获取浏览器和屏幕的各种宽度高度
10-20
本文主要介绍了js获取浏览器和屏幕的各种宽度高度的方法，具有很好的参考价值，下面跟着小编一起来看下吧
解决高度塌陷问题
dianmou7334的博客
11-17 112
所谓高度塌陷就是在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。 由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。 例如： <!DOCTYPE html> <html> ...
低版本浏览器背景自适应
weixin_43822182的博客
04-06 152
低版本浏览器背景自适应 静态结构 <div id="header"> <img src="demo.png" alt=""> </div> 样式 #header { position: fixed;width: 100%; height: 100%;left: 0;z-index: -1; _position: absolute; /*以下代...
【css】flex 布局
m0_59755550的博客
08-11 694
css+浮动+高度塌陷现象
清除浮动解决高度坍塌的5种方法 以及兼容IE
dccose的博客
10-04 702
清除浮动解决高度坍塌的5种方法 以及兼容IE 文章目录清除浮动解决高度坍塌的5种方法 以及兼容IE一、高度坍塌的形成原因以及代码和效果演示二、解决办法方法1:定义一个样式使用伪类元素选择器 ::after方法2:给父元素添加 属性：overflow:hidden方法3:添加空div方法4:父级随同子级一起浮动方法5:给父级设置固定高度 一、高度坍塌的形成原因以及代码和效果演示 在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。 但是当为子元素设置浮动以后，子元素会完全脱离文档流
ie下element部分表单元素高度异常的问题
chengzi_ct的博客
03-03 1467
vue2.x+element的pc端网页后台管理系统，上游系统是公司的OA，很多是ie用户，页面由OA的链接跳转过来，所以需要兼容ie。页面中有大量的表单，布局方式为一行两列，由于部分表单元素高度会多出来一点儿，会出现布局问题。
浏览器兼容性版本问题与解决方案
Wang_MengHan的博客
10-05 2990
添加链接描述 所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。 在学习浏览器兼容性之前，我想把前端开发人员划分为两类： 第一类： 是精确按照设计图开发的前端开发人员，可以说是精确到1px的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都死
用 js 实现 div高度与浏览器高度相同
W1948730080的博客
09-16 2131
一、读取浏览器高度        可以利用 window.innerHeight 获得当前浏览器的高度 var height = window.innerHeight;   二、获取 div 对象 var myDiv = document.getElementById("main"); # 没啥好说的   三、用 style 方法修改高度 myDiv.style.heigh...
JavaScript浏览器兼容性解决方案
"这篇文档是关于浏览器兼容性问题的总结，主要关注JavaScript在不同浏览器中的差异，包括HTML对象获取、const定义、事件坐标、location.href的处理以及frame操作的兼容性解决方案。" 在Web开发中，浏览器兼容性是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值