HTML5网页设计

其他代码

Jquery模拟IE6的min-width属性

时间:2014-11-28 22:32来源:未知作者:点击:
IE6没有实现CSS的最小宽度(min-width)和最小高度(min-height)属性,然而,在很多情况下,这两个都是非常有用的属性。

IE6没有实现CSS的最小宽度(min-width)和最小高度(min-height)属性,然而,在很多情况下,这两个都是非常有用的属性。比如我们希望页面实际内容很短的时候,不要使原本应该在页面下方的工具条、版权信息贴到页面的上面去。不过这个问题大多数情况下可以用_height的hack在IE6下来当作height属性,前提是overflow属性不要设置为auto或者scroll什么的。

另外一个比较用得多的地方,特别是基于Web的应用系统或者论坛什么的,我们希望屏幕很大的时候,页面的宽度随着屏幕自适应,而屏幕很小的时候,我们又希望页面有一个最小宽度,一旦屏幕或者窗口宽度小于这个最小宽度,我们希望出现滚动条来保持页面的完整。但是IE6没有min-width。

以下是基于jQuery的使IE6具有最小宽度的JavaScript代码

<script type="text/javascript"> 
$(document).ready(function() { 
	if($.browser.msie && $.browser.version == 6.0) 
{ 
$(window).resize(function bodySize(){ 
	var bWidth = ($(window).width() <= 1000 ) ? 1000 : '100%'; 
	$('body').width(bWidth); 
}); 
bodySize(); 
} 
}); 
</script>  

另外还有一种方法是基于纯CSS的,但是需要为页面的下多加两个层。

所有的内容都需要写在<div class="body">中。

* html .ieminwidth {border-left:790px solid #fff; position:relative; float:left; z-index:1;} 
* html .body {margin-left:-790px; position:relative; float:left; z-index:5;}  

上一篇:上一篇:通过JS设置DIV高度 上一篇:下一篇:JS调用flash方法
阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐