苏州网站建设优化,关键词seo排名优化,网上购物网站建设规划,加盟培训网站建设今天在博客园看了冰极峰先生的《弹性流体布局》文章#xff0c;他具体的讲解了弹性布局是用到min-width这个属性,但这个属性在IE6下不受支持,因此加入了老外的一个JS脚本,这个脚本让IE6也能支持最小,最大宽度(高度)四个属性.弹性布局其实最难的还不是布局#xff0c;而是里面… 今天在博客园看了冰极峰先生的《弹性流体布局》文章他具体的讲解了弹性布局是用到min-width这个属性,但这个属性在IE6下不受支持,因此加入了老外的一个JS脚本,这个脚本让IE6也能支持最小,最大宽度(高度)四个属性.弹性布局其实最难的还不是布局而是里面的图片如何做到自适应也就是说让图片也变得弹性起来。这是这种布局时要最优先考虑的事情。页头图片就是一个弹性图片的典型应用你可以缩小一下窗口看看。 其中minmax.js的代码如下 // minmax.js: make IE5/Win support CSS min/max-width/height // version 1.0, 08-Aug-2003 // written by Andrew Clover anddoxdesk.com, use freely /*cc_on if (_win32 _jscript_version4) 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_elementswindow.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.offsetWidthoptimal); } if (inrange cs.maxWidth cs.maxWidth!none cs.maxWidth!auto cs.maxWidth!) { st.width cs.maxWidth; inrange (el.offsetWidthoptimal); } 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.offsetHeightoptimal); } if (inrange cs.maxHeight cs.maxHeight!none cs.maxHeight!auto cs.maxHeight!) { st.height cs.maxHeight; inrange (el.offsetHeightoptimal); } 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; idocument.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 */ 转载于:https://www.cnblogs.com/xj0112/archive/2009/05/10/1453749.html
