问题：IE8/9不支持Array.indexOf
　　解决方案
if (!Array.prototype.indexOf)
Array.prototype.indexOf = function(elt /*, from*/)
var len = this.length &&& 0;
var from = Number(arguments[1]) || 0;
from = (from & 0)
? Math.ceil(from)
: Math.floor(from);
if (from & 0)
for (; from & from++)
if (from in this &&
this[from] === elt)
return -1;
问题：IE8-不支持canvas
　　解决方案：引入excanvas.js。但是有一些注意事项参考/blog/1618298
　　主要的注意事项有：
　　1.必须在canvas标签加载完成后再引入excanvas.js
　　2.与jquery混合使用的时候必须使用jquery1.7以上的版本
问题：IE8-不支持css媒体查询
　　解决方案，引入respond.js
我把上面三个IE支持放在一起命名为Array.indexOf_excanvas_respond.js
/*! 解决IE8不支持数组的indexOf方法的处理，需要放在所有js的开头 */
if (!Array.prototype.indexOf)
Array.prototype.indexOf = function(elt /*, from*/)
var len = this.length &&& 0;
var from = Number(arguments[1]) || 0;
from = (from & 0)
? Math.ceil(from)
: Math.floor(from);
if (from & 0)
for (; from & from++)
if (from in this &&
this[from] === elt)
return -1;
//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 only support repeat.
// * 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 mr = m.
var ms = m.
var mc = m.
var abs = m.
var sqrt = m.
// this is used for sub pixel precision
var Z = 10;
var Z2 = Z / 2;
var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1];
* 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.
* 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
* @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)));
function encodeHtmlAttribute(s) {
return String(s).replace(/&/g, '&').replace(/"/g, '&');
function addNamespace(doc, prefix, urn) {
if (!doc.namespaces[prefix]) {
doc.namespaces.add(prefix, urn, '#default#VML');
function addNamespacesAndStylesheet(doc) {
addNamespace(doc, 'g_vml_', 'urn:schemas-microsoft-com:vml');
addNamespace(doc, 'g_o_', 'urn:schemas-microsoft-com:office:office');
// 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-overflow:' +
// default size is 300x150 in Gecko and Opera
'text-align:width:300height:150px}';
// Add namespaces and stylesheet at startup.
addNamespacesAndStylesheet(document);
var G_vmlCanvasManager_ = {
init: function(opt_doc) {
var doc = opt_doc ||
// Create a dummy element so that IE will allow canvas elements to be
// recognized.
doc.createElement('canvas');
doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
init_: function(doc) {
// find all canvas elements
var els = doc.getElementsByTagName('canvas');
for (var i = 0; i & els. 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 = getC
// Add namespaces and stylesheet to document of the element.
addNamespacesAndStylesheet(el.ownerDocument);
// 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.
if (attrs.width && attrs.width.specified) {
// TODO: use runtimeStyle and coordsize
// el.getContext().setWidth_(attrs.width.nodeValue);
el.style.width = attrs.width.nodeValue + 'px';
el.width = el.clientW
if (attrs.height && attrs.height.specified) {
// TODO: use runtimeStyle and coordsize
// el.getContext().setHeight_(attrs.height.nodeValue);
el.style.height = attrs.height.nodeValue + 'px';
el.height = el.clientH
//el.getContext().setCoordsize_()
function onPropertyChange(e) {
var el = e.srcE
switch (e.propertyName) {
case 'width':
el.getContext().clearRect();
el.style.width = el.attributes.width.nodeValue + 'px';
// In IE8 this does not trigger onresize.
el.firstChild.style.width =
el.clientWidth + 'px';
case 'height':
el.getContext().clearRect();
el.style.height = el.attributes.height.nodeValue + 'px';
el.firstChild.style.height = el.clientHeight + 'px';
function onResize(e) {
var el = e.srcE
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 decToHex = [];
for (var i = 0; i & 16; i++) {
for (var j = 0; j & 16; j++) {
decToHex[i * 16 + j] = i.toString(16) + j.toString(16);
function createMatrixIdentity() {
[1, 0, 0],
[0, 1, 0],
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] =
function copyState(o1, o2) {
o2.fillStyle
= o1.fillS
o2.lineCap
= o1.lineC
o2.lineJoin
= o1.lineJ
o2.lineWidth
= o1.lineW
o2.miterLimit
= o1.miterL
o2.shadowBlur
= o1.shadowB
o2.shadowColor
= o1.shadowC
o2.shadowOffsetX = o1.shadowOffsetX;
o2.shadowOffsetY = o1.shadowOffsetY;
o2.strokeStyle
= o1.strokeS
o2.globalAlpha
= o1.globalA
o2.textAlign
= o1.textA
o2.textBaseline
= o1.textB
o2.arcScaleX_
= o1.arcScaleX_;
o2.arcScaleY_
= o1.arcScaleY_;
o2.lineScale_
= o1.lineScale_;
var colorData = {
aliceblue: '#F0F8FF',
antiquewhite: '#FAEBD7',
aquamarine: '#7FFFD4',
azure: '#F0FFFF',
beige: '#F5F5DC',
bisque: '#FFE4C4',
black: '#000000',
blanchedalmond: '#FFEBCD',
blueviolet: '#8A2BE2',
brown: '#A52A2A',
burlywood: '#DEB887',
cadetblue: '#5F9EA0',
chartreuse: '#7FFF00',
chocolate: '#D2691E',
coral: '#FF7F50',
cornflowerblue: '#6495ED',
cornsilk: '#FFF8DC',
crimson: '#DC143C',
cyan: '#00FFFF',
darkblue: '#00008B',
darkcyan: '#008B8B',
darkgoldenrod: '#B8860B',
darkgray: '#A9A9A9',
darkgreen: '#006400',
darkgrey: '#A9A9A9',
darkkhaki: '#BDB76B',
darkmagenta: '#8B008B',
darkolivegreen: '#556B2F',
darkorange: '#FF8C00',
darkorchid: '#9932CC',
darkred: '#8B0000',
darksalmon: '#E9967A',
darkseagreen: '#8FBC8F',
darkslateblue: '#483D8B',
darkslategray: '#2F4F4F',
darkslategrey: '#2F4F4F',
darkturquoise: '#00CED1',
darkviolet: '#9400D3',
deeppink: '#FF1493',
deepskyblue: '#00BFFF',
dimgray: '#696969',
dimgrey: '#696969',
dodgerblue: '#1E90FF',
firebrick: '#B22222',
floralwhite: '#FFFAF0',
forestgreen: '#228B22',
gainsboro: '#DCDCDC',
ghostwhite: '#F8F8FF',
gold: '#FFD700',
goldenrod: '#DAA520',
grey: '#808080',
greenyellow: '#ADFF2F',
honeydew: '#F0FFF0',
hotpink: '#FF69B4',
indianred: '#CD5C5C',
indigo: '#4B0082',
ivory: '#FFFFF0',
khaki: '#F0E68C',
lavender: '#E6E6FA',
lavenderblush: '#FFF0F5',
lawngreen: '#7CFC00',
lemonchiffon: '#FFFACD',
lightblue: '#ADD8E6',
lightcoral: '#F08080',
lightcyan: '#E0FFFF',
lightgoldenrodyellow: '#FAFAD2',
lightgreen: '#90EE90',
lightgrey: '#D3D3D3',
lightpink: '#FFB6C1',
lightsalmon: '#FFA07A',
lightseagreen: '#20B2AA',
lightskyblue: '#87CEFA',
lightslategray: '#778899',
lightslategrey: '#778899',
lightsteelblue: '#B0C4DE',
lightyellow: '#FFFFE0',
limegreen: '#32CD32',
linen: '#FAF0E6',
magenta: '#FF00FF',
mediumaquamarine: '#66CDAA',
mediumblue: '#0000CD',
mediumorchid: '#BA55D3',
mediumpurple: '#9370DB',
mediumseagreen: '#3CB371',
mediumslateblue: '#7B68EE',
mediumspringgreen: '#00FA9A',
mediumturquoise: '#48D1CC',
mediumvioletred: '#C71585',
midnightblue: '#191970',
mintcream: '#F5FFFA',
mistyrose: '#FFE4E1',
moccasin: '#FFE4B5',
navajowhite: '#FFDEAD',
oldlace: '#FDF5E6',
olivedrab: '#6B8E23',
orange: '#FFA500',
orangered: '#FF4500',
orchid: '#DA70D6',
palegoldenrod: '#EEE8AA',
palegreen: '#98FB98',
paleturquoise: '#AFEEEE',
palevioletred: '#DB7093',
papayawhip: '#FFEFD5',
peachpuff: '#FFDAB9',
peru: '#CD853F',
pink: '#FFC0CB',
plum: '#DDA0DD',
powderblue: '#B0E0E6',
rosybrown: '#BC8F8F',
royalblue: '#4169E1',
saddlebrown: '#8B4513',
salmon: '#FA8072',
sandybrown: '#F4A460',
seagreen: '#2E8B57',
seashell: '#FFF5EE',
sienna: '#A0522D',
skyblue: '#87CEEB',
slateblue: '#6A5ACD',
slategray: '#708090',
slategrey: '#708090',
snow: '#FFFAFA',
springgreen: '#00FF7F',
steelblue: '#4682B4',
tan: '#D2B48C',
thistle: '#D8BFD8',
tomato: '#FF6347',
turquoise: '#40E0D0',
violet: '#EE82EE',
wheat: '#F5DEB3',
whitesmoke: '#F5F5F5',
yellowgreen: '#9ACD32'
function getRgbHslContent(styleString) {
var start = styleString.indexOf('(', 3);
var end = styleString.indexOf(')', start + 1);
var parts = styleString.substring(start + 1, end).split(',');
// add alpha if needed
if (parts.length != 4 || styleString.charAt(3) != 'a') {
parts[3] = 1;
function percent(s) {
return parseFloat(s) / 100;
function clamp(v, min, max) {
return Math.min(max, Math.max(min, v));
function hslToRgb(parts){
var r, g, b, h, s,
h = parseFloat(parts[0]) / 360 % 360;
if (h & 0)
s = clamp(percent(parts[1]), 0, 1);
l = clamp(percent(parts[2]), 0, 1);
if (s == 0) {
r = g = b = // achromatic
var q = l & 0.5 ? l * (1 + s) : l + s - l *
var p = 2 * l -
r = hueToRgb(p, q, h + 1 / 3);
g = hueToRgb(p, q, h);
b = hueToRgb(p, q, h - 1 / 3);
return '#' + decToHex[Math.floor(r * 255)] +
decToHex[Math.floor(g * 255)] +
decToHex[Math.floor(b * 255)];
function hueToRgb(m1, m2, h) {
if (h & 0)
if (h & 1)
if (6 * h & 1)
return m1 + (m2 - m1) * 6 *
else if (2 * h & 1)
return m2;
else if (3 * h & 2)
return m1 + (m2 - m1) * (2 / 3 - h) * 6;
return m1;
var processStyleCache = {};
function processStyle(styleString) {
if (styleString in processStyleCache) {
return processStyleCache[styleString];
var str, alpha = 1;
styleString = String(styleString);
if (styleString.charAt(0) == '#') {
str = styleS
} else if (/^rgb/.test(styleString)) {
var parts = getRgbHslContent(styleString);
var str = '#',
for (var i = 0; i & 3; i++) {
if (parts[i].indexOf('%') != -1) {
n = Math.floor(percent(parts[i]) * 255);
n = +parts[i];
str += decToHex[clamp(n, 0, 255)];
alpha = +parts[3];
} else if (/^hsl/.test(styleString)) {
var parts = getRgbHslContent(styleString);
str = hslToRgb(parts);
alpha = parts[3];
str = colorData[styleString] || styleS
return processStyleCache[styleString] = {color: str, alpha: alpha};
var DEFAULT_STYLE = {
style: 'normal',
variant: 'normal',
weight: 'normal',
family: 'sans-serif'
// Internal text style cache
var fontStyleCache = {};
function processFontStyle(styleString) {
if (fontStyleCache[styleString]) {
return fontStyleCache[styleString];
var el = document.createElement('div');
var style = el.
style.font = styleS
} catch (ex) {
// Ignore failures to set to invalid font.
return fontStyleCache[styleString] = {
style: style.fontStyle || DEFAULT_STYLE.style,
variant: style.fontVariant || DEFAULT_STYLE.variant,
weight: style.fontWeight || DEFAULT_STYLE.weight,
size: style.fontSize || DEFAULT_STYLE.size,
family: style.fontFamily || DEFAULT_STYLE.family
function getComputedStyle(style, element) {
var computedStyle = {};
for (var p in style) {
computedStyle[p] = style[p];
// Compute the size
var canvasFontSize = parseFloat(element.currentStyle.fontSize),
fontSize = parseFloat(style.size);
if (typeof style.size == 'number') {
computedStyle.size = style.
} else if (style.size.indexOf('px') != -1) {
computedStyle.size = fontS
} else if (style.size.indexOf('em') != -1) {
computedStyle.size = canvasFontSize * fontS
} else if(style.size.indexOf('%') != -1) {
computedStyle.size = (canvasFontSize / 100) * fontS
} else if (style.size.indexOf('pt') != -1) {
computedStyle.size = fontSize / .75;
computedStyle.size = canvasFontS
// Different scaling between normal text and VML text. This was found using
// trial and error to get the same size as non VML text.
computedStyle.size *= 0.981;
return computedS
function buildStyle(style) {
return style.style + ' ' + style.variant + ' ' + style.weight + ' ' +
style.size + 'px ' + style.
var lineCapMap = {
'butt': 'flat',
'round': 'round'
function processLineCap(lineCap) {
return lineCapMap[lineCap] || 'square';
* This class implements CanvasRenderingContext2D interface as described by
* the WHATWG.
* @param {HTMLElement} canvasElement The element that the 2D context should
* be associated with
function CanvasRenderingContext2D_(canvasElement) {
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.font = '10px sans-serif';
this.textAlign = 'left';
this.textBaseline = 'alphabetic';
this.canvas = canvasE
var cssText = 'width:' + canvasElement.clientWidth + 'height:' +
canvasElement.clientHeight + 'overflow:position:absolute';
var el = canvasElement.ownerDocument.createElement('div');
el.style.cssText = cssT
canvasElement.appendChild(el);
var overlayEl = el.cloneNode(false);
// Use a non transparent background.
overlayEl.style.backgroundColor = 'red';
overlayEl.style.filter = 'alpha(opacity=0)';
canvasElement.appendChild(overlayEl);
this.element_ =
this.arcScaleX_ = 1;
this.arcScaleY_ = 1;
this.lineScale_ = 1;
var contextPrototype = CanvasRenderingContext2D_.
contextPrototype.clearRect = function() {
if (this.textMeasureEl_) {
this.textMeasureEl_.removeNode(true);
this.textMeasureEl_ = null;
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 = getCoords(this, 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 = getCoords(this, 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,
var p = getCoords(this, aX, aY);
var cp1 = getCoords(this, aCP1x, aCP1y);
var cp2 = getCoords(this, 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,
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 = getCoords(this, aCPx, aCPy);
var p = getCoords(this, 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 = getCoords(this, aX, aY);
var pStart = getCoords(this, xStart, yStart);
var pEnd = getCoords(this, xEnd, yEnd);
this.currentPath_.push({type: arcType,
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_ = oldP
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_ = oldP
contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
var gradient = new CanvasGradient_('gradient');
gradient.x0_ = aX0;
gradient.y0_ = aY0;
gradient.x1_ = aX1;
gradient.y1_ = aY1;
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;
contextPrototype.drawImage = function(image, var_args) {
var dx, dy, dw, dh, sx, sy, sw,
// to find the original width we overide the width and height
var oldRuntimeWidth = image.runtimeStyle.
var oldRuntimeHeight = image.runtimeStyle.
image.runtimeStyle.width = 'auto';
image.runtimeStyle.height = 'auto';
// get the original size
var w = image.
var h = image.
// and remove overides
image.runtimeStyle.width = oldRuntimeW
image.runtimeStyle.height = oldRuntimeH
if (arguments.length == 3) {
dx = arguments[1];
dy = arguments[2];
sx = sy = 0;
} else if (arguments.length == 5) {
dx = arguments[1];
dy = arguments[2];
dw = arguments[3];
dh = arguments[4];
sx = sy = 0;
} 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];
throw Error('Invalid number of arguments');
var d = getCoords(this, 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, 'height:', H, 'position:');
// 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] ||
this.m_[1][1] != 1 || this.m_[1][0]) {
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 c2 = getCoords(this, dx + dw, dy);
var c3 = getCoords(this, dx, dy + dh);
var c4 = getCoords(this, 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');");
vmlStr.push('top:', mr(d.y / Z), 'left:', mr(d.x / Z), '');
vmlStr.push(' "&' ,
'&g_vml_:image src="', image.src, '"',
' style="width:', Z * dw, '',
' 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 W = 10;
var H = 10;
lineStr.push('&g_vml_:shape',
' filled="', !!aFill, '"',
' style="position:width:', W, 'height:', H, '"',
' 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_. i++) {
var p = this.currentPath_[i];
switch (p.type) {
case 'moveTo':
lineStr.push(' m ', mr(p.x), ',', mr(p.y));
case 'lineTo':
lineStr.push(' l ', mr(p.x), ',', mr(p.y));
case 'close':
lineStr.push(' x ');
case 'bezierCurveTo':
lineStr.push(' c ',
mr(p.cp1x), ',', mr(p.cp1y), ',',
mr(p.cp2x), ',', mr(p.cp2y), ',',
mr(p.x), ',', mr(p.y));
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));
// TODO: Following is broken for curves due to
move to proper paths.
// Figure out dimensions so we can do gradient fills
// properly
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) {
appendStroke(this, lineStr);
appendFill(this, lineStr, min, max);
lineStr.push('&/g_vml_:shape&');
this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
function appendStroke(ctx, lineStr) {
var a = processStyle(ctx.strokeStyle);
var color = a.
var opacity = a.alpha * ctx.globalA
var lineWidth = ctx.lineScale_ * ctx.lineW
// 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 *= lineW
lineStr.push(
'&g_vml_:stroke',
' opacity="', opacity, '"',
' joinstyle="', ctx.lineJoin, '"',
' miterlimit="', ctx.miterLimit, '"',
' endcap="', processLineCap(ctx.lineCap), '"',
' weight="', lineWidth, 'px"',
' color="', color, '" /&'
function appendFill(ctx, lineStr, min, max) {
var fillStyle = ctx.fillS
var arcScaleX = ctx.arcScaleX_;
var arcScaleY = ctx.arcScaleY_;
var width = max.x - min.x;
var height = max.y - min.y;
if (fillStyle instanceof CanvasGradient_) {
// TODO: Gradients transformed with the transformation matrix.
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_ / arcScaleX;
var y0 = fillStyle.y0_ / arcScaleY;
var x1 = fillStyle.x1_ / arcScaleX;
var y1 = fillStyle.y1_ / arcScaleY;
var p0 = getCoords(ctx, x0, y0);
var p1 = getCoords(ctx, 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;
var p0 = getCoords(ctx, fillStyle.x0_, fillStyle.y0_);
x: (p0.x - min.x) / width,
y: (p0.y - min.y) / height
/= arcScaleX * Z;
height /= arcScaleY * Z;
var dimension = m.max(width, height);
shift = 2 * fillStyle.r0_ /
expansion = 2 * fillStyle.r1_ / dimension -
// 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.
var length = stops.
var color1 = stops[0].
var color2 = stops[length - 1].
var opacity1 = stops[0].alpha * ctx.globalA
var opacity2 = stops[length - 1].alpha * ctx.globalA
var colors = [];
for (var i = 0; i & 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 if (fillStyle instanceof CanvasPattern_) {
if (width && height) {
var deltaLeft = -min.x;
var deltaTop = -min.y;
lineStr.push('&g_vml_:fill',
' position="',
deltaLeft / width * arcScaleX * arcScaleX, ',',
deltaTop / height * arcScaleY * arcScaleY, '"',
' type="tile"',
// TODO: Figure out the correct size to fit the scale.
//' size="', w, 'px ', h, 'px"',
' src="', fillStyle.src_, '" /&');
var a = processStyle(ctx.fillStyle);
var color = a.
var opacity = a.alpha * ctx.globalA
lineStr.push('&g_vml_:fill color="', color, '" opacity="', opacity,
contextPrototype.fill = function() {
this.stroke(true);
contextPrototype.closePath = function() {
this.currentPath_.push({type: 'close'});
function getCoords(ctx, aX, aY) {
var m = ctx.m_;
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() {
if (this.aStack_.length) {
copyState(this.aStack_.pop(), this);
this.m_ = this.mStack_.pop();
function matrixIsFinite(m) {
return isFinite(m[0][0]) && isFinite(m[0][1]) &&
isFinite(m[1][0]) && isFinite(m[1][1]) &&
isFinite(m[2][0]) && isFinite(m[2][1]);
function setM(ctx, m, updateLineScale) {
if (!matrixIsFinite(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 = [
[aX, aY, 1]
setM(this, matrixMultiply(m1, this.m_), false);
contextPrototype.rotate = function(aRot) {
var c = mc(aRot);
var s = ms(aRot);
var m1 = [
[-s, c, 0],
setM(this, matrixMultiply(m1, this.m_), false);
contextPrototype.scale = function(aX, aY) {
this.arcScaleX_ *= aX;
this.arcScaleY_ *= aY;
var m1 = [
setM(this, matrixMultiply(m1, this.m_), true);
contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
var m1 = [
[m11, m12, 0],
[m21, m22, 0],
setM(this, matrixMultiply(m1, this.m_), true);
contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
[m11, m12, 0],
[m21, m22, 0],
setM(this, m, true);
* The text drawing function.
* The maxWidth argument isn't taken in account, since no browser supports
contextPrototype.drawText_ = function(text, x, y, maxWidth, stroke) {
var m = this.m_,
delta = 1000,
right = delta,
offset = {x: 0, y: 0},
lineStr = [];
var fontStyle = getComputedStyle(processFontStyle(this.font),
this.element_);
var fontStyleString = buildStyle(fontStyle);
var elementStyle = this.element_.currentS
var textAlign = this.textAlign.toLowerCase();
switch (textAlign) {
case 'left':
case 'center':
case 'right':
case 'end':
textAlign = elementStyle.direction == 'ltr' ? 'right' : 'left';
case 'start':
textAlign = elementStyle.direction == 'rtl' ? 'right' : 'left';
textAlign = 'left';
// 1.75 is an arbitrary number, as there is no info about the text baseline
switch (this.textBaseline) {
case 'hanging':
case 'top':
offset.y = fontStyle.size / 1.75;
case 'middle':
case null:
case 'alphabetic':
case 'ideographic':
case 'bottom':
offset.y = -fontStyle.size / 2.25;
switch(textAlign) {
case 'right':
right = 0.05;
case 'center':
left = right = delta / 2;
var d = getCoords(this, x + offset.x, y + offset.y);
lineStr.push('&g_vml_:line from="', -left ,' 0" to="', right ,' 0.05" ',
' coordsize="100 100" coordorigin="0 0"',
' filled="', !stroke, '" stroked="', !!stroke,
'" style="position:width:1height:1"&');
if (stroke) {
appendStroke(this, lineStr);
// TODO: Fix the min and max params.
appendFill(this, lineStr, {x: -left, y: 0},
{x: right, y: fontStyle.size});
var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' +
m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0';
var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z);
lineStr.push('&g_vml_:skew on="t" matrix="', skewM ,'" ',
' offset="', skewOffset, '" origin="', left ,' 0" /&',
'&g_vml_:path textpathok="true" /&',
'&g_vml_:textpath on="true" string="',
encodeHtmlAttribute(text),
'" style="v-text-align:', textAlign,
';font:', encodeHtmlAttribute(fontStyleString),
'" /&&/g_vml_:line&');
this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
contextPrototype.fillText = function(text, x, y, maxWidth) {
this.drawText_(text, x, y, maxWidth, false);
contextPrototype.strokeText = function(text, x, y, maxWidth) {
this.drawText_(text, x, y, maxWidth, true);
contextPrototype.measureText = function(text) {
if (!this.textMeasureEl_) {
var s = '&span style="position:' +
'top:-20000left:0;padding:0;margin:0;border:' +
'white-space:"&&/span&';
this.element_.insertAdjacentHTML('beforeEnd', s);
this.textMeasureEl_ = this.element_.lastC
var doc = this.element_.ownerD
this.textMeasureEl_.innerHTML = '';
this.textMeasureEl_.style.font = this.
// Don't use innerHTML or innerText because they allow markup/whitespace.
this.textMeasureEl_.appendChild(doc.createTextNode(text));
return {width: this.textMeasureEl_.offsetWidth};
/******** STUBS ********/
contextPrototype.clip = function() {
// TODO: Implement
contextPrototype.arcTo = function() {
// TODO: Implement
contextPrototype.createPattern = function(image, repetition) {
return new CanvasPattern_(image, repetition);
// Gradient / Pattern Stubs
function CanvasGradient_(aType) {
this.type_ = aT
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_(image, repetition) {
assertImageIsValid(image);
switch (repetition) {
case 'repeat':
case null:
this.repetition_ = 'repeat';
case 'repeat-x':
case 'repeat-y':
case 'no-repeat':
this.repetition_ =
throwException('SYNTAX_ERR');
this.src_ = image.
this.width_ = image.
this.height_ = image.
function throwException(s) {
throw new DOMException_(s);
function assertImageIsValid(img) {
if (!img || img.nodeType != 1 || img.tagName != 'IMG') {
throwException('TYPE_MISMATCH_ERR');
if (img.readyState != 'complete') {
throwException('INVALID_STATE_ERR');
function DOMException_(s) {
this.code = this[s];
this.message = s +': DOM Exception ' + this.
var p = DOMException_.prototype = new E
p.INDEX_SIZE_ERR = 1;
p.DOMSTRING_SIZE_ERR = 2;
p.HIERARCHY_REQUEST_ERR = 3;
p.WRONG_DOCUMENT_ERR = 4;
p.INVALID_CHARACTER_ERR = 5;
p.NO_DATA_ALLOWED_ERR = 6;
p.NO_MODIFICATION_ALLOWED_ERR = 7;
p.NOT_FOUND_ERR = 8;
p.NOT_SUPPORTED_ERR = 9;
p.INUSE_ATTRIBUTE_ERR = 10;
p.INVALID_STATE_ERR = 11;
p.SYNTAX_ERR = 12;
p.INVALID_MODIFICATION_ERR = 13;
p.NAMESPACE_ERR = 14;
p.INVALID_ACCESS_ERR = 15;
p.VALIDATION_ERR = 16;
p.TYPE_MISMATCH_ERR = 17;
// set up externs
G_vmlCanvasManager = G_vmlCanvasManager_;
CanvasRenderingContext2D = CanvasRenderingContext2D_;
CanvasGradient = CanvasGradient_;
CanvasPattern = CanvasPattern_;
DOMException = DOMException_;
/*! Respond.js v1.4.2: min/max-width media query polyfill
* Copyright 2014 Scott Jehl
* Licensed under MIT
* http://j.mp/respondjs */
/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
/*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */
(function(w) {
"use strict";
w.matchMedia = w.matchMedia || function(doc, undefined) {
var bool, docElem = doc.documentElement, refNode = docElem.firstElementChild || docElem.firstChild, fakeBody = doc.createElement("body"), div = doc.createElement("div");
div.id = "mq-test-1";
div.style.cssText = "position:top:-100em";
fakeBody.style.background = "none";
fakeBody.appendChild(div);
return function(q) {
div.innerHTML = '&&style media="' + q + '"& #mq-test-1 { width: 42 }&/style&';
docElem.insertBefore(fakeBody, refNode);
bool = div.offsetWidth === 42;
docElem.removeChild(fakeBody);
matches: bool,
}(w.document);
(function(w) {
"use strict";
var respond = {};
w.respond =
respond.update = function() {};
var requestQueue = [], xmlHttp = function() {
var xmlhttpmethod = false;
xmlhttpmethod = new w.XMLHttpRequest();
} catch (e) {
xmlhttpmethod = new w.ActiveXObject("Microsoft.XMLHTTP");
return function() {
}(), ajax = function(url, callback) {
var req = xmlHttp();
if (!req) {
req.open("GET", url, true);
req.onreadystatechange = function() {
if (req.readyState !== 4 || req.status !== 200 && req.status !== 304) {
callback(req.responseText);
if (req.readyState === 4) {
req.send(null);
}, isUnsupportedMediaQuery = function(query) {
return query.replace(respond.regex.minmaxwh, "").match(respond.regex.other);
respond.ajax =
respond.queue = requestQ
respond.unsupportedmq = isUnsupportedMediaQ
respond.regex = {
media: /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,
keyframes: /@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,
comments: /\/\*[^*]*\*+([^/][^*]*\*+)*\//gi,
urls: /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,
findStyles: /@media *([^\{]+)\{([\S\s]+?)$/,
only: /(only\s+)?([a-zA-Z]+)\s?/,
minw: /\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,
maxw: /\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,
minmaxwh: /\(\s*m(in|ax)\-(height|width)\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/gi,
other: /\([^\)]*\)/g
respond.mediaQueriesSupported = w.matchMedia && w.matchMedia("only all") !== null && w.matchMedia("only all").
if (respond.mediaQueriesSupported) {
var doc = w.document, docElem = doc.documentElement, mediastyles = [], rules = [], appendedEls = [], parsedSheets = {}, resizeThrottle = 30, head = doc.getElementsByTagName("head")[0] || docElem, base = doc.getElementsByTagName("base")[0], links = head.getElementsByTagName("link"), lastCall, resizeDefer, eminpx, getEmValue = function() {
var ret, div = doc.createElement("div"), body = doc.body, originalHTMLFontSize = docElem.style.fontSize, originalBodyFontSize = body && body.style.fontSize, fakeUsed = false;
div.style.cssText = "position:font-size:1width:1em";
if (!body) {
body = fakeUsed = doc.createElement("body");
body.style.background = "none";
docElem.style.fontSize = "100%";
body.style.fontSize = "100%";
body.appendChild(div);
if (fakeUsed) {
docElem.insertBefore(body, docElem.firstChild);
ret = div.offsetW
if (fakeUsed) {
docElem.removeChild(body);
body.removeChild(div);
docElem.style.fontSize = originalHTMLFontS
if (originalBodyFontSize) {
body.style.fontSize = originalBodyFontS
ret = eminpx = parseFloat(ret);
}, applyMedia = function(fromResize) {
var name = "clientWidth", docElemProp = docElem[name], currWidth = patMode === "CSS1Compat" && docElemProp || doc.body[name] || docElemProp, styleBlocks = {}, lastLink = links[links.length - 1], now = new Date().getTime();
if (fromResize && lastCall && now - lastCall & resizeThrottle) {
w.clearTimeout(resizeDefer);
resizeDefer = w.setTimeout(applyMedia, resizeThrottle);
lastCall =
for (var i in mediastyles) {
if (mediastyles.hasOwnProperty(i)) {
var thisstyle = mediastyles[i], min = thisstyle.minw, max = thisstyle.maxw, minnull = min === null, maxnull = max === null, em = "em";
if (!!min) {
min = parseFloat(min) * (min.indexOf(em) & -1 ? eminpx || getEmValue() : 1);
if (!!max) {
max = parseFloat(max) * (max.indexOf(em) & -1 ? eminpx || getEmValue() : 1);
if (!thisstyle.hasquery || (!minnull || !maxnull) && (minnull || currWidth &= min) && (maxnull || currWidth &= max)) {
if (!styleBlocks[thisstyle.media]) {
styleBlocks[thisstyle.media] = [];
styleBlocks[thisstyle.media].push(rules[thisstyle.rules]);
for (var j in appendedEls) {
if (appendedEls.hasOwnProperty(j)) {
if (appendedEls[j] && appendedEls[j].parentNode === head) {
head.removeChild(appendedEls[j]);
appendedEls.length = 0;
for (var k in styleBlocks) {
if (styleBlocks.hasOwnProperty(k)) {
var ss = doc.createElement("style"), css = styleBlocks[k].join("\n");
ss.type = "text/css";
ss.media =
head.insertBefore(ss, lastLink.nextSibling);
if (ss.styleSheet) {
ss.styleSheet.cssText =
ss.appendChild(doc.createTextNode(css));
appendedEls.push(ss);
}, translate = function(styles, href, media) {
var qs = styles.replace(ments, "").replace(respond.regex.keyframes, "").match(respond.regex.media), ql = qs && qs.length || 0;
href = href.substring(0, href.lastIndexOf("/"));
var repUrls = function(css) {
return css.replace(respond.regex.urls, "$1" + href + "$2$3");
}, useMedia = !ql &&
if (href.length) {
href += "/";
if (useMedia) {
for (var i = 0; i & i++) {
var fullq, thisq, eachq,
if (useMedia) {
rules.push(repUrls(styles));
fullq = qs[i].match(respond.regex.findStyles) && RegExp.$1;
rules.push(RegExp.$2 && repUrls(RegExp.$2));
eachq = fullq.split(",");
eql = eachq.
for (var j = 0; j & j++) {
thisq = eachq[j];
if (isUnsupportedMediaQuery(thisq)) {
mediastyles.push({
media: thisq.split("(")[0].match(respond.regex.only) && RegExp.$2 || "all",
rules: rules.length - 1,
hasquery: thisq.indexOf("(") & -1,
minw: thisq.match(respond.regex.minw) && parseFloat(RegExp.$1) + (RegExp.$2 || ""),
maxw: thisq.match(respond.regex.maxw) && parseFloat(RegExp.$1) + (RegExp.$2 || "")
applyMedia();
}, makeRequests = function() {
if (requestQueue.length) {
var thisRequest = requestQueue.shift();
ajax(thisRequest.href, function(styles) {
translate(styles, thisRequest.href, thisRequest.media);
parsedSheets[thisRequest.href] = true;
w.setTimeout(function() {
makeRequests();
}, ripCSS = function() {
for (var i = 0; i & links. i++) {
var sheet = links[i], href = sheet.href, media = sheet.media, isCSS = sheet.rel && sheet.rel.toLowerCase() === "stylesheet";
if (!!href && isCSS && !parsedSheets[href]) {
if (sheet.styleSheet && sheet.styleSheet.rawCssText) {
translate(sheet.styleSheet.rawCssText, href, media);
parsedSheets[href] = true;
if (!/^([a-zA-Z:]*\/\/)/.test(href) && !base || href.replace(RegExp.$1, "").split("/")[0] === w.location.host) {
if (href.substring(0, 2) === "//") {
href = w.location.protocol +
requestQueue.push({
href: href,
media: media
makeRequests();
respond.update = ripCSS;
respond.getEmValue = getEmV
function callMedia() {
applyMedia(true);
if (w.addEventListener) {
w.addEventListener("resize", callMedia, false);
} else if (w.attachEvent) {
w.attachEvent("onresize", callMedia);
使用的时候判断
&!-- [if lte IE 8]&&script src="Array.indexOf_excanvas_respond.js"&&/script&&![endif] --&
问题：IE8-不支持trim
　　如果引入了jQuery
if(!String.prototype.trim){
String.prototype.trim = function(){return $.trim(this);}
　　如果没有引入jQuery，参考其做法
if(!String.prototype.trim){
var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
function trim( text ) {
return text == null ?
( text + "" ).replace( rtrim, "" );
String.prototype.trim = function(){return trim(this);}
问题：IE8-不支持css3样式
　　原来比较好的方式是ie-css3.js但是支持有限并且限制也很多。现今最好的是PIE.htc。你可以进入看到网站的题头已经说明ie-css3已经过时了。
　　使用方式有两种：
　　PIE.htc
&!DOCTYPE html&
&meta content="text/ charset=UTF-8" http-equiv="content-type"&
&title&PIE CSS3 Quick Demo&/title&
&style type="text/css"&
position: absolute;
left: 20px;
top: 20px;
width: 200px;
text-align: center;
padding: 60px 0;
background: #EEE;
border: 1px solid #999;
font-size: 18px;
/* default CSS3 values: */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0 2px 3px;
-moz-box-shadow: #666 0 2px 3px;
box-shadow: #666 0 2px 3px;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393));
background: -webkit-linear-gradient(#9F9, #393);
background: -moz-linear-gradient(#9F9, #393);
background: -ms-linear-gradient(#9F9, #393);
background: -o-linear-gradient(#9F9, #393);
-pie-background: linear-gradient(#9F9, #393);
behavior: url(../build/PIE.htc);
&div id="target"&
Mmmmm, pie.
　　其中behavior属性的的路径根据自己的情况定。效果如下
　　注意：详细可参考中已知的一些问题(下面的问题是本人认为比较重要的问题和别人没有提到的问题)
　　1.IE浏览器的behavior 属性是相对于HTML文档而言的，与CSS其他的属性不一样，不是相对于CSS文档而言的；
　　2.使用PIE实现IE下的CSS3渲染（其他方法也是一样），只能使用缩写的形式，比如border-top-left-radius是不支持的。
　　3.实现的border-radius对overflow:不起作用
　　3.最好不要和滤镜同时使用。比如，下面css代码想实现圆角和背景半透明
background: url(../imgs/news-circle.png) no-repeat #000;
background: url(../imgs/news-circle.png) no-repeat rgba(0,0,0,0.5);
filter: alpha(opacity=50);
-ms-border-radius: 350px 350px 0px 0
border-radius: 350px 350px 0px 0
behavior: url(PIE/PIE.htc);/*路径相对于html页面而言*/
　　本来前面三句话就实现IE8-下的背景半透明，但是后面使用PIE.htc后反而背景不透明了，效果如下　　
　　然后完全使用PIE的方式
background: url(../imgs/news-circle.png) no-repeat rgba(0,0,0,0.5);
-pie-background: url(assets/common/imgs/news-circle.png) no-repeat rgba(0,0,0,0.5); /*路径相对于html页面而言*/
-ms-border-radius: 350px 350px 0px 0
border-radius: 350px 350px 0px 0
behavior: url(PIE/PIE.htc);/*路径相对于html页面而言*/
　　效果才正常
&　　PIE.js　　
&!DOCTYPE html&
&meta content="text/ charset=UTF-8" http-equiv="content-type"&
&title&PIE CSS3 Quick Demo&/title&
&style type="text/css"&
position: absolute;
left: 20px;
top: 20px;
width: 200px;
text-align: center;
padding: 60px 0;
background: #EEE;
border: 1px solid #999;
font-size: 18px;
/* default CSS3 values: */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0 2px 3px;
-moz-box-shadow: #666 0 2px 3px;
box-shadow: #666 0 2px 3px;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393));
background: -webkit-linear-gradient(#9F9, #393);
background: -moz-linear-gradient(#9F9, #393);
background: -ms-linear-gradient(#9F9, #393);
background: -o-linear-gradient(#9F9, #393);
-pie-background: linear-gradient(#9F9, #393);
/*behavior: url(../build/PIE.htc);*/
&script type="text/javascript" src="jquery-1.11.2.min.js"&&/script&
&script type="text/javascript" src="../build/PIE.js"&&/script&
&script type="text/javascript"&
$( function() {
$('#target').each(function() {
PIE.attach(this);
&div id="target"&
Mmmmm, pie.
　　效果一样。根据情况自行选择使用方式。比较推荐使用PIE.htc的方式，毕竟不用额外增加js。
问题：IE8 缓存ajax get请求结果导致ajax都不进入后台就直接取缓存结果
　　这是在用nodejs做个人网站时发现的。IE7/IE9+则没有改问题。本人做了一个登陆页，其中有一段js用来处理如果用户在登陆后的一段有效时间内再次登陆则可以自动跳转到主页。源码如下
type: "get",
success: function(result){
if(result.loadStatus == "loaded"){
window.location = ctx + "/home";
　　而主页会判断session是否匹配，如果不匹配则会将状态更改result.loadStatus = "unload";然后跳转回登陆页（这个处理合不合适先不说）。按照逻辑来说是没有问题的。但是IE8下先有一次登录了，但是session过期了。显现就变成每次登录拿到的状态都是已登录状态，然后请求home页发现session不对跳回登录页，然后再去拿登录状态判断是否请求home页。这完全是一个死循环。&
　　目前发现这个问题的就IE8 ajax get请求。
　　解决办法：ajax请求后面加上时间戳。
问题：IE8-不支持background-size
　　网络上的处理都是使用IE滤镜：但问题是只能background-size:100%，不能直接指定任意大小background-size
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&让IE兼容background-size的方法&/title&
background-image: url('/img/image/6992fdda3cc7cd98d33fb80e7aec90cc.jpg');
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/image/6992fdda3cc7cd98d33fb80e7aec90cc.jpg',sizingMethod='scale');
class="bgpic" style="width:200height:100"&&/div&
　　但是IE滤镜的限制还是比较大：
　　1.src路径不能是相对路径
　　2.容器必须要明确的设定width和height这两个css样式。
&　　所以我在body设置背景是这样处理的
$(function(){
$("body").css({
width: $(document).width(),
height: $(document).height()
　　而且使用这个滤镜还有另外的问题:AlphaImageLoader滤镜会导致该区域的链接和按钮无效，一般情况下的解决办法是为链接或按钮添加：position:relative使其相对浮动 要注意的是，当加载滤镜的区域的父层有position:absolute绝对定位的时候使用position:relative也不能使链接。详
　　原则上这个滤镜是用来支持透明的PNG图片，但是IE7+以上已经支持了。所以不推荐使用该滤镜。
　　如果只是为了布满全屏的话建议切超大背景图。
　　或使用图片标签Img替代背景属性&　　
问题：IE8中text-align:center文字标签居中，元素并不居中
　　对于文字标签如span、input、p、textarea等没有问题，但是其他非文字标签都会有这个问题。
　　解决方法：
　　可以在其子元素中加入CSS属性：margin:0
问题：IE9-下img标签出现蓝色边框
　　解决方法
border-width:0
问题：IE8-不支持自定义标签
&include&这是include标签&/include&
　　上面的自定义标签在IE8-下回被分解成3个标签
&include/&
文本- 这是include标签
&/include/&
　　解决方法
　　在使用之前先创建标签
&!--[if lte IE 8]&
//创建include标签使include正确解析
document.createElement('include');
&![endif]--&
display: block;
border:1px solid red;
&include&这是include标签&/include&
　　使用命名空间也可以解决这个问题
&html xmlns:ng=""&
ng\:include {
display: block;
border:1px solid red;
&ng:include&这是ng:include标签&/ng:include&
问题：IE7-不支持JSON,无法将字符串转化为JSON对象　　
　　实际上本人描述这个问题不是为了解决这个问题来的。而是描述其解决方法eval和new Function()的作用
　　解决方法
eval(string);
new Function("return " + string);
　　但是尽量避免使用这两种又慢有可能会有bug的方法。
问题：IE8-对css文件大小和数量的限制
&　　- Up to&31&CSS files or &style& tags per page. 单个页面最多31个css文件&　　- Up to&288K&per CSS file (uncompressed). 每个css文件大小最大288k&　　- Up to&4095&selectors per CSS file. 每个css文件最多4095个选择器
　　文档中只有前31个link或style标记关联的CSS能够应用。&
　　解决方法：
　　1.压缩合并css文件
　　2.css文件中使用@import url(...) &
　　注意：一个style标记只有前31次@import指令有效应用。&@import指令下层叠限制不能超过4层&
问题：IE8-关键字不能作为属性名称
　　比如我定义
var t = {class: "chua"}
　　在IE8-上会报错，因为class被IE8-认为是关键字
　　解决方法：
　　1. 不使用关键字&　　2. 关键字属性添加引号，比如我改成这样
var t = {"class": "chua"}
console.log(t["class"]);//访问也不能通过t.class的方式
&问题：IE8使用propertychange的委托处理没有作用
　　正常情况我们使用来处理监听输入
$(document).on('input propertychange', 'textarea', function() {
console.log($(this).val().length + ' characters');
　　发现IE8上居然不好使，貌似propertychange事件没有冒泡，所以只能用元素本身
$('textarea').bind('input propertychange', function() {
console.log($(this).val().length + ' characters');
　　oninput 和 onpropertychange 这两个事件在 IE9 中都有个小BUG，
　　那就是通过右键菜单菜单中的&剪切 和 删除 命令删除内容的时候不会触发，
　　而 IE 其他版本都是正常的，目前还没有很好的解决方案。
　　未完待续
　　如果觉得本文不错，请点击右下方【推荐】！
阅读(...) 评论()}