您现在的位置是:网站首页> 编程资料编程资料
css在firefox及IE6中最小高度如何设置
2021-09-07
833人已围观
简介 在网页布局中会遇到css在firefox及IE6中最小高度设置问题,本文将提供解决方法,需要了解的朋友可以参考下
在css中IE6并不支持min-height,所以需要对IE6进行单独设置,height在IE6中即使是超过固定的高度,IE6中也会自动撑开,此问题甚是疑惑
#main{
min-height:320px; //用于firefox
_height:320px; //用于IE6
}
当设置某一个区域的最小高度为某个值的时候,在Firefox、IE6以及IE7中的表现并不一样。如果只是设定了min-height值,那么在IE6中不能识别;但设定了height值,在 IE7和Firefox中,位置就会固定了。这是一个很大的问题。那么为了协调各个浏览器和各个版本,我们怎样做才能解决最小高度的问题呢?
我在网络上寻找了一些相关资料,有一种解决方法比较好:
.distance {
height:auto!important;
height:100px;
min-height:100px;
}
!import(优先)标签在IE6中并不认识,所以在IE6中上述代码会被理解成为:
height:100px;
min-height:100px;
而在IE7中则是:
height:auto;
min-height:100px;
在这里,我们所利用的特性是:
IE6不能识别 !important 标签;
IE6不能识别 min-height 标签;
IE6中的高度(height)标签的最终效果等同于IE7与Firefox浏览器中的最小高度(min-height)标签;
最终便可以解决上述问题。
另一
复制代码
代码如下:#main{
min-height:320px; //用于firefox
_height:320px; //用于IE6
}
当设置某一个区域的最小高度为某个值的时候,在Firefox、IE6以及IE7中的表现并不一样。如果只是设定了min-height值,那么在IE6中不能识别;但设定了height值,在 IE7和Firefox中,位置就会固定了。这是一个很大的问题。那么为了协调各个浏览器和各个版本,我们怎样做才能解决最小高度的问题呢?
我在网络上寻找了一些相关资料,有一种解决方法比较好:
复制代码
代码如下:.distance {
height:auto!important;
height:100px;
min-height:100px;
}
!import(优先)标签在IE6中并不认识,所以在IE6中上述代码会被理解成为:
复制代码
代码如下:height:100px;
min-height:100px;
而在IE7中则是:
复制代码
代码如下:height:auto;
min-height:100px;
在这里,我们所利用的特性是:
IE6不能识别 !important 标签;
IE6不能识别 min-height 标签;
IE6中的高度(height)标签的最终效果等同于IE7与Firefox浏览器中的最小高度(min-height)标签;
最终便可以解决上述问题。
另一
相关内容
- css选择器优先级深入理解CSS选择器种类、优先级与匹配原理详解CSS控制样式的三种方式(优先级对比验证)CSS优先级的相关知识详细介绍网页css优先级为您详细解读css样式优先级及层叠的顺序排序探讨CSS层叠样式表之CSS解析机制的优先级及样式覆盖问题探讨CSS优先级和!important与IE6的BUG讨论及解决方案IE6下CSS多类选择符优先级不起作用的bug分析及解决方法css样式的优先级究竟庞杂到什么程度同级情况下CSS的优先级探讨
- 多浏览器兼容flexbox容器的样式代码浅谈原生页面兼容IE9问题的解决方案新版chrome浏览器设置允许跨域的实现css hack之\9和\0就可能对hack IE11\IE9\IE8无效css区分ie8/ie9/ie10/ie11 chrome firefox的代码解决CSS浏览器兼容性问题的4种方案常见的浏览器兼容性问题(小结)border-radius IE8兼容处理的方法浅谈遇到的几个浏览器兼容性问题base64图片在各种浏览器的兼容性处理 对常见的css属性进行浏览器兼容性总结(推荐)
- 用CSS禁用输入法(CSS3 UI规范)实例解析css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- 多列等高的CSS实现代码css设置多列等高布局的方法示例前端应该掌握的CSS实现多列等高布局技巧利用CSS3的flexbox实现水平垂直居中与三列等高布局浅析CSS等高布局的6种方式用CSS实现三列DIV等高布局以传达更好的视觉效果CSS 三栏等高布局实现方法CSS实例:CSS实现的等高网页布局CSS实例:三列等高布局-CSS教程-网页制作-网页教学网css多种方式实现等高布局的示例代码
- css sprites技术 CSS Sprites图片切割术与图片优化深入理解css sprites把很多小图集成在一张图片上CSS Sprites 样式生成工具 3.0CSS Sprites简介以及优缺点使用CSS sprite 的好处和坏处分析什么是CSS Sprites(图片合并)技术 图文介绍CSS Sprites详解浅谈CSS Sprites切图技术CSS Sprite从大图中截取小图完整教程
- div footer标签css实现位于页面底部固定css实现背景渐变与底部固定的蓝天白云示例详解八种方法实现CSS页面底部固定
- html5 css3 动态气泡按钮实例演示纯CSS实现气泡对话框尖角处理方案CSS3制作气泡对话框的实例教程可自定义箭头样式的CSS3气泡提示框纯CSS实现聊天框小尖角、气泡效果纯CSS实现箭头、气泡让提示功能具有三角形图标css制作tips提示框,气泡框,制作三角形的实现
- IE矩阵Matrix滤镜旋转与缩放及如何结合transformcss3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- 不同CSS技术及其CSS性能之间的差异CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- CSS属性简写整理CSS属性简写和选择器的优先级问题 CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)