让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 相关文章推荐
你真的了解JavaScript吗?
Feb 24 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
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
德生PL550的电路分析
2021/03/02 无线电
PHP输出时间差函数代码
2013/01/28 PHP
php 魔术方法详解
2014/11/11 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
Python学习笔记(二)基础语法
2014/06/06 Python
Python中处理unchecked未捕获异常实例
2015/01/17 Python
python uuid模块使用实例
2015/04/08 Python
简单了解python代码优化小技巧
2019/07/08 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
你对IPv6了解程度
2016/02/09 面试题
社区文艺活动方案
2014/08/19 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
2016年会开场白台词
2015/06/01 职场文书
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android