DIV+CSS最小高度(兼容IE6\IE7\FF)(转载)

简介: 折腾了一上午,就是搞不定这个最小高度 min-height:的问题,因为min-height:只在IE7\FF中起作用。至于这个IE6死活就是不认。而我这个页面又必需得用这个最小高度来定。 页面是二栏的左右分,左栏算是导航菜单固定不变,长约1160PX,右边是产品的详细信息且是动态的,可长可短。

折腾了一上午,就是搞不定这个最小高度 min-height:的问题,因为min-height:只在IE7\FF中起作用。至于这个IE6死活就是不认。而我这个页面又必需得用这个最小高度来定。

页面是二栏的左右分,左栏算是导航菜单固定不变,长约1160PX,右边是产品的详细信息且是动态的,可长可短。

左右栏中间是一条1PX灰色的分隔线,就是这根分隔线倒底是定在左栏的右边框上,还是定在右栏的左边框上,问题有点头痛。因为左边定死1160PX,右边是自由伸展。如果定在左栏上,右栏动态内容长度大于1160时这根线是不会跟着做延伸的。那好,那就定在右栏上,但如果右栏的动态内容小于左栏1160时,这根线也是不会自动伸止1160处。麻烦了,真是左右为难。

现在只有最小高度可以解决这个问题了,把右栏定一个最小高度min-height:1160px;这样左右就一样了。即使右栏动态内容不能达到1160的长度,有了这个最小高度,右栏将始终都是以1160这个最小高度来显示,至于动态内容大于1160时,也是可以做自动延伸的。问题到了这一步,也能用这方法解决了。

 

但头痛的是IE6就是不认min-height:,这样定好后在IE7\FF里测试是没有任何问题的。但我们现在要解决IE6的。好在IE6与IE7不同,它可以将一个模块定死高度,当模板里内容大于这个高度时,是会自动撑开这个模块,IE7如果定死高度,内容大于高度时是会被遮住,就是不显示。

利用这一点。我们就可以在代码里设置了,具体如下:

.left{float:left;width:200px;}

 

.right{

float:right;

width:600px;

border-left:1px solid #ccc;

min-height:1116px;//IE7\FF

height:100%;//IE6\IE7\FF 这个很重要,IE6定死高度后,需要再加上这条,才能自动延伸。

_height:1116px;//IE6

}

 

就这样,问题都解决了。

}

相关文章
|
Web App开发 前端开发
CSS Hack是什么?ie6,7,8的hack分别是什么
CSS Hack是什么?ie6,7,8的hack分别是什么
4032 0
|
前端开发 JavaScript UED
css中什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
css中什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
117 0
|
Web App开发 前端开发
区分IE6,IE7,IE8,IE9,FireFox,Chrome浏览器的CSS hack
区分IE6,IE7,IE8,IE9,FireFox,Chrome浏览器的CSS hack
|
Web App开发 前端开发 JavaScript
CSS 奇思妙想 | 全兼容的毛玻璃效果
CSS 奇思妙想 | 全兼容的毛玻璃效果
723 0
CSS 奇思妙想 | 全兼容的毛玻璃效果
|
前端开发
CSS - 兼容
CSS - 兼容
111 0
|
Web App开发 移动开发 安全
汲取 IE6、IE8 消亡的经验,如何“杀死”IE11?
  我们大家熟悉的 IE 浏览器经过更新换代,目前已经更新到 IE11,而程序员多年唠叨的“IE 必须死”如今似乎要成为现实了。本文将回顾 IE6 和 IE8 消亡的历史,预测如何更好地“干掉” IE11。
248 0
|
前端开发 索引 容器
css兼容的问题 -持续更新
如果ie6设置span的display为 inline-block或者block  那么span的高度你会发现无法设置成20像素以下,以为ie6的盒模型 最小高度是20像素。如果想设置成更小,要用overflow=hidden ; 如果Ie6设置了float为left,有时你会发现容器的margin变成了原来的两倍(不尽然准是两倍),解决办法是增加 display=inline 属性。
770 0
|
Web App开发
IE6/IE7/IE8/IE9不支持exec的简写方式
IE6/IE7/IE8/IE9不支持exec的简写方式 如下 var ary = /h/('hello'); alert(ary); IE6/7/8/9中报错Venus'Blog Firefox/Safari/Chrome/Opera的最新版本均弹出了“h”   以上写法等价于 var ary = /h/.exec('hello'); 即 Firefox/Safari/Chrome/Opera浏览器中使用exec方法时可以去掉“exec”用 “正则直接量+()” 方式使用。
898 0
|
Web App开发 Windows
三张照片解决--win10系统的edge浏览器设置为浏览器IE8,IE7,IE9---完美解决 费元星
主要思想:         第二种方法:     参考文档: 1、可以在系统盘的C:\Program Files\Internet Explorer中找到iexplore.exe,然后将其发送到桌面快捷方式即     可,其就是ie浏览器。
1341 0
|
Web App开发 前端开发 JavaScript
css兼容
1.css中兼容ie相关语法      1.解决padding padding:10px;padding:9px\9; /* all ie */padding:8px\0; /* ie8-9 */*padding:5px; /* ie6-7 */+padding:7px; /* ie7 */_padding:6px; /* ie6 */   2.
1015 0

热门文章

最新文章