首页 - 文章 - Javascript - Javascript小技巧

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

作者: Andrew Clover     来源: doxdesk.com     时间: 2007-01-29 09:56:59
摘要: IE6 及其以下版本不支持 CSS 中的 min/max-width/height 属性相信很多人都不陌生，本文介绍了用 Javascript 修复这一问题的方法。
归类: Javascript, (X)HTML/CSS,

关键词: min, max, width, height, IE, CSS, Javascript,

IE6 及其以下版本不支持 CSS 中的 min/max-width/height 属性相信很多人都不陌生，本文介绍了用 Javascript 修复这一问题的方法。 


--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------


Javascript:
  1.  
  2. // 说明：让 IE6 及其以下版本支持 CSS 中 min/max-width/height 属性 
  3. // 整理：http://www.codebit.cn 
  4. // minmax.js: make IE5+/Win support CSS min/max-width/height 
  5. // version 1.0, 08-Aug-2003 
  6. // written by Andrew Clover <and@doxdesk.com>, use freely 
  7.  
  8. /*@cc_on 
  9. @if (@_win32 && @_jscript_version>4) 
  10.  
  11. var minmax_elements; 
  12.  
  13. minmax_props= new Array( 
  14.   new Array('min-width', 'minWidth'), 
  15.   new Array('max-width', 'maxWidth'), 
  16.   new Array('min-height','minHeight'), 
  17.   new Array('max-height','maxHeight') 
  18. ); 
  19.  
  20. // Binding. Called on all new elements. If <body>, initialise; check all 
  21. // elements for minmax properties 
  22.  
  23. function minmax_bind(el) { 
  24.   var i, em, ms; 
  25.   var st= el.style, cs= el.currentStyle; 
  26.  
  27.   if (minmax_elements==window.undefined) { 
  28.     // initialise when body element has turned up, but only on IE 
  29.     if (!document.body || !document.body.currentStyle) return; 
  30.     minmax_elements= new Array(); 
  31.     window.attachEvent('onresize', minmax_delayout); 
  32.     // make font size listener 
  33.     em= document.createElement('div'); 
  34.     em.setAttribute('id', 'minmax_em'); 
  35.     em.style.position= 'absolute'; em.style.visibility= 'hidden'; 
  36.     em.style.fontSize= 'xx-large'; em.style.height= '5em'; 
  37.     em.style.top='-5em'; em.style.left= '0'; 
  38.     if (em.style.setExpression) { 
  39.       em.style.setExpression('width', 'minmax_checkFont()'); 
  40.       document.body.insertBefore(em, document.body.firstChild); 
  41.     } 
  42.   } 
  43.  
  44.   // transform hyphenated properties the browser has not caught to camelCase 
  45.   for (i= minmax_props.length; i-->0;) 
  46.     if (cs[minmax_props[i][0]]) 
  47.       st[minmax_props[i][1]]= cs[minmax_props[i][0]]; 
  48.   // add element with properties to list, store optimal size values 
  49.   for (i= minmax_props.length; i-->0;) { 
  50.     ms= cs[minmax_props[i][1]]; 
  51.     if (ms && ms!='auto' && ms!='none' && ms!='0' && ms!='') { 
  52.       st.minmaxWidth= cs.width; st.minmaxHeight= cs.height; 
  53.       minmax_elements[minmax_elements.length]= el; 
  54.       // will need a layout later 
  55.       minmax_delayout(); 
  56.       break; 
  57.   } } 
  58. } 
  59.  
  60. // check for font size changes 
  61.  
  62. var minmax_fontsize= 0; 
  63. function minmax_checkFont() { 
  64.   var fs= document.getElementById('minmax_em').offsetHeight; 
  65.   if (minmax_fontsize!=fs && minmax_fontsize!=0) 
  66.     minmax_delayout(); 
  67.   minmax_fontsize= fs; 
  68.   return '5em'; 
  69. } 
  70.  
  71. // Layout. Called after window and font size-change. Go through elements we 
  72. // picked out earlier and set their size to the minimum, maximum and optimum, 
  73. // choosing whichever is appropriate 
  74.  
  75. // Request re-layout at next available moment 
  76. var minmax_delaying= false; 
  77. function minmax_delayout() { 
  78.   if (minmax_delaying) return; 
  79.   minmax_delaying= true; 
  80.   window.setTimeout(minmax_layout, 0); 
  81. } 
  82.  
  83. function minmax_stopdelaying() { 
  84.   minmax_delaying= false; 
  85. } 
  86.  
  87. function minmax_layout() { 
  88.   window.setTimeout(minmax_stopdelaying, 100); 
  89.   var i, el, st, cs, optimal, inrange; 
  90.   for (i= minmax_elements.length; i-->0;) { 
  91.     el= minmax_elements[i]; st= el.style; cs= el.currentStyle; 
  92.  
  93.     // horizontal size bounding 
  94.     st.width= st.minmaxWidth; optimal= el.offsetWidth; 
  95.     inrange= true; 
  96.     if (inrange && cs.minWidth && cs.minWidth!='0' && cs.minWidth!='auto' && cs.minWidth!='') { 
  97.       st.width= cs.minWidth; 
  98.       inrange= (el.offsetWidth<optimal); 
  99.     } 
  100.     if (inrange && cs.maxWidth && cs.maxWidth!='none' && cs.maxWidth!='auto' && cs.maxWidth!='') { 
  101.       st.width= cs.maxWidth; 
  102.       inrange= (el.offsetWidth>optimal); 
  103.     } 
  104.     if (inrange) st.width= st.minmaxWidth; 
  105.  
  106.     // vertical size bounding 
  107.     st.height= st.minmaxHeight; optimal= el.offsetHeight; 
  108.     inrange= true; 
  109.     if (inrange && cs.minHeight && cs.minHeight!='0' && cs.minHeight!='auto' && cs.minHeight!='') { 
  110.       st.height= cs.minHeight; 
  111.       inrange= (el.offsetHeight<optimal); 
  112.     } 
  113.     if (inrange && cs.maxHeight && cs.maxHeight!='none' && cs.maxHeight!='auto' && cs.maxHeight!='') { 
  114.       st.height= cs.maxHeight; 
  115.       inrange= (el.offsetHeight>optimal); 
  116.     } 
  117.     if (inrange) st.height= st.minmaxHeight; 
  118.   } 
  119. } 
  120.  
  121. // Scanning. Check document every so often until it has finished loading. Do 
  122. // nothing until <body> arrives, then call main init. Pass any new elements 
  123. // found on each scan to be bound    
  124.  
  125. var minmax_SCANDELAY= 500; 
  126.  
  127. function minmax_scan() { 
  128.   var el; 
  129.   for (var i= 0; i<document.all.length; i++) { 
  130.     el= document.all[i]; 
  131.     if (!el.minmax_bound) { 
  132.       el.minmax_bound= true; 
  133.       minmax_bind(el); 
  134.   } } 
  135. } 
  136.  
  137. var minmax_scanner; 
  138. function minmax_stop() { 
  139.   window.clearInterval(minmax_scanner); 
  140.   minmax_scan(); 
  141. } 
  142.  
  143. minmax_scan(); 
  144. minmax_scanner= window.setInterval(minmax_scan, minmax_SCANDELAY); 
  145. window.attachEvent('onload', minmax_stop); 
  146.  
  147. @end @*/ 
  148.  



由于只有 IE6 及其以下版本不支持min/max-width/height 属性，因此，我们可以用下面的调用方式：

Code:

<!--[if lt IE 7]>
<script type="text/javascript" src="minmax.js"></script>
<![endif]-->





相关文章
发表评论 有想法？点此发表评论？
推荐链接：(联系 QQ ：326801485)