让IE6支持min-width和max-width的方法


Posted in Javascript onJune 25, 2010

说明:让 IE6 及其以下版本支持 CSS 中 min/max-width/height 属性

@if (@_win32 && @_jscript_version>4) 
var minmax_elements; 
minmax_props= new Array( 
new Array('min-width', 'minWidth'), 
new Array('max-width', 'maxWidth'), 
new Array('min-height','minHeight'), 
new Array('max-height','maxHeight') 
); 
// Binding. Called on all new elements. If <body>, initialise; check all 
// elements for minmax properties 
function minmax_bind(el) { 
var i, em, ms; 
var st= el.style, cs= el.currentStyle; 
if (minmax_elements==window.undefined) { 
// initialise when body element has turned up, but only on IE 
if (!document.body || !document.body.currentStyle) return; 
minmax_elements= new Array(); 
window.attachEvent('onresize', minmax_delayout); 
// make font size listener 
em= document.createElement('div'); 
em.setAttribute('id', 'minmax_em'); 
em.style.position= 'absolute'; em.style.visibility= 'hidden'; 
em.style.fontSize= 'xx-large'; em.style.height= '5em'; 
em.style.top='-5em'; em.style.left= '0'; 
if (em.style.setExpression) { 
em.style.setExpression('width', 'minmax_checkFont()'); 
document.body.insertBefore(em, document.body.firstChild); 
} 
} 
// transform hyphenated properties the browser has not caught to camelCase 
for (i= minmax_props.length; i-->0;) 
if (cs[minmax_props[i][0]]) 
st[minmax_props[i][1]]= cs[minmax_props[i][0]]; 
// add element with properties to list, store optimal size values 
for (i= minmax_props.length; i-->0;) { 
ms= cs[minmax_props[i][1]]; 
if (ms && ms!='auto' && ms!='none' && ms!='0' && ms!='') { 
st.minmaxWidth= cs.width; st.minmaxHeight= cs.height; 
minmax_elements[minmax_elements.length]= el; 
// will need a layout later 
minmax_delayout(); 
break; 
} } 
} 
// check for font size changes 
var minmax_fontsize= 0; 
function minmax_checkFont() { 
var fs= document.getElementById('minmax_em').offsetHeight; 
if (minmax_fontsize!=fs && minmax_fontsize!=0) 
minmax_delayout(); 
minmax_fontsize= fs; 
return '5em'; 
} 
// Layout. Called after window and font size-change. Go through elements we 
// picked out earlier and set their size to the minimum, maximum and optimum, 
// choosing whichever is appropriate 
// Request re-layout at next available moment 
var minmax_delaying= false; 
function minmax_delayout() { 
if (minmax_delaying) return; 
minmax_delaying= true; 
window.setTimeout(minmax_layout, 0); 
} 
function minmax_stopdelaying() { 
minmax_delaying= false; 
} 
function minmax_layout() { 
window.setTimeout(minmax_stopdelaying, 100); 
var i, el, st, cs, optimal, inrange; 
for (i= minmax_elements.length; i-->0;) { 
el= minmax_elements[i]; st= el.style; cs= el.currentStyle; 
// horizontal size bounding 
st.width= st.minmaxWidth; optimal= el.offsetWidth; 
inrange= true; 
if (inrange && cs.minWidth && cs.minWidth!='0' && cs.minWidth!='auto' && cs.minWidth!='') { 
st.width= cs.minWidth; 
inrange= (el.offsetWidth<optimal); 
} 
if (inrange && cs.maxWidth && cs.maxWidth!='none' && cs.maxWidth!='auto' && cs.maxWidth!='') { 
st.width= cs.maxWidth; 
inrange= (el.offsetWidth>optimal); 
} 
if (inrange) st.width= st.minmaxWidth; 
// vertical size bounding 
st.height= st.minmaxHeight; optimal= el.offsetHeight; 
inrange= true; 
if (inrange && cs.minHeight && cs.minHeight!='0' && cs.minHeight!='auto' && cs.minHeight!='') { 
st.height= cs.minHeight; 
inrange= (el.offsetHeight<optimal); 
} 
if (inrange && cs.maxHeight && cs.maxHeight!='none' && cs.maxHeight!='auto' && cs.maxHeight!='') { 
st.height= cs.maxHeight; 
inrange= (el.offsetHeight>optimal); 
} 
if (inrange) st.height= st.minmaxHeight; 
} 
} 
// Scanning. Check document every so often until it has finished loading. Do 
// nothing until <body> arrives, then call main init. Pass any new elements 
// found on each scan to be bound 
var minmax_SCANDELAY= 500; 
function minmax_scan() { 
var el; 
for (var i= 0; i<document.all.length; i++) { 
el= document.all[i]; 
if (!el.minmax_bound) { 
el.minmax_bound= true; 
minmax_bind(el); 
} } 
} 
var minmax_scanner; 
function minmax_stop() { 
window.clearInterval(minmax_scanner); 
minmax_scan(); 
} 
minmax_scan(); 
minmax_scanner= window.setInterval(minmax_scan, minmax_SCANDELAY); 
window.attachEvent('onload', minmax_stop); 
@end @*/

由于只有 IE6 及其以下版本不支持min/max-width/height 属性,因此,我们可以用下面的调用方式:
Code:
<!--[if lt IE 7]> 
<script type="text/javascript" src="minmax.js"></script> 
<![endif]-->
Javascript 相关文章推荐
JS 统计时间
Mar 09 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
jQuery与其它库冲突的解决方法
Jun 25 #Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 #Javascript
基于jquery的checkbox下拉框插件代码
Jun 25 #Javascript
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 #Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 #Javascript
javascript面向对象编程(一) 实例代码
Jun 25 #Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 #Javascript
You might like
PHP概述.
2006/10/09 PHP
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
PHP 表单提交给自己
2008/07/24 PHP
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
php中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
探索webpack模块及webpack3新特性
2017/09/18 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
python修改字典内key对应值的方法
2015/07/11 Python
Python中的集合类型知识讲解
2015/08/19 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
Python unittest模块用法实例分析
2018/05/25 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
在python shell中运行python文件的实现
2019/12/21 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
大学生志愿者感言
2014/01/15 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
求职信标题怎么写
2014/05/26 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
Python  lambda匿名函数和三元运算符
2022/04/19 Python