关于IE7 IE8兼容HTML5和CSS3的一种解决方案 (转）

╰+哭是因爲堅強的太久メ 2021-12-22 09:15 196阅读 0赞

转载至:http://blog.csdn.net/ixr\_wang/article/details/7055227

1、添加到head里

2. 各个代码

excanvas.js

//Filament Group modification note:
    //This version of excanvas is modified to support lazy loading of this file. More info here: http://pipwerks.com/2009/03/12/lazy-loading-excanvasjs/
    
    // Copyright 2006 Google Inc.
    //
    // Licensed under the Apache License, Version 2.0 (the "License");
    // you may not use this file except in compliance with the License.
    // You may obtain a copy of the License at
    //
    //   http://www.apache.org/licenses/LICENSE-2.0
    //
    // Unless required by applicable law or agreed to in writing, software
    // distributed under the License is distributed on an "AS IS" BASIS,
    // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    // See the License for the specific language governing permissions and
    // limitations under the License.
    
    
    // Known Issues:
    //
    // * Patterns are not implemented.
    // * Radial gradient are not implemented. The VML version of these look very
    //   different from the canvas one.
    // * Clipping paths are not implemented.
    // * Coordsize. The width and height attribute have higher priority than the
    //   width and height style values which isn't correct.
    // * Painting mode isn't implemented.
    // * Canvas width/height should is using content-box by default. IE in
    //   Quirks mode will draw the canvas using border-box. Either change your
    //   doctype to HTML5
    //   (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
    //   or use Box Sizing Behavior from WebFX
    //   (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
    // * Non uniform scaling does not correctly scale strokes.
    // * Optimize. There is always room for speed improvements.
    
    // Only add this code if we do not already have a canvas implementation
    if (!document.createElement('canvas').getContext) {
    
    (function() {
    
      // alias some functions to make (compiled) code shorter
      var m = Math;
      var mr = m.round;
      var ms = m.sin;
      var mc = m.cos;
      var abs = m.abs;
      var sqrt = m.sqrt;
    
      // this is used for sub pixel precision
      var Z = 10;
      var Z2 = Z / 2;
    
      /**
       * This funtion is assigned to the <canvas> elements as element.getContext().
       * @this {HTMLElement}
       * @return {CanvasRenderingContext2D_}
       */
      function getContext() {
        return this.context_ ||
            (this.context_ = new CanvasRenderingContext2D_(this));
      }
    
      var slice = Array.prototype.slice;
    
      /**
       * Binds a function to an object. The returned function will always use the
       * passed in {@code obj} as {@code this}.
       *
       * Example:
       *
       *   g = bind(f, obj, a, b)
       *   g(c, d) // will do f.call(obj, a, b, c, d)
       *
       * @param {Function} f The function to bind the object to
       * @param {Object} obj The object that should act as this when the function
       *     is called
       * @param {*} var_args Rest arguments that will be used as the initial
       *     arguments when the function is called
       * @return {Function} A new function that has bound this
       */
      function bind(f, obj, var_args) {
        var a = slice.call(arguments, 2);
        return function() {
          return f.apply(obj, a.concat(slice.call(arguments)));
        };
      }
    
      var G_vmlCanvasManager_ = {
        init: function(opt_doc) {
        if (/MSIE/.test(navigator.userAgent) && !window.opera) {
            var doc = opt_doc || document;
            // Create a dummy element so that IE will allow canvas elements to be
            // recognized.
            doc.createElement('canvas');
     
            if(doc.readyState !== "complete"){
     
                doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
     
            } else {
     
               this.init_(doc);
     
            }
     
        }
    },
    
        init_: function(doc) {
          // create xmlns
          if (!doc.namespaces['g_vml_']) {
            doc.namespaces.add('g_vml_', 'urn:schemas-microsoft-com:vml',
                               '#default#VML');
    
          }
          if (!doc.namespaces['g_o_']) {
            doc.namespaces.add('g_o_', 'urn:schemas-microsoft-com:office:office',
                               '#default#VML');
          }
    
          // Setup default CSS.  Only add one style sheet per document
          if (!doc.styleSheets['ex_canvas_']) {
            var ss = doc.createStyleSheet();
            ss.owningElement.id = 'ex_canvas_';
            ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
                // default size is 300x150 in Gecko and Opera
                'text-align:left;width:300px;height:150px}' +
                'g_vml_\\:*{behavior:url(#default#VML)}' +
                'g_o_\\:*{behavior:url(#default#VML)}';
    
          }
    
          // find all canvas elements
          var els = doc.getElementsByTagName('canvas');
          for (var i = 0; i < els.length; i++) {
            this.initElement(els[i]);
          }
        },
    
        /**
         * Public initializes a canvas element so that it can be used as canvas
         * element from now on. This is called automatically before the page is
         * loaded but if you are creating elements using createElement you need to
         * make sure this is called on the element.
         * @param {HTMLElement} el The canvas element to initialize.
         * @return {HTMLElement} the element that was created.
         */
        initElement: function(el) {
          if (!el.getContext) {
    
            el.getContext = getContext;
    
            // Remove fallback content. There is no way to hide text nodes so we
            // just remove all childNodes. We could hide all elements and remove
            // text nodes but who really cares about the fallback content.
            el.innerHTML = '';
    
            // do not use inline function because that will leak memory
            el.attachEvent('onpropertychange', onPropertyChange);
            el.attachEvent('onresize', onResize);
    
            var attrs = el.attributes;
            if (attrs.width && attrs.width.specified) {
              // TODO: use runtimeStyle and coordsize
              // el.getContext().setWidth_(attrs.width.nodeValue);
              el.style.width = attrs.width.nodeValue + 'px';
            } else {
              el.width = el.clientWidth;
            }
            if (attrs.height && attrs.height.specified) {
              // TODO: use runtimeStyle and coordsize
              // el.getContext().setHeight_(attrs.height.nodeValue);
              el.style.height = attrs.height.nodeValue + 'px';
            } else {
              el.height = el.clientHeight;
            }
            //el.getContext().setCoordsize_()
          }
          return el;
        }
      };
    
      function onPropertyChange(e) {
        var el = e.srcElement;
    
        switch (e.propertyName) {
          case 'width':
            el.style.width = el.attributes.width.nodeValue + 'px';
            el.getContext().clearRect();
            break;
          case 'height':
            el.style.height = el.attributes.height.nodeValue + 'px';
            el.getContext().clearRect();
            break;
        }
      }
    
      function onResize(e) {
        var el = e.srcElement;
        if (el.firstChild) {
          el.firstChild.style.width =  el.clientWidth + 'px';
          el.firstChild.style.height = el.clientHeight + 'px';
        }
      }
    
      G_vmlCanvasManager_.init();
    
      // precompute "00" to "FF"
      var dec2hex = [];
      for (var i = 0; i < 16; i++) {
        for (var j = 0; j < 16; j++) {
          dec2hex[i * 16 + j] = i.toString(16) + j.toString(16);
        }
      }
    
      function createMatrixIdentity() {
        return [
          [1, 0, 0],
          [0, 1, 0],
          [0, 0, 1]
        ];
      }
    
      function matrixMultiply(m1, m2) {
        var result = createMatrixIdentity();
    
        for (var x = 0; x < 3; x++) {
          for (var y = 0; y < 3; y++) {
            var sum = 0;
    
            for (var z = 0; z < 3; z++) {
              sum += m1[x][z] * m2[z][y];
            }
    
            result[x][y] = sum;
          }
        }
        return result;
      }
    
      function copyState(o1, o2) {
        o2.fillStyle     = o1.fillStyle;
        o2.lineCap       = o1.lineCap;
        o2.lineJoin      = o1.lineJoin;
        o2.lineWidth     = o1.lineWidth;
        o2.miterLimit    = o1.miterLimit;
        o2.shadowBlur    = o1.shadowBlur;
        o2.shadowColor   = o1.shadowColor;
        o2.shadowOffsetX = o1.shadowOffsetX;
        o2.shadowOffsetY = o1.shadowOffsetY;
        o2.strokeStyle   = o1.strokeStyle;
        o2.globalAlpha   = o1.globalAlpha;
        o2.arcScaleX_    = o1.arcScaleX_;
        o2.arcScaleY_    = o1.arcScaleY_;
        o2.lineScale_    = o1.lineScale_;
      }
    
      function processStyle(styleString) {
        var str, alpha = 1;
    
        styleString = String(styleString);
        if (styleString.substring(0, 3) == 'rgb') {
          var start = styleString.indexOf('(', 3);
          var end = styleString.indexOf(')', start + 1);
          var guts = styleString.substring(start + 1, end).split(',');
    
          str = '#';
          for (var i = 0; i < 3; i++) {
            str += dec2hex[Number(guts[i])];
          }
    
          if (guts.length == 4 && styleString.substr(3, 1) == 'a') {
            alpha = guts[3];
          }
        } else {
          str = styleString;
        }
    
        return {color: str, alpha: alpha};
      }
    
      function processLineCap(lineCap) {
        switch (lineCap) {
          case 'butt':
            return 'flat';
          case 'round':
            return 'round';
          case 'square':
          default:
            return 'square';
        }
      }
    
      /**
       * This class implements CanvasRenderingContext2D interface as described by
       * the WHATWG.
       * @param {HTMLElement} surfaceElement The element that the 2D context should
       * be associated with
       */
      function CanvasRenderingContext2D_(surfaceElement) {
        this.m_ = createMatrixIdentity();
    
        this.mStack_ = [];
        this.aStack_ = [];
        this.currentPath_ = [];
    
        // Canvas context properties
        this.strokeStyle = '#000';
        this.fillStyle = '#000';
    
        this.lineWidth = 1;
        this.lineJoin = 'miter';
        this.lineCap = 'butt';
        this.miterLimit = Z * 1;
        this.globalAlpha = 1;
        this.canvas = surfaceElement;
    
        var el = surfaceElement.ownerDocument.createElement('div');
        el.style.width =  surfaceElement.clientWidth + 'px';
        el.style.height = surfaceElement.clientHeight + 'px';
        el.style.overflow = 'hidden';
        el.style.position = 'absolute';
        surfaceElement.appendChild(el);
    
        this.element_ = el;
        this.arcScaleX_ = 1;
        this.arcScaleY_ = 1;
        this.lineScale_ = 1;
      }
    
      var contextPrototype = CanvasRenderingContext2D_.prototype;
      contextPrototype.clearRect = function() {
        this.element_.innerHTML = '';
      };
    
      contextPrototype.beginPath = function() {
        // TODO: Branch current matrix so that save/restore has no effect
        //       as per safari docs.
        this.currentPath_ = [];
      };
    
      contextPrototype.moveTo = function(aX, aY) {
        var p = this.getCoords_(aX, aY);
        this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y});
        this.currentX_ = p.x;
        this.currentY_ = p.y;
      };
    
      contextPrototype.lineTo = function(aX, aY) {
        var p = this.getCoords_(aX, aY);
        this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y});
    
        this.currentX_ = p.x;
        this.currentY_ = p.y;
      };
    
      contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
                                                aCP2x, aCP2y,
                                                aX, aY) {
        var p = this.getCoords_(aX, aY);
        var cp1 = this.getCoords_(aCP1x, aCP1y);
        var cp2 = this.getCoords_(aCP2x, aCP2y);
        bezierCurveTo(this, cp1, cp2, p);
      };
    
      // Helper function that takes the already fixed cordinates.
      function bezierCurveTo(self, cp1, cp2, p) {
        self.currentPath_.push({
          type: 'bezierCurveTo',
          cp1x: cp1.x,
          cp1y: cp1.y,
          cp2x: cp2.x,
          cp2y: cp2.y,
          x: p.x,
          y: p.y
        });
        self.currentX_ = p.x;
        self.currentY_ = p.y;
      }
    
      contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
        // the following is lifted almost directly from
        // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes
    
        var cp = this.getCoords_(aCPx, aCPy);
        var p = this.getCoords_(aX, aY);
    
        var cp1 = {
          x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_),
          y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_)
        };
        var cp2 = {
          x: cp1.x + (p.x - this.currentX_) / 3.0,
          y: cp1.y + (p.y - this.currentY_) / 3.0
        };
    
        bezierCurveTo(this, cp1, cp2, p);
      };
    
      contextPrototype.arc = function(aX, aY, aRadius,
                                      aStartAngle, aEndAngle, aClockwise) {
        aRadius *= Z;
        var arcType = aClockwise ? 'at' : 'wa';
    
        var xStart = aX + mc(aStartAngle) * aRadius - Z2;
        var yStart = aY + ms(aStartAngle) * aRadius - Z2;
    
        var xEnd = aX + mc(aEndAngle) * aRadius - Z2;
        var yEnd = aY + ms(aEndAngle) * aRadius - Z2;
    
        // IE won't render arches drawn counter clockwise if xStart == xEnd.
        if (xStart == xEnd && !aClockwise) {
          xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something
                           // that can be represented in binary
        }
    
        var p = this.getCoords_(aX, aY);
        var pStart = this.getCoords_(xStart, yStart);
        var pEnd = this.getCoords_(xEnd, yEnd);
    
        this.currentPath_.push({type: arcType,
                               x: p.x,
                               y: p.y,
                               radius: aRadius,
                               xStart: pStart.x,
                               yStart: pStart.y,
                               xEnd: pEnd.x,
                               yEnd: pEnd.y});
    
      };
    
      contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
        this.moveTo(aX, aY);
        this.lineTo(aX + aWidth, aY);
        this.lineTo(aX + aWidth, aY + aHeight);
        this.lineTo(aX, aY + aHeight);
        this.closePath();
      };
    
      contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
        var oldPath = this.currentPath_;
        this.beginPath();
    
        this.moveTo(aX, aY);
        this.lineTo(aX + aWidth, aY);
        this.lineTo(aX + aWidth, aY + aHeight);
        this.lineTo(aX, aY + aHeight);
        this.closePath();
        this.stroke();
    
        this.currentPath_ = oldPath;
      };
    
      contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
        var oldPath = this.currentPath_;
        this.beginPath();
    
        this.moveTo(aX, aY);
        this.lineTo(aX + aWidth, aY);
        this.lineTo(aX + aWidth, aY + aHeight);
        this.lineTo(aX, aY + aHeight);
        this.closePath();
        this.fill();
    
        this.currentPath_ = oldPath;
      };
    
      contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
        var gradient = new CanvasGradient_('gradient');
        gradient.x0_ = aX0;
        gradient.y0_ = aY0;
        gradient.x1_ = aX1;
        gradient.y1_ = aY1;
        return gradient;
      };
    
      contextPrototype.createRadialGradient = function(aX0, aY0, aR0,
                                                       aX1, aY1, aR1) {
        var gradient = new CanvasGradient_('gradientradial');
        gradient.x0_ = aX0;
        gradient.y0_ = aY0;
        gradient.r0_ = aR0;
        gradient.x1_ = aX1;
        gradient.y1_ = aY1;
        gradient.r1_ = aR1;
        return gradient;
      };
    
      contextPrototype.drawImage = function(image, var_args) {
        var dx, dy, dw, dh, sx, sy, sw, sh;
    
        // to find the original width we overide the width and height
        var oldRuntimeWidth = image.runtimeStyle.width;
        var oldRuntimeHeight = image.runtimeStyle.height;
        image.runtimeStyle.width = 'auto';
        image.runtimeStyle.height = 'auto';
    
        // get the original size
        var w = image.width;
        var h = image.height;
    
        // and remove overides
        image.runtimeStyle.width = oldRuntimeWidth;
        image.runtimeStyle.height = oldRuntimeHeight;
    
        if (arguments.length == 3) {
          dx = arguments[1];
          dy = arguments[2];
          sx = sy = 0;
          sw = dw = w;
          sh = dh = h;
        } else if (arguments.length == 5) {
          dx = arguments[1];
          dy = arguments[2];
          dw = arguments[3];
          dh = arguments[4];
          sx = sy = 0;
          sw = w;
          sh = h;
        } else if (arguments.length == 9) {
          sx = arguments[1];
          sy = arguments[2];
          sw = arguments[3];
          sh = arguments[4];
          dx = arguments[5];
          dy = arguments[6];
          dw = arguments[7];
          dh = arguments[8];
        } else {
          throw Error('Invalid number of arguments');
        }
    
        var d = this.getCoords_(dx, dy);
    
        var w2 = sw / 2;
        var h2 = sh / 2;
    
        var vmlStr = [];
    
        var W = 10;
        var H = 10;
    
        // For some reason that I've now forgotten, using divs didn't work
        vmlStr.push(' <g_vml_:group',
                    ' coordsize="', Z * W, ',', Z * H, '"',
                    ' coordorigin="0,0"' ,
                    ' style="width:', W, 'px;height:', H, 'px;position:absolute;');
    
        // If filters are necessary (rotation exists), create them
        // filters are bog-slow, so only create them if abbsolutely necessary
        // The following check doesn't account for skews (which don't exist
        // in the canvas spec (yet) anyway.
    
        if (this.m_[0][0] != 1 || this.m_[0][1]) {
          var filter = [];
    
          // Note the 12/21 reversal
          filter.push('M11=', this.m_[0][0], ',',
                      'M12=', this.m_[1][0], ',',
                      'M21=', this.m_[0][1], ',',
                      'M22=', this.m_[1][1], ',',
                      'Dx=', mr(d.x / Z), ',',
                      'Dy=', mr(d.y / Z), '');
    
          // Bounding box calculation (need to minimize displayed area so that
          // filters don't waste time on unused pixels.
          var max = d;
          var c2 = this.getCoords_(dx + dw, dy);
          var c3 = this.getCoords_(dx, dy + dh);
          var c4 = this.getCoords_(dx + dw, dy + dh);
    
          max.x = m.max(max.x, c2.x, c3.x, c4.x);
          max.y = m.max(max.y, c2.y, c3.y, c4.y);
    
          vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z),
                      'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(',
                      filter.join(''), ", sizingmethod='clip');")
        } else {
          vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;');
        }
    
        vmlStr.push(' ">' ,
                    '<g_vml_:image src="', image.src, '"',
                    ' style="width:', Z * dw, 'px;',
                    ' height:', Z * dh, 'px;"',
                    ' cropleft="', sx / w, '"',
                    ' croptop="', sy / h, '"',
                    ' cropright="', (w - sx - sw) / w, '"',
                    ' cropbottom="', (h - sy - sh) / h, '"',
                    ' />',
                    '</g_vml_:group>');
    
        this.element_.insertAdjacentHTML('BeforeEnd',
                                        vmlStr.join(''));
      };
    
      contextPrototype.stroke = function(aFill) {
        var lineStr = [];
        var lineOpen = false;
        var a = processStyle(aFill ? this.fillStyle : this.strokeStyle);
        var color = a.color;
        var opacity = a.alpha * this.globalAlpha;
    
        var W = 10;
        var H = 10;
    
        lineStr.push('<g_vml_:shape',
                     ' filled="', !!aFill, '"',
                     ' style="position:absolute;width:', W, 'px;height:', H, 'px;"',
                     ' coordorigin="0 0" coordsize="', Z * W, ' ', Z * H, '"',
                     ' stroked="', !aFill, '"',
                     ' path="');
    
        var newSeq = false;
        var min = {x: null, y: null};
        var max = {x: null, y: null};
    
        for (var i = 0; i < this.currentPath_.length; i++) {
          var p = this.currentPath_[i];
          var c;
    
          switch (p.type) {
            case 'moveTo':
              c = p;
              lineStr.push(' m ', mr(p.x), ',', mr(p.y));
              break;
            case 'lineTo':
              lineStr.push(' l ', mr(p.x), ',', mr(p.y));
              break;
            case 'close':
              lineStr.push(' x ');
              p = null;
              break;
            case 'bezierCurveTo':
              lineStr.push(' c ',
                           mr(p.cp1x), ',', mr(p.cp1y), ',',
                           mr(p.cp2x), ',', mr(p.cp2y), ',',
                           mr(p.x), ',', mr(p.y));
              break;
            case 'at':
            case 'wa':
              lineStr.push(' ', p.type, ' ',
                           mr(p.x - this.arcScaleX_ * p.radius), ',',
                           mr(p.y - this.arcScaleY_ * p.radius), ' ',
                           mr(p.x + this.arcScaleX_ * p.radius), ',',
                           mr(p.y + this.arcScaleY_ * p.radius), ' ',
                           mr(p.xStart), ',', mr(p.yStart), ' ',
                           mr(p.xEnd), ',', mr(p.yEnd));
              break;
          }
    
    
          // TODO: Following is broken for curves due to
          //       move to proper paths.
    
          // Figure out dimensions so we can do gradient fills
          // properly
          if (p) {
            if (min.x == null || p.x < min.x) {
              min.x = p.x;
            }
            if (max.x == null || p.x > max.x) {
              max.x = p.x;
            }
            if (min.y == null || p.y < min.y) {
              min.y = p.y;
            }
            if (max.y == null || p.y > max.y) {
              max.y = p.y;
            }
          }
        }
        lineStr.push(' ">');
    
        if (!aFill) {
          var lineWidth = this.lineScale_ * this.lineWidth;
    
          // VML cannot correctly render a line if the width is less than 1px.
          // In that case, we dilute the color to make the line look thinner.
          if (lineWidth < 1) {
            opacity *= lineWidth;
          }
    
          lineStr.push(
            '<g_vml_:stroke',
            ' opacity="', opacity, '"',
            ' joinstyle="', this.lineJoin, '"',
            ' miterlimit="', this.miterLimit, '"',
            ' endcap="', processLineCap(this.lineCap), '"',
            ' weight="', lineWidth, 'px"',
            ' color="', color, '" />'
          );
        } else if (typeof this.fillStyle == 'object') {
          var fillStyle = this.fillStyle;
          var angle = 0;
          var focus = {x: 0, y: 0};
    
          // additional offset
          var shift = 0;
          // scale factor for offset
          var expansion = 1;
    
          if (fillStyle.type_ == 'gradient') {
            var x0 = fillStyle.x0_ / this.arcScaleX_;
            var y0 = fillStyle.y0_ / this.arcScaleY_;
            var x1 = fillStyle.x1_ / this.arcScaleX_;
            var y1 = fillStyle.y1_ / this.arcScaleY_;
            var p0 = this.getCoords_(x0, y0);
            var p1 = this.getCoords_(x1, y1);
            var dx = p1.x - p0.x;
            var dy = p1.y - p0.y;
            angle = Math.atan2(dx, dy) * 180 / Math.PI;
    
            // The angle should be a non-negative number.
            if (angle < 0) {
              angle += 360;
            }
    
            // Very small angles produce an unexpected result because they are
            // converted to a scientific notation string.
            if (angle < 1e-6) {
              angle = 0;
            }
          } else {
            var p0 = this.getCoords_(fillStyle.x0_, fillStyle.y0_);
            var width  = max.x - min.x;
            var height = max.y - min.y;
            focus = {
              x: (p0.x - min.x) / width,
              y: (p0.y - min.y) / height
            };
    
            width  /= this.arcScaleX_ * Z;
            height /= this.arcScaleY_ * Z;
            var dimension = m.max(width, height);
            shift = 2 * fillStyle.r0_ / dimension;
            expansion = 2 * fillStyle.r1_ / dimension - shift;
          }
    
          // We need to sort the color stops in ascending order by offset,
          // otherwise IE won't interpret it correctly.
          var stops = fillStyle.colors_;
          stops.sort(function(cs1, cs2) {
            return cs1.offset - cs2.offset;
          });
    
          var length = stops.length;
          var color1 = stops[0].color;
          var color2 = stops[length - 1].color;
          var opacity1 = stops[0].alpha * this.globalAlpha;
          var opacity2 = stops[length - 1].alpha * this.globalAlpha;
    
          var colors = [];
          for (var i = 0; i < length; i++) {
            var stop = stops[i];
            colors.push(stop.offset * expansion + shift + ' ' + stop.color);
          }
    
          // When colors attribute is used, the meanings of opacity and o:opacity2
          // are reversed.
          lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"',
                       ' method="none" focus="100%"',
                       ' color="', color1, '"',
                       ' color2="', color2, '"',
                       ' colors="', colors.join(','), '"',
                       ' opacity="', opacity2, '"',
                       ' g_o_:opacity2="', opacity1, '"',
                       ' angle="', angle, '"',
                       ' focusposition="', focus.x, ',', focus.y, '" />');
        } else {
          lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity,
                       '" />');
        }
    
        lineStr.push('</g_vml_:shape>');
    
        this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
      };
    
      contextPrototype.fill = function() {
        this.stroke(true);
      }
    
      contextPrototype.closePath = function() {
        this.currentPath_.push({type: 'close'});
      };
    
      /**
       * @private
       */
      contextPrototype.getCoords_ = function(aX, aY) {
        var m = this.m_;
        return {
          x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2,
          y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2
        }
      };
    
      contextPrototype.save = function() {
        var o = {};
        copyState(this, o);
        this.aStack_.push(o);
        this.mStack_.push(this.m_);
        this.m_ = matrixMultiply(createMatrixIdentity(), this.m_);
      };
    
      contextPrototype.restore = function() {
        copyState(this.aStack_.pop(), this);
        this.m_ = this.mStack_.pop();
      };
    
      function matrixIsFinite(m) {
        for (var j = 0; j < 3; j++) {
          for (var k = 0; k < 2; k++) {
            if (!isFinite(m[j][k]) || isNaN(m[j][k])) {
              return false;
            }
          }
        }
        return true;
      }
    
      function setM(ctx, m, updateLineScale) {
        if (!matrixIsFinite(m)) {
          return;
        }
        ctx.m_ = m;
    
        if (updateLineScale) {
          // Get the line scale.
          // Determinant of this.m_ means how much the area is enlarged by the
          // transformation. So its square root can be used as a scale factor
          // for width.
          var det = m[0][0] * m[1][1] - m[0][1] * m[1][0];
          ctx.lineScale_ = sqrt(abs(det));
        }
      }
    
      contextPrototype.translate = function(aX, aY) {
        var m1 = [
          [1,  0,  0],
          [0,  1,  0],
          [aX, aY, 1]
        ];
    
        setM(this, matrixMultiply(m1, this.m_), false);
      };
    
      contextPrototype.rotate = function(aRot) {
        var c = mc(aRot);
        var s = ms(aRot);
    
        var m1 = [
          [c,  s, 0],
          [-s, c, 0],
          [0,  0, 1]
        ];
    
        setM(this, matrixMultiply(m1, this.m_), false);
      };
    
      contextPrototype.scale = function(aX, aY) {
        this.arcScaleX_ *= aX;
        this.arcScaleY_ *= aY;
        var m1 = [
          [aX, 0,  0],
          [0,  aY, 0],
          [0,  0,  1]
        ];
    
        setM(this, matrixMultiply(m1, this.m_), true);
      };
    
      contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
        var m1 = [
          [m11, m12, 0],
          [m21, m22, 0],
          [dx,  dy,  1]
        ];
    
        setM(this, matrixMultiply(m1, this.m_), true);
      };
    
      contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
        var m = [
          [m11, m12, 0],
          [m21, m22, 0],
          [dx,  dy,  1]
        ];
    
        setM(this, m, true);
      };
    
      /******** STUBS ********/
      contextPrototype.clip = function() {
        // TODO: Implement
      };
    
      contextPrototype.arcTo = function() {
        // TODO: Implement
      };
    
      contextPrototype.createPattern = function() {
        return new CanvasPattern_;
      };
    
      // Gradient / Pattern Stubs
      function CanvasGradient_(aType) {
        this.type_ = aType;
        this.x0_ = 0;
        this.y0_ = 0;
        this.r0_ = 0;
        this.x1_ = 0;
        this.y1_ = 0;
        this.r1_ = 0;
        this.colors_ = [];
      }
    
      CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
        aColor = processStyle(aColor);
        this.colors_.push({offset: aOffset,
                           color: aColor.color,
                           alpha: aColor.alpha});
      };
    
      function CanvasPattern_() {}
    
      // set up externs
      G_vmlCanvasManager = G_vmlCanvasManager_;
      CanvasRenderingContext2D = CanvasRenderingContext2D_;
      CanvasGradient = CanvasGradient_;
      CanvasPattern = CanvasPattern_;
    
    })();
    
    } // if

iefix.css

#box, input.field, input[type="submit"]  
        {
          
            behavior:url('css/PIE.htc');  
        }  
          
        #box {
          
            padding:30px 30px 0 30px;  
            height:120px!important;  
        }

PIE.htc

<PUBLIC:COMPONENT lightWeight="true">  
        <PUBLIC:ATTACH EVENT="onresize" FOR="element" ONEVENT="update()" />  
        <PUBLIC:ATTACH EVENT="onresize" FOR="window" ONEVENT="update()" />  
        <PUBLIC:ATTACH EVENT="onmove" FOR="element" ONEVENT="update()" />  
        <PUBLIC:ATTACH EVENT="onpropertychange" FOR="element" ONEVENT="propChanged()" />  
        <PUBLIC:ATTACH EVENT="onmouseenter" FOR="element" ONEVENT="mouseEntered()" />  
        <PUBLIC:ATTACH EVENT="onmouseleave" FOR="element" ONEVENT="mouseLeft()" />  
        <PUBLIC:ATTACH EVENT="oncontentready" FOR="element" ONEVENT="update()" />  
        <PUBLIC:ATTACH EVENT="ondocumentready" FOR="element" ONEVENT="update()" />  
        <PUBLIC:ATTACH EVENT="ondetach" FOR="element" ONEVENT="cleanup()" />  
      
        <script type="text/javascript">  
    function i(){
        return function(){}}var D=window.PIE;  
    if(!D){D=window.PIE={T:"-pie-",Ma:"Pie",Ka:"pie_"};if(!window.XMLHttpRequest){D.Yb=true;D.T=D.T.replace(/^-/,"")}D.oa=element.document.documentMode;D.Da=!!D.oa;if(D.oa===8){D.Ca={ya:{},add:function(a){
        this.ya[a.id||(a.id=""+(new Date).getTime()+Math.random())]=a},remove:function(a){
        delete this.ya[a.id]},Tb:function(){
        var a=this.ya,b;for(b in a)a.hasOwnProperty(b)&&a[b]()}};setInterval(function(){D.Ca.Tb()},250)}D.q={ja:function(a){
        var b=D.Gb;if(!b){b=D.Gb=element.document.createDocumentFragment();  
    b.namespaces.add("css3vml","urn:schemas-microsoft-com:vml")}return b.createElement("css3vml:"+a)},Fa:function(a){
        var b,c,d,e,f=arguments;b=1;for(c=f.length;b<c;b++){e=f[b];for(d in e)if(e.hasOwnProperty(d))a[d]=e[d]}return a},ib:function(a,b,c){
        var d=D.Ab||(D.Ab={}),e=d[a],f;if(e)b.call(c,e);else{f=new Image;f.οnlοad=function(){e=d[a]={v:f.width,i:f.height};b.call(c,e);f.οnlοad=null};f.src=a}}};D.g=function(){
        function a(b){
        this.F=b}a.prototype={Ga:/(px|em|ex|mm|cm|in|pt|pc|%)$/,Va:function(){
        var b=  
    this.Bb;if(b===undefined)b=this.Bb=parseFloat(this.F);return b},Aa:function(){
        var b=this.ua;if(!b)b=this.ua=(b=this.F.match(this.Ga))&&b[0]||"px";return b},a:function(b,c){
        var d=this.Va(),e=this.Aa();switch(e){
        case "px":return d;case "%":return d*(typeof c==="function"?c():c)/100;case "em":return d*this.Ua(b);case "ex":return d*this.Ua(b)/2;default:return d*a.Ob[e]}},Ua:function(b){
        var c=b.currentStyle.fontSize,d;if(c.indexOf("px")>0)return parseFloat(c);else{c=this.Fb;if(!c){c=this.Fb=b.document.createElement("length-calc");  
    d=c.style;d.width="1em";d.position="absolute";d.top=d.left=-9999}b.appendChild(c);d=c.offsetWidth;b.removeChild(c);return d}}};a.Ob=function(){
        for(var b=["mm","cm","in","pt","pc"],c={},d=element.parentNode,e=0,f=b.length,j,g,h;e<f;e++){j=b[e];g=element.document.createElement("length-calc");h=g.style;h.position="absolute";h.top=h.left=-9999;h.width="100"+j;d.appendChild(g);c[j]=g.offsetWidth/100;d.removeChild(g)}return c}();a.Oa=new a("0");return a}();D.ra=function(){function a(b){this.C=b}a.prototype=  
    {Vb:function(){
        if(!this.Qa){
        var b=this.C,c=b.length,d=D.g.Oa,e=new D.g("50%"),f=D.k.Y.V,j={top:1,center:1,bottom:1},g={left:1,center:1,right:1};d=["left",d,"top",d];if(c===1){b.push({type:f,value:"center"});c++}if(c===2){f&(b[0].type|b[1].type)&&b[0].value in j&&b[1].value in g&&b.push(b.shift());if(b[0].type&f)if(b[0].value==="center")d[1]=e;else d[0]=b[0].value;else if(b[0].J())d[1]=new D.g(b[0].value);if(b[1].type&f)if(b[1].value==="center")d[3]=e;else d[2]=b[1].value;else if(b[1].J())d[3]=new D.g(b[1].value)}this.Qa=  
    d}return this.Qa},coords:function(b,c,d){
        var e=this.Vb(),f=e[1].a(b,c);b=e[3].a(b,d);return{x:Math.round(e[0]==="right"?c-f:f),y:Math.round(e[2]==="bottom"?d-b:b)}}};return a}();D.kb=function(){
        function a(b){
        this.F=b}a.prototype={Ga:/[a-z]+$/i,Aa:function(){
        return this.ua||(this.ua=this.F.match(this.Ga)[0].toLowerCase())},Pb:function(){
        var b=this.zb,c;if(b===undefined){b=this.Aa();c=parseFloat(this.F,10);b=this.zb=b==="deg"?c:b==="rad"?c/Math.PI*180:b==="grad"?c/400*360:b==="turn"?c*360:0}return b}};  
    return a}();D.U=function(){
        function a(b){
        this.F=b}a.ec=/\s*rgba$\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d+|\d*\.\d+)\s*$\s*/;a.prototype={parse:function(){
        if(!this.ha){
        var b=this.F,c=b.match(a.ec);if(c){
        this.ha="rgb("+c[1]+","+c[2]+","+c[3]+")";this.Pa=parseFloat(c[4])}else{
        this.ha=b;this.Pa=1}}},value:function(b){
        this.parse();return this.ha==="currentColor"?b.currentStyle.color:this.ha},Ra:function(){
        this.parse();return this.Pa}};return a}();D.k=function(){
        function a(c){
        this.ka=c;  
    this.ch=0;this.C=[];this.ea=0}var b=a.Y={fa:1,Ja:2,S:4,ub:8,La:16,V:32,n:64,W:128,X:256,ga:512,wb:1024,URL:2048};a.Na=function(c,d){
        this.type=c;this.value=d};a.Na.prototype={Ea:function(){
        return this.type&b.n||this.type&b.W&&this.value==="0"},J:function(){
        return this.Ea()||this.type&b.ga}};a.prototype={mc:/\s/,$b:/^[\+\-]?(\d*\.)?\d+/,url:/^url$\s*("([^"]*)"|'([^']*)'|([!#$%&*-~]*))\s*$/i,Ya:/^\-?[_a-z][\w-]*/i,hc:/^("([^"]*)"|'([^']*)')/,Wb:/^#([\da-f]{6}|[\da-f]{3})/i,kc:{px:b.n,em:b.n,ex:b.n,  
    mm:b.n,cm:b.n,"in":b.n,pt:b.n,pc:b.n,deg:b.fa,rad:b.fa,grad:b.fa},Lb:{aqua:1,black:1,blue:1,fuchsia:1,gray:1,green:1,lime:1,maroon:1,navy:1,olive:1,purple:1,red:1,silver:1,teal:1,white:1,yellow:1,currentColor:1},Kb:{rgb:1,rgba:1,hsl:1,hsla:1},next:function(c){
        function d(n,p){n=new a.Na(n,p);if(!c){k.C.push(n);k.ea++}return n}function e(){k.ea++;return null}var f,j,g,h,k=this;if(this.ea<this.C.length)return this.C[this.ea++];for(;this.mc.test(this.ka.charAt(this.ch));)this.ch++;if(this.ch>=this.ka.length)return e();  
    j=this.ch;f=this.ka.substring(this.ch);g=f.charAt(0);switch(g){
        case "#":if(h=f.match(this.Wb)){
        this.ch+=h[0].length;return d(b.S,h[0])}break;case '"':case "'":if(h=f.match(this.hc)){
        this.ch+=h[0].length;return d(b.wb,h[2]||h[3]||"")}break;case "/":case ",":this.ch++;return d(b.X,g);case "u":if(h=f.match(this.url)){
        this.ch+=h[0].length;return d(b.URL,h[2]||h[3]||h[4]||"")}}if(h=f.match(this.$b)){g=h[0];this.ch+=g.length;if(f.charAt(g.length)==="%"){
        this.ch++;return d(b.ga,g+"%")}if(h=f.substring(g.length).match(this.Ya)){g+=  
    h[0];this.ch+=h[0].length;return d(this.kc[h[0].toLowerCase()]||b.ub,g)}return d(b.W,g)}if(h=f.match(this.Ya)){g=h[0];this.ch+=g.length;if(g.toLowerCase()in this.Lb)return d(b.S,g);if(f.charAt(g.length)==="("){
        this.ch++;if(g.toLowerCase()in this.Kb){f=function(n){
        return n&&n.type&b.W};h=function(n){
        return n&&n.type&(b.W|b.ga)};var o=function(n,p){
        return n&&n.value===p},m=function(){
        return k.next(1)};if((g.charAt(0)==="r"?h(m()):f(m()))&&o(m(),",")&&h(m())&&o(m(),",")&&h(m())&&(g==="rgb"||g==="hsa"||  
    o(m(),",")&&f(m()))&&o(m(),")"))return d(b.S,this.ka.substring(j,this.ch));return e()}return d(b.La,g+"(")}return d(b.V,g)}this.ch++;return d(b.Ja,g)},m:function(){
        return this.C[this.ea-- -2]},all:function(){
        for(;this.next(););return this.C},R:function(c,d){
        for(var e=[],f,j;f=this.next();){
        if(c(f)){j=true;this.m();break}e.push(f)}return d&&!j?null:e}};return a}();D.w={M:function(a){
        function b(c){
        this.element=c}D.q.Fa(b.prototype,D.w,a);return b},f:function(){
        if(this.j())this.Eb=this.N(this.yb=this.ba());  
    return this.Eb},ba:function(){
        var a=this.element,b=a.style;a=a.currentStyle;var c=this.aa,d=this.da,e=this.Cb||(this.Cb=D.T+c),f=this.Db||(this.Db=D.Ma+d.charAt(0).toUpperCase()+d.substring(1));return b[f]||a.getAttribute(e)||b[d]||a.getAttribute(c)},d:function(){
        return!!this.f()},j:function(){
        return this.yb!==this.ba()}};D.mb=D.w.M({aa:D.T+"background",da:D.Ma+"Background",Ib:{scroll:1,fixed:1,local:1},qa:{"repeat-x":1,"repeat-y":1,repeat:1,"no-repeat":1},ac:{"padding-box":1,"border-box":1,"content-box":1},  
    Jb:{
         "padding-box":1,"border-box":1},dc:{top:1,right:1,bottom:1,left:1,center:1},fc:{contain:1,cover:1},N:function(a){
        function b(q){
        return q.J()||q.type&h&&q.value in n}function c(q){
        return q.J()&&new D.g(q.value)||q.value==="auto"&&"auto"}var d=this.element.currentStyle,e,f,j=D.k.Y,g=j.X,h=j.V,k=j.S,o,m,n=this.dc,p,t,r=null;if(this.za()){a=new D.k(a);r={images:[]};for(f={};e=a.next();){o=e.type;m=e.value;if(!f.type&&o&j.La&&m==="linear-gradient("){p={P:[],type:"linear-gradient"};for(t={};e=a.next();){o=  
    e.type;m=e.value;if(o&j.Ja&&m===")"){t.color&&p.P.push(t);p.P.length>1&&D.q.Fa(f,p);break}if(o&k){
        if(p.wa||p.Ba){e=a.m();if(e.type!==g)break;a.next()}t={color:new D.U(m)};e=a.next();if(e.J())t.Za=new D.g(e.value);else a.m()}else if(o&j.fa&&!p.wa&&!t.color&&!p.P.length)p.wa=new D.kb(e.value);else if(b(e)&&!p.Ba&&!t.color&&!p.P.length){a.m();p.Ba=new D.ra(a.R(function(q){
        return!b(q)},false))}else if(o&g&&m===","){
        if(t.color){p.P.push(t);t={}}}else break}}else if(!f.type&&o&j.URL){f.url=m;f.type="image"}else if(b(e)&&  
    !f.size){a.m();f.position=new D.ra(a.R(function(q){
        return!b(q)},false))}else if(o&h)if(m in this.qa)f.repeat=m;else if(m in this.ac){f.origin=m;if(m in this.Jb)f.clip=m}else{
        if(m in this.Ib)f.rc=m}else if(o&k&&!r.color)r.color=new D.U(m);else if(o&g)if(m==="/"){e=a.next();o=e.type;m=e.value;if(o&h&&m in this.fc)f.size=m;else if(m=c(e))f.size={v:m,i:c(a.next())||a.m()&&m}}else{
        if(m===","&&f.type){r.images.push(f);f={}}}else return null}f.type&&r.images.push(f)}else this.gb(function(){
        var q=d.backgroundPositionX,  
    w=d.backgroundPositionY,l=d.backgroundImage,u=d.backgroundColor;r={};if(u!=="transparent")r.color=new D.U(u);if(l!=="none")r.images=[{type:"image",url:(new D.k(l)).next().value,repeat:d.backgroundRepeat,position:new D.ra((new D.k(q+" "+w)).all())}]});return r},gb:function(a){
        var b=this.element.runtimeStyle,c=b.backgroundImage,d=b.backgroundColor;b.backgroundImage=b.backgroundColor="";a=a.call(this);b.backgroundImage=c;b.backgroundColor=d;return a},ba:function(){
        var a=this.element.currentStyle;return this.za()||  
    this.gb(function(){
        return a.backgroundColor+" "+a.backgroundImage+" "+a.backgroundRepeat+" "+a.backgroundPositionX+" "+a.backgroundPositionY})},za:function(){
        var a=this.element;return a.style[this.da]||a.currentStyle.getAttribute(this.aa)},d:function(){
        return this.za()&&!!this.f()}});D.qb=D.w.M({bb:["Top","Right","Bottom","Left"],Zb:{uc:"1px",sc:"3px",tc:"5px"},N:function(){
        var a={},b={},c={},d=false,e=true,f=true,j=true;this.hb(function(){
        for(var g=this.element.currentStyle,h=0,k,o,m,n,p,t,r;h<4;h++){m=  
    this.bb[h];r=m.charAt(0).toLowerCase();k=b[r]=g["border"+m+"Style"];o=g["border"+m+"Color"];m=g["border"+m+"Width"];if(h>0){
        if(k!==n)f=false;if(o!==p)e=false;if(m!==t)j=false}n=k;p=o;t=m;c[r]=new D.U(o);m=a[r]=new D.g(b[r]==="none"?"0":this.Zb[m]||m);if(m.a(this.element)>0)d=true}});return d?{fb:a,ic:b,Mb:c,nc:j,Nb:e,jc:f}:null},ba:function(){
        var a=this.element.currentStyle,b;this.hb(function(){b=a.borderWidth+"|"+a.borderStyle+"|"+a.borderColor});return b},hb:function(a){
        var b=this.element.runtimeStyle,  
    c=b.borderWidth,d=b.borderStyle,e=b.borderColor;b.borderWidth=b.borderStyle=b.borderColor="";a=a.call(this);b.borderWidth=c;b.borderStyle=d;b.borderColor=e;return a}});(function(){D.sa=D.w.M({aa:"border-radius",da:"borderRadius",N:function(b){
        var c=null,d,e,f,j,g=false;if(b){e=new D.k(b);var h=function(){
        for(var k=[],o;(f=e.next())&&f.J();){j=new D.g(f.value);o=j.Va();if(o<0)return null;if(o>0)g=true;k.push(j)}return k.length>0&&k.length<5?{tl:k[0],tr:k[1]||k[0],br:k[2]||k[0],bl:k[3]||k[1]||k[0]}:  
    null};if(b=h()){
        if(f){
        if(f.type&D.k.Y.X&&f.value==="/")d=h()}else d=b;if(g&&b&&d)c={x:b,y:d}}}return c}});var a=D.g.Oa;a={tl:a,tr:a,br:a,bl:a};D.sa.jb={x:a,y:a}})();D.ob=D.w.M({aa:"border-image",da:"borderImage",qa:{stretch:1,round:1,repeat:1,space:1},N:function(a){
        var b=null,c,d,e,f,j,g,h=0,k,o=D.k.Y,m=o.V,n=o.W,p=o.n,t=o.ga;if(a){c=new D.k(a);b={};for(var r=function(l){
        return l&&l.type&o.X&&l.value==="/"},q=function(l){
        return l&&l.type&m&&l.value==="fill"},w=function(){f=c.R(function(l){
        return!(l.type&  
    (n|t))});if(q(c.next())&&!b.fill)b.fill=true;else c.m();if(r(c.next())){h++;j=c.R(function(){
        return!(d.type&(n|t|p))&&!(d.type&m&&d.value==="auto")});if(r(c.next())){h++;g=c.R(function(){
        return!(d.type&(n|p))})}}else c.m()};d=c.next();){a=d.type;e=d.value;if(a&(n|t)&&!f){c.m();w()}else if(q(d)&&!b.fill){b.fill=true;w()}else if(a&m&&this.qa[e]&&!b.repeat){b.repeat={i:e};if(d=c.next())if(d.type&m&&this.qa[d.value])b.repeat.Ha=d.value;else c.m()}else if(a&o.URL&&!b.src)b.src=e;else return null}if(!b.src||  
    !f||f.length<1||f.length>4||j&&j.length>4||h===1&&j.length<1||g&&g.length>4||h===2&&g.length<1)return null;if(!b.repeat)b.repeat={i:"stretch"};if(!b.repeat.Ha)b.repeat.Ha=b.repeat.i;a=function(l,u){
        return{Q:u(l[0]),O:u(l[1]||l[0]),H:u(l[2]||l[0]),K:u(l[3]||l[1]||l[0])}};b.slice=a(f,function(l){
        return new D.g(l.type&n?l.value+"px":l.value)});b.width=j&&j.length>0?a(j,function(l){
        return l.type&(p|t)?new D.g(l.value):l.value}):(k=this.element.currentStyle)&&{Q:new D.g(k.borderTopWidth),O:new D.g(k.borderRightWidth),  
    H:new D.g(k.borderBottomWidth),K:new D.g(k.borderLeftWidth)};b.ca=a(g||[0],function(l){
        return l.type&p?new D.g(l.value):l.value})}return b}});D.tb=D.w.M({aa:"box-shadow",da:"boxShadow",N:function(a){
        var b,c=D.g,d=D.k.Y,e;if(a){e=new D.k(a);b={ca:[],pa:[]};for(a=function(){
        for(var f,j,g,h,k,o;f=e.next();){g=f.value;j=f.type;if(j&d.X&&g===",")break;else if(f.Ea()&&!k){e.m();k=e.R(function(m){
        return!m.Ea()})}else if(j&d.S&&!h)h=g;else if(j&d.V&&g==="inset"&&!o)o=true;else return false}f=k&&k.length;  
    if(f>1&&f<5){(o?b.pa:b.ca).push({oc:new c(k[0].value),qc:new c(k[1].value),blur:new c(k[2]?k[2].value:"0"),gc:new c(k[3]?k[3].value:"0"),color:new D.U(h||"currentColor")});return true}return false};a(););}return b&&(b.pa.length||b.ca.length)?b:null}});D.xb=D.w.M({ba:function(){
        var a=this.element.currentStyle;return a.visibility+"|"+a.display},N:function(){
        var a=this.element,b=a.runtimeStyle;a=a.currentStyle;var c=b.visibility,d;b.visibility="";d=a.visibility;b.visibility=c;return{lc:d!=="hidden",  
    Qb:a.display!=="none"}},d:function(){
        return false}});D.p={L:function(a){
        function b(c,d,e){
        this.element=c;this.e=d;this.parent=e}D.q.Fa(b.prototype,D.p,a);return b},B:function(){
        return false},D:i(),cb:i(),u:i(),va:function(a,b){
        this.ab(a);for(var c=this.Z||(this.Z=[]),d=a+1,e=c.length,f;d<e;d++)if(f=c[d])break;c[a]=b;this.o().insertBefore(b,f||null)},ma:function(a){
        var b=this.Z;return b&&b[a]||null},ab:function(a){
        var b=this.ma(a),c=this.G;if(b&&c){c.removeChild(b);this.Z[a]=null}},na:function(a,b,  
    c,d){
         var e=this.ta||(this.ta={}),f=e[a];if(!f){f=e[a]=D.q.ja("shape");if(b)f.appendChild(f[b]=D.q.ja(b));if(d){c=this.ma(d);if(!c){
        this.va(d,this.element.document.createElement("group"+d));c=this.ma(d)}}c.appendChild(f);a=f.style;a.position="absolute";a.left=a.top=0;a.behavior="url(#default#VML)"}return f},xa:function(a){
        var b=this.ta,c=b&&b[a];if(c){c.parentNode.removeChild(c);delete b[a]}return!!c},Wa:function(a){
        var b=this.element,c=b.offsetWidth,d=b.offsetHeight,e,f,j,g,h,k,o;e=a.x.tl.a(b,c);  
    f=a.y.tl.a(b,d);j=a.x.tr.a(b,c);g=a.y.tr.a(b,d);h=a.x.br.a(b,c);k=a.y.br.a(b,d);o=a.x.bl.a(b,c);a=a.y.bl.a(b,d);c=Math.min(c/(e+j),d/(g+k),c/(o+h),d/(f+a));if(c<1){e*=c;f*=c;j*=c;g*=c;h*=c;k*=c;o*=c;a*=c}return{x:{tl:e,tr:j,br:h,bl:o},y:{tl:f,tr:g,br:k,bl:a}}},la:function(a,b,c){b=b||1;var d,e,f=this.element;e=f.offsetWidth*b;f=f.offsetHeight*b;var j=this.e.s,g=Math.floor,h=Math.ceil,k=a?a.Q*b:0,o=a?a.O*b:0,m=a?a.H*b:0;a=a?a.K*b:0;var n,p,t,r,q;if(c||j.d()){d=this.Wa(c||j.f());c=d.x.tl*b;j=d.y.tl*  
    b;n=d.x.tr*b;p=d.y.tr*b;t=d.x.br*b;r=d.y.br*b;q=d.x.bl*b;b=d.y.bl*b;e="m"+g(a)+","+g(j)+"qy"+g(c)+","+g(k)+"l"+h(e-n)+","+g(k)+"qx"+h(e-o)+","+g(p)+"l"+h(e-o)+","+h(f-r)+"qy"+h(e-t)+","+h(f-m)+"l"+g(q)+","+h(f-m)+"qx"+g(a)+","+h(f-b)+" x e"}else e="m"+g(a)+","+g(k)+"l"+h(e-o)+","+g(k)+"l"+h(e-o)+","+h(f-m)+"l"+g(a)+","+h(f-m)+"xe";return e},o:function(){
        var a=this.parent.ma(this.zIndex),b;if(!a){a=this.element.document.createElement(this.ia);b=a.style;b.position="absolute";b.top=b.left=0;this.parent.va(this.zIndex,  
    a)}return a},h:function(){
        this.parent.ab(this.zIndex);delete this.ta;delete this.Z}};D.vb=D.p.L({d:function(){
        var a=this.e;for(var b in a)if(a.hasOwnProperty(b)&&a[b].d())return true;return false},B:function(){
        return this.e.eb.j()},cb:function(){
        if(this.d()){
        var a=this.element,b=a,c,d,e=this.o().style,f=0;c=0;do b=b.offsetParent;while(b&&b.currentStyle.position==="static");c=a.getBoundingClientRect();if(b){d=b.getBoundingClientRect();b=b.currentStyle;f=c.left-d.left-(parseFloat(b.borderLeftWidth)||  
    0);c=c.top-d.top-(parseFloat(b.borderTopWidth)||0)}else{b=a.document.documentElement;f=c.left+b.scrollLeft-b.clientLeft;c=c.top+b.scrollTop-b.clientTop}e.left=f;e.top=c;e.zIndex=a.currentStyle.position==="static"?-1:a.currentStyle.zIndex}},u:i(),db:function(){
        var a=this.e.eb.f();this.o().style.display=a.lc&&a.Qb?"":"none"},D:function(){
        this.d()?this.db():this.h()},o:function(){
        var a=this.G,b,c;if(!a){b=this.element;a=this.G=b.document.createElement("css3-container");c=a.style;c.position=b.currentStyle.position===  
    "fixed"?"fixed":"absolute";this.db();b.parentNode.insertBefore(a,b)}return a},h:function(){
        var a=this.G;a&&a.parentNode&&a.parentNode.removeChild(a);delete this.G;delete this.Z}});D.lb=D.p.L({zIndex:2,ia:"background",B:function(){
        var a=this.e;return a.I.j()||a.s.j()},d:function(){
        var a=this.e,b=this.element;return b.offsetWidth&&b.offsetHeight&&(a.z.d()||a.s.d()||a.I.d()||a.A.d()&&a.A.f().pa)},u:function(){
        this.d()&&this.Sa()},D:function(){
        this.h();this.d()&&this.Sa()},Sa:function(){
        this.Rb();this.Sb()},  
    Rb:function(){
        var a=this.e.I.f(),b=this.element,c=a&&a.color&&a.color.value(b),d,e,f;if(c&&c!=="transparent"){
        this.Xa();d=this.na("bgColor","fill",this.o(),1);e=b.offsetWidth;b=b.offsetHeight;d.stroked=false;d.coordsize=e*2+","+b*2;d.coordorigin="1,1";d.path=this.la(null,2);f=d.style;f.width=e;f.height=b;d.fill.color=c;a=a.color.Ra();if(a<1)d.fill.opacity=a}else this.xa("bgColor")},Sb:function(){
        var a=this.e.I.f();a=a&&a.images;var b,c,d,e,f,j;if(a){
        this.Xa();b=this.element;d=b.offsetWidth;e=b.offsetHeight;  
    for(j=a.length;j--;){b=a[j];c=this.na("bgImage"+j,"fill",this.o(),2);c.stroked=false;c.fill.type="tile";c.fillcolor="none";c.coordsize=d*2+","+e*2;c.coordorigin="1,1";c.path=this.la(0,2);f=c.style;f.width=d;f.height=e;if(b.type==="linear-gradient")this.Hb(c,b);else{c.fill.src=b.url;this.cc(c,j)}}}for(j=a?a.length:0;this.xa("bgImage"+j++););},cc:function(a,b){D.q.ib(a.fill.src,function(c){
        var d=a.fill,e=this.element,f=e.offsetWidth,j=e.offsetHeight,g=this.e,h=g.$.f(),k=h&&h.fb;h=k?k.t.a(e):0;var o=  
    k?k.r.a(e):0,m=k?k.b.a(e):0;k=k?k.l.a(e):0;g=g.I.f().images[b];e=g.position?g.position.coords(e,f-c.v-k-o,j-c.i-h-m):{x:0,y:0};g=g.repeat;m=o=0;var n=f+1,p=j+1,t=D.Da?0:1;k=e.x+k+0.5;h=e.y+h+0.5;d.position=k/f+","+h/j;if(g&&g!=="repeat"){
        if(g==="repeat-x"||g==="no-repeat"){o=h+1;p=h+c.i+t}if(g==="repeat-y"||g==="no-repeat"){m=k+1;n=k+c.v+t}a.style.clip="rect("+o+"px,"+n+"px,"+p+"px,"+m+"px)"}},this)},Hb:function(a,b){
        function c(x,y,v,C,G){
        if(v===0||v===180)return[C,y];else if(v===90||v===270)return[x,  
    G];else{v=Math.tan(-v*m/180);x=v*x-y;y=-1/v;C=y*C-G;G=y-v;return[(C-x)/G,(v*C-y*x)/G]}}function d(){q=h>=90&&h<270?j:0;w=h<180?g:0;l=j-q;u=g-w}function e(x,y){
        var v=y[0]-x[0];x=y[1]-x[1];return Math.abs(v===0?x:x===0?v:Math.sqrt(v*v+x*x))}var f=this.element,j=f.offsetWidth,g=f.offsetHeight;a=a.fill;var h=b.wa,k=b.Ba;b=b.P;var o=b.length,m=Math.PI,n,p,t,r,q,w,l,u,s,z,B,A;if(k){k=k.coords(f,j,g);n=k.x;p=k.y}if(h){h=h.Pb();if(h<0)h+=360;h%=360;d();if(!k){n=q;p=w}k=c(n,p,h,l,u);t=k[0];r=k[1]}else if(k){t=  
    j-n;r=g-p}else{n=p=t=0;r=g}k=t-n;s=r-p;if(h===undefined){h=-Math.atan2(s,k)/m*180;if(h<0)h+=360;h%=360;d()}k=Math.atan2(k*j/g,s)/m*180;k+=180;k%=360;z=e([n,p],[t,r]);t=e([q,w],c(q,w,h,l,u));r=[];p=e([n,p],c(n,p,h,q,w))/t*100;n=[];for(s=0;s<o;s++)n.push(b[s].Za?b[s].Za.a(f,z):s===0?0:s===o-1?z:null);for(s=1;s<o;s++){
        if(n[s]===null){B=n[s-1];z=s;do A=n[++z];while(A===null);n[s]=B+(A-B)/(z-s+1)}n[s]=Math.max(n[s],n[s-1])}for(s=0;s<o;s++)r.push(p+n[s]/t*100+"% "+b[s].color.value(f));a.angle=k;a.type=  
    "gradient";a.method="sigma";a.color=b[0].color.value(f);a.color2=b[o-1].color.value(f);a.colors.value=r.join(",")},Xa:function(){
        var a=this.element.runtimeStyle;a.backgroundImage="url(about:blank)";a.backgroundColor="transparent"},h:function(){D.p.h.call(this);var a=this.element.runtimeStyle;a.backgroundImage=a.backgroundColor=""}});D.pb=D.p.L({zIndex:4,ia:"border",B:function(){
        var a=this.e;return a.$.j()||a.s.j()},d:function(){
        var a=this.e;return a.z.d()||a.s.d()||a.I.d()},u:function(){
        this.d()&&  
    this.Ta()},D:function(){
        this.h();this.d()&&this.Ta()},Ta:function(){
        var a=this.element,b=a.offsetWidth,c=a.offsetHeight,d,e,f,j,g,h;if(this.e.$.f()){
        this.Xb();f=this.Ub(2);g=0;for(h=f.length;g<h;g++){j=f[g];d=this.na("borderPiece"+g,j.stroke?"stroke":"fill",this.o());d.coordsize=b*2+","+c*2;d.coordorigin="1,1";d.path=j.path;e=d.style;e.width=b;e.height=c;d.filled=!!j.fill;d.stroked=!!j.stroke;if(j.stroke){d=d.stroke;d.weight=j.Ia+"px";d.color=j.color.value(a);d.dashstyle=j.stroke==="dashed"?"2 2":  
    j.stroke==="dotted"?"1 1":"solid";d.linestyle=j.stroke==="double"&&j.Ia>2?"ThinThin":"Single"}else d.fill.color=j.fill.value(a)}for(;this.xa("borderPiece"+g++););}},Xb:function(){
        var a=this.element,b=a.currentStyle,c=a.runtimeStyle,d=a.tagName,e;if(d==="BUTTON"||d==="INPUT"&&a.type in{submit:1,button:1,reset:1}){c.borderWidth="";a=this.e.$.bb;for(e=a.length;e--;){d=a[e];c["padding"+d]="";c["padding"+d]=parseInt(b["padding"+d])+parseInt(b["border"+d+"Width"])+(!D.Da&&e%2?1:0)}c.borderWidth=0}else if(D.Yb){
        if(a.childNodes.length!==  
    1||a.firstChild.tagName!=="ie6-mask"){b=a.document.createElement("ie6-mask");d=b.style;d.visibility="visible";for(d.zoom=1;d=a.firstChild;)b.appendChild(d);a.appendChild(b);c.visibility="hidden"}}else c.borderColor="transparent"},Ub:function(a){
        var b=this.element,c,d,e=this.e.$,f=[],j,g,h,k,o,m,n,p;if(e.d()){e=e.f();m=e.fb;n=e.ic;p=e.Mb;if(e.nc&&e.jc&&e.Nb){e=m.t.a(b);h=e/2;f.push({path:this.la({Q:h,O:h,H:h,K:h},a),stroke:n.t,color:p.t,Ia:e})}else{a=a||1;c=b.offsetWidth;d=b.offsetHeight;e=m.t.a(b);  
    h=m.r.a(b);k=m.b.a(b);b=m.l.a(b);var t={t:e,r:h,b:k,l:b};b=this.e.s;if(b.d())o=this.Wa(b.f());j=Math.floor;g=Math.ceil;var r=function(l,u){
        return o?o[l][u]:0},q=function(l,u,s,z,B,A){
        var x=r("x",l),y=r("y",l),v=l.charAt(1)==="r";l=l.charAt(0)==="b";return x>0&&y>0?(A?"al":"ae")+(v?g(c-x):j(x))*a+","+(l?g(d-y):j(y))*a+","+(j(x)-u)*a+","+(j(y)-s)*a+","+z*65535+","+2949075*(B?1:-1):(A?"m":"l")+(v?c-u:u)*a+","+(l?d-s:s)*a},w=function(l,u,s,z){
        var B=l==="t"?j(r("x","tl"))*a+","+g(u)*a:l==="r"?g(c-u)*a+  
    ","+j(r("y","tr"))*a:l==="b"?g(c-r("x","br"))*a+","+j(d-u)*a:j(u)*a+","+g(d-r("y","bl"))*a;l=l==="t"?g(c-r("x","tr"))*a+","+g(u)*a:l==="r"?g(c-u)*a+","+g(d-r("y","br"))*a:l==="b"?j(r("x","bl"))*a+","+j(d-u)*a:j(u)*a+","+j(r("y","tl"))*a;return s?(z?"m"+l:"")+"l"+B:(z?"m"+B:"")+"l"+l};b=function(l,u,s,z,B,A){
        var x=l==="l"||l==="r",y=t[l],v,C;if(y>0&&n[l]!=="none"){v=t[x?l:u];u=t[x?u:l];C=t[x?l:s];s=t[x?s:l];if(n[l]==="dashed"||n[l]==="dotted"){f.push({path:q(z,v,u,A+45,0,1)+q(z,0,0,A,1,0),fill:p[l]});  
    f.push({path:w(l,y/2,0,1),stroke:n[l],Ia:y,color:p[l]});f.push({path:q(B,C,s,A,0,1)+q(B,0,0,A-45,1,0),fill:p[l]})}else f.push({path:q(z,v,u,A+45,0,1)+w(l,y,0,0)+q(B,C,s,A,0,0)+(n[l]==="double"&&y>2?q(B,C-j(C/3),s-j(s/3),A-45,1,0)+w(l,g(y/3*2),1,0)+q(z,v-j(v/3),u-j(u/3),A,1,0)+"x "+q(z,j(v/3),j(u/3),A+45,0,1)+w(l,j(y/3),1,0)+q(B,j(C/3),j(s/3),A,0,0):"")+q(B,0,0,A-45,1,0)+w(l,0,1,0)+q(z,0,0,A,1,0),fill:p[l]})}};b("t","l","r","tl","tr",90);b("r","t","b","tr","br",0);b("b","r","l","br","bl",-90);b("l",  
    "b","t","bl","tl",-180)}}return f},h:function(){D.p.h.call(this);this.element.runtimeStyle.borderColor=""}});D.nb=D.p.L({zIndex:5,bc:["t","tr","r","br","b","bl","l","tl","c"],B:function(){
        var a=this.e;return a.z.j()||a.z.j()},d:function(){
        return this.e.z.d()},u:function(){
        if(this.d()){
        var a=this.e.z.f();this.o();var b=this.element,c=this.$a;D.q.ib(a.src,function(d){
        function e(q,w,l,u,s){q=c[q].style;q.width=w;q.height=l;q.left=u;q.top=s}function f(q,w,l){
        for(var u=0,s=q.length;u<s;u++)c[q[u]].imagedata[w]=  
    l}var j=b.offsetWidth,g=b.offsetHeight,h=a.width,k=h.Q.a(b),o=h.O.a(b),m=h.H.a(b);h=h.K.a(b);var n=a.slice,p=n.Q.a(b),t=n.O.a(b),r=n.H.a(b);n=n.K.a(b);e("tl",h,k,0,0);e("t",j-h-o,k,h,0);e("tr",o,k,j-o,0);e("r",o,g-k-m,j-o,k);e("br",o,m,j-o,g-m);e("b",j-h-o,m,h,g-m);e("bl",h,m,0,g-m);e("l",h,g-k-m,0,k);e("c",j-h-o,g-k-m,h,k);f(["tl","t","tr"],"cropBottom",(d.i-p)/d.i);f(["tl","l","bl"],"cropRight",(d.v-n)/d.v);f(["bl","b","br"],"cropTop",(d.i-r)/d.i);f(["tr","r","br"],"cropLeft",(d.v-t)/d.v);if(a.repeat.Ha===  
    "stretch"){f(["l","r","c"],"cropTop",p/d.i);f(["l","r","c"],"cropBottom",r/d.i)}if(a.repeat.i==="stretch"){f(["t","b","c"],"cropLeft",n/d.v);f(["t","b","c"],"cropRight",t/d.v)}c.c.style.display=a.fill?"":"none"},this)}else this.h()},D:function(){
        this.h();this.d()&&this.u()},o:function(){
        var a=this.G,b,c,d,e=this.bc,f=e.length;if(!a){a=this.G=this.element.document.createElement("border-image");b=a.style;b.position="absolute";this.$a={};for(d=0;d<f;d++){c=this.$a[e[d]]=D.q.ja("rect");c.appendChild(D.q.ja("imagedata"));  
    b=c.style;b.behavior="url(#default#VML)";b.position="absolute";b.top=b.left=0;c.imagedata.src=this.e.z.f().src;c.stroked=false;c.filled=false;a.appendChild(c)}this.parent.va(this.zIndex,a)}return a}});D.sb=D.p.L({zIndex:1,ia:"outset-box-shadow",B:function(){
        var a=this.e;return a.A.j()||a.s.j()},d:function(){
        var a=this.e.A;return a.d()&&a.f().ca[0]},u:function(){
        if(this.d()){
        var a=this,b=this.element,c=this.o(),d=this.e,e=d.A.f().ca;d=d.s.f();for(var f=e.length,j=f,g,h=b.offsetWidth,k=b.offsetHeight,  
    o=D.Da?1:0,m=["tl","tr","br","bl"],n,p,t,r,q,w,l,u,s,z,B,A,x,y=function(v,C,G,O,P,Q,R){v=a.na("shadow"+v+C,"fill",c,f-v);C=v.style;var I=v.fill;C.left=G;C.top=O;v.coordsize=h*2+","+k*2;v.coordorigin="1,1";v.stroked=false;v.filled=true;I.color=P.value(b);if(Q){I.type="gradienttitle";I.color2=I.color;I.opacity=0}v.path=R;C.width=h;C.height=k;return v};j--;){p=e[j];r=p.oc.a(b);q=p.qc.a(b);g=p.gc.a(b);w=p.blur.a(b);p=p.color;l=-g-w;if(!d&&w)d=D.sa.jb;l=this.la({Q:l,O:l,H:l,K:l},2,d);if(w){u=(g+w)*2+h;  
    s=(g+w)*2+k;z=w*2/u;B=w*2/s;if(w-g>h/2||w-g>k/2)for(g=4;g--;){n=m[g];A=n.charAt(0)==="b";x=n.charAt(1)==="r";n=y(j,n,r,q,p,w,l);t=n.fill;t.focusposition=(x?1-z:z)+","+(A?1-B:B);t.focussize="0,0";n.style.clip="rect("+((A?s/2:0)+o)+"px,"+(x?u:u/2)+"px,"+(A?s:s/2)+"px,"+((x?u/2:0)+o)+"px)"}else{n=y(j,"",r,q,p,w,l);t=n.fill;t.focusposition=z+","+B;t.focussize=1-z*2+","+(1-B*2)}}else{n=y(j,"",r,q,p,w,l);r=p.Ra();if(r<1)n.fill.opacity=r}}}else this.h()},D:function(){
        this.h();this.u()}});D.rb=D.p.L({zIndex:3,  
    ia:"inset-box-shadow",B:function(){
        var a=this.e;return a.A.j()||a.s.j()},d:function(){
        var a=this.e.A;return a.d()&&a.f().pa[0]},u:i(),D:i()})}var E,F,H,J,K,L,M;function update(){init();var a=element.getBoundingClientRect(),b=a.left,c=a.top,d=a.right-b;a=a.bottom-c;var e,f;if(b!==H||c!==J){e=0;for(f=K.length;e<f;e++)K[e].cb();H=b;J=c}if(d!==E||a!==F){e=0;for(f=K.length;e<f;e++)K[e].u();E=d;F=a}}  
    function propChanged(){init();var a,b,c=[];a=0;for(b=K.length;a<b;a++)K[a].B()&&c.push(K[a]);a=0;for(b=c.length;a<b;a++)c[a].D()}function mouseEntered(){event.srcElement.className+=" "+D.Ka+"hover";setTimeout(propChanged,0)}function mouseLeft(){
        var a=event.srcElement;a.className=a.className.replace(new RegExp("\\b"+D.Ka+"hover\\b","g"),"");setTimeout(propChanged,0)}function N(){
        var a=event.propertyName;if(a==="className"||a==="id")propChanged()}  
    function cleanup(){
        var a,b;if(K){a=0;for(b=K.length;a<b;a++)K[a].h();K=null}L=null;if(M){a=0;for(b=M.length;a<b;a++){M[a].detachEvent("onpropertychange",N);M[a].detachEvent("onmouseenter",mouseEntered);M[a].detachEvent("onmouseleave",mouseLeft)}M=null}D.oa===8&&D.Ca.remove(update)}  
    function init(){
        if(!K){
        var a=element;a.runtimeStyle.zoom=1;L={I:new D.mb(a),$:new D.qb(a),z:new D.ob(a),s:new D.sa(a),A:new D.tb(a),eb:new D.xb(a)};var b=new D.vb(a,L);K=[b,new D.sb(a,L,b),new D.lb(a,L,b),new D.rb(a,L,b),new D.pb(a,L,b),new D.nb(a,L,b)];var c=element;if(a=c.currentStyle.getAttribute(D.T+"watch-ancestors")){M=[];a=parseInt(a,10);b=0;for(c=c.parentNode;c&&(a==="NaN"||b++<a);){M.push(c);c.attachEvent("onpropertychange",N);c.attachEvent("onmouseenter",mouseEntered);c.attachEvent("onmouseleave",  
    mouseLeft);c=c.parentNode}}D.oa===8&&D.Ca.add(update)}}element.readyState==="complete"&&update();  
        </script>    
    </PUBLIC:COMPONENT>

转载于:https://www.cnblogs.com/JoannaQ/archive/2013/01/26/2877594.html