zoukankan      html  css  js  c++  java
  • 让IE6支持minwidth和maxwidth的方法(JS实现) + (CSS实现)

     一、CSS实现:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>让IE6支持min-width同时又支持max-width解决方法</title>
    <style type="text/css">
    
    /* 正常宽度 */
    img.p1 {} 
    
    
    /* 最大宽度200px; */
    img.p2 { 
        max-200px;
        _expression((document.documentElement.clientWidth||document.body.clientWidth) > 200? "200px": "auto" ); /* 写法一 */
        /* _expression(this.width > 200 ? "200" : true); */ /* 写法二 */
    } 
    
    
    /* 最小宽度500px; */
    img.p3 { 
        min-500px; 
        _expression((document.documentElement.clientWidth||document.body.clientWidth) > 500?"500px":"")
        /* _expression(this.width < 500 ? "500" : true);  */
    }
    
    
    /* 让IE6支持min-width同时又支持max-width解决方法  ===== 既有最大宽度,又有最小宽度 */
    img.p4 {max-620px;_expression(this.scrollWidth > 620 ? "620px" : (this.scrollWidth < 1? "1px" : "auto"));}
    
    /* 让所有浏览器包括IE6浏览器支持最大宽度又支持最小宽度 */
    img.p5 {max-620px;min-1px; _expression(this.scrollWidth > 620 ? "620px" : (this.scrollWidth < 1? "1px" : "auto"));}
    </style>
    </head>
    
    <body>
    
    
    
    <img src="http://img.cnbeta.com/newsimg/120719/1406440273678644.jpg" alt="" class="p1" >
    <img src="http://img.cnbeta.com/newsimg/120719/1406440273678644.jpg" alt="" class="p2">
    <img src="http://static.cnblogs.com/images/logo_small.gif" alt="" class="p3">
    
    
    
    </body>
    </html>

     二、JS实现:

    让IE6支持min-width和max-width的方法(JS实现)
    第一种:
    代码如下:minmax.js
    @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]--> 
  • 相关阅读:
    Max Sum Plus Plus HDU
    Monkey and Banana HDU
    Ignatius and the Princess IV HDU
    Extended Traffic LightOJ
    Tram POJ
    Common Subsequence HDU
    最大连续子序列 HDU
    Max Sum HDU
    畅通工程再续
    River Hopscotch POJ
  • 原文地址:https://www.cnblogs.com/huanlei/p/2558690.html
Copyright © 2011-2022 走看看