解决方法: 添加image标签，src="png";css
ie下，svg上右键就能够下载png格式图片html
<svg id="circle1" data-parallaxify-range-x="100" data-parallaxify-range-y="50" xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 120 120" style="transform: matrix(1, 0, 0, 1, -0.55, 1.54167);"> <image src="./img/circle1.png" width="90" height="90" /> <circle class="circle" cx="59.5" cy="59.5" r="44.5"></circle> </svg> or <svg width="96" height="96"> <image xlink:href="svg.svg" src="svg.png" width="96" height="96" /> </svg>
其他方法:background:兼容处理html5
.my-element {
background-image: url(fallback.png);
background-image: url(image.svg), none;
}
解决方法: img{border:0;} reset中就有。css3
变换 能够换成改变 left/top;有时也能够改变margin-left/margin-top效果更好。web
暂时没找到解决方法，ie10如下，也就能够不作动画了吧。express
使用respond.js ；但要注意respond的使用方法；浏览器
具体使用方法：能够看 HTML5新特性总结（一）-新标签缓存
* {
font-size: 100%;
padding: 0;
margin: 0;
}
html {
_background: url(about:blank) fixed;
-webkit-text-size-adjust: none;
overflow: auto;
}
body {
font-family: "WenQuanYi Micro Hei", "Microsoft YaHei", \5FAE\8F6F\96C5\9ED1, "微软雅黑";
overflow: visible;
font-size: 12px;
_width: expression(parentNode.clientWidth - offsetWidth + clientWidth);
_behavior: url("csshover3.htc");
}
td, th, button, select, textarea {
*font-family: expression(parentNode.currentStyle.fontFamily);
font-family: inherit;
}
html,body {
min-height: 100%;
_height: 100%;
}
a {
text-decoration: none;
color: inherit;
}
a:active,
a:focus,
a:hover {
text-decoration: underline;
}
a,
input,
button,
select,
textarea {
*outline: expression(this.hideFocus=true);
outline: none;
}
input[type="reset"], input[type="submit"], input[type="button"], button {
overflow: visible;
}
input[type="radio"], input[type="range"], input[type="checkbox"] {
background: none;
padding: 0;
border: 0;
}
input[type="text"], input[type="password"], input[type="date"], input[type="email"], input[type="url"] {
*font-family: expression(parentNode.currentStyle.fontFamily);
border: 1px solid #CCC;
background: #fff;
padding: 5px;
behavior: url("textbox.htc");
}
textarea {
border: 1px solid #CCC;
vertical-align: top;
background: #fff;
resize: vertical;
overflow: auto;
padding: 6px;
height: 80px;
width: 150px;
behavior: url("textbox.htc");
}
textarea, input {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #8c8c8c;
}
input {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
vertical-align: middle;
_behavior: expression(type=="text" || type=="password" ? 'url("textbox.htc")' : '');
*font-family: expression(type=="text" || type=="password" ? parentNode.currentStyle.fontFamily: '');
}
.input_text, .input_password {
_font-family: expression(parentNode.currentStyle.fontFamily);
_border: 1px solid #CCC;
_background: #fff;
_padding: 5px;
}
.input_reset, .input_submit, .input_button, button {
_overflow: visible;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="email"]:focus, input[type="url"]:focus {
border-color: #79c0f2;
}
textarea:focus {
border-color: #79c0f2;
}
input.input_text_focus, input.input_password_focus, .textarea_focus {
border-color: #79c0f2 ;
}
::-webkit-input-placeholder {
color: #bfbfbf;
}
:-moz-placeholder {
color: #bfbfbf;
}
input-placeholder, textarea-placeholder{
color: #bfbfbf;
}
::-webkit-search-decoration,
::-webkit-search-cancel-button {
display: none;
}
img {
border: 0;
-ms-interpolation-mode: bicubic;
}
table {
empty-cells: show;
border-collapse: collapse;
}
table,th,td {
border: 0 solid #eee;
}
caption {
font-size: large;
font-weight: bold;
}
th {
word-break: keep-all;
white-space: nowrap;
font-weight: normal;
text-align: left;
}
iframe {
border: 0;
}
label, select, progress {
vertical-align: middle;
display: inline-block;
}
select {
border: 1px solid #79c0f2;
background: #fff;
color: #666;
*behavior: url("select.htc");
}
(function($, win, doc, undefined){
//声明命名空间
$ = {};
$.browser = {
msie: /*@cc_on 1 || @*/ 0 ? (doc.documentMode || (doc.compatMode == "CSS1Compat" ? "XMLHttpRequest" in win ? 7 : 6 : 5)) : undefined,
gecko: win.netscape && nav.product == "Gecko",
opera: win.opera ? win.opera.version() : "",
webkit: !!win.WebKitPoint
};
$.each = function( obj, fun ){
if(obj.length >= 0 ){
for( var i = 0; i< obj.length; i++ ){
if(fun.call(obj[i], i) == false){
return;
}
}
}else{
for( var key in obj ){
if(fun.call(obj[key], key) == false){
return;
}
}
}
}
$.nameFix = {
//IE使用，其余使用e.style.styleFloat
//其余浏览器使用e.style.cssFloat
"float": $.browser.msie < 9 ? "styleFloat" : "cssFloat"
}
if($.browser.msie < 8){
$.nameFix = {
"class": "className",
"for": "htmlFor"
};
}else if($.browser.gecko){
$.nameFix["mousewhee"] = "DOMMouseScroll";
$.nameFix["innerText"] = "textContent";
}
$.attr = function(elm, name, val){
name = $.nameFix[name] || name;
if(val == undefined){
return elm[name] || elm.getAttribute(name);
}else{
elm[name] = val;
elm.setAttribute(name, val);
return elm;
}
}
$.getClass = function(elm){
return $.attr(elm, "class") || "";
}
$.addClass = function(elm, name){
return $.attr(elm, "class", $.getClass(elm) + " " + name );;
}
$.delClass = function(elm, name){
return $.attr(elm, "class", $.getClass(elm).replace(new RegExp( "\\s*\\b" + name + "\\b", "g" ), ""));
}
$.findPos = function(obj) {
var curleft = obj.offsetLeft || 0;
var curtop = obj.offsetTop || 0;
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
return {x:curleft,y:curtop};
}
// 兼容 document.getElementsByClassName;
if (!doc.getElementsByClassName){
//为document添加getElementsByClassName方法
doc.getElementsByClassName = function(selector){
return this.querySelectorAll( "." + selector );
}
//为Element的原型添加getElementsByClassName方法
if(win.Element){
Element.prototype.getElementsByClassName = doc.getElementsByClassName;
}
}
/*@cc_on @if (@_jscript)
if($.browser.msie < 9){
$.eventFix = function(elm){
if(elm.addEventListener == undefined){
elm.addEventListener = function (eventType, fun) {
var me = this;
me.attachEvent("on" + eventType, function() {
//得到标准的event
var e = win.event;
e.charCode = (e.type == 'keypress') ? e.keyCode: 0;
e.eventPhase = 2;
e.isChar = (e.charCode > 0);
e.pageX = e.x;
e.pageY = e.y;
e.preventDefault = function() {
e.returnValue = false;
};
if (e.type == 'mouseout') {
e.relatedTarget = e.toElement;
} else if (e.type == 'mouseover') {
e.relatedTarget = e.fromElement;
}
e.stopPropagation = function() {
e.cancelBubble = true;
};
e.target = e.srcElement;
e.timeStamp = (new Date()).getTime();
return fun.call(me, e);
});
}
}
return elm;
}
//为IE的window对象添加W3C标准方法getComputedStyle
//该方法用于获取对象的推演样式
win.getComputedStyle = function(elm){
return elm.currentStyle;
}
//为IE的document对象添加W3C标准属性defaultView
doc.defaultView = win;
//为document对象添加addEventListener方法
$.eventFix(doc);
//HTML5
//doc.writeln('<!–[if lt IE 9]><script src="'+location.protocol+'//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]–>');
if($.browser.msie < 8){
//修改一个element，使其某个方法返回的对象得到新标准
$.queryFunFix = function(elm, fun){
var oldFun = elm[fun];
elm[fun] = function(args){
try{
return $.domFix(oldFun.apply(this, arguments));
}catch(ex){
return $.domFix(oldFun(args));
}
}
}
$.queryFix = function(elm){
if(!elm.querySelectorAll){
//为elm对象添加querySelectorAll方法
elm.querySelectorAll = function( selector ){
$.addClass(this, "querySelectorAll");
var rest = doc.querySelectorAll( ".querySelectorAll " + selector );
$.delClass(this, "querySelectorAll");
return rest;
}
//为elm对象添加getElementsByClassName方法
elm.getElementsByClassName = doc.getElementsByClassName;
//为elm对象添加querySelector方法
elm.querySelector = doc.querySelector;
//修改elm对象的getElementById方法，使其得到的对象符合新标准
$.queryFunFix(elm, "getElementById");
}
return elm;
}
$.domFix = function(elm){
if(elm.parentNode){
$.eventFix($.queryFix(elm.parentNode));
}
return $.eventFix($.queryFix(elm));;
}
//修改document对象的createElement方法，使其生成的对象符合新标准
$.queryFunFix(doc, "createElement");
//修改document对象的getElementById方法，使其生成的对象符合新标准
$.queryFunFix(doc, "getElementById");
//为document对象添加querySelector方法
doc.querySelector = function( selector ){
return this.querySelectorAll( selector )[0];
}
//为document对象添加querySelectorAll方法
doc.querySelectorAll = function( selector ){
var style = doc.createStyleSheet(),
elms = [];
style.addRule(selector, "query:querySelectorAll");
$.each(this.all, function(){
if (this.currentStyle.query == "querySelectorAll") {
elms[elms.length] = $.domFix(this);
}
});
style.owningElement.parentNode.removeChild(style.owningElement);
return elms;
}
$.domFix(doc.documentElement);
doc.attachEvent("onreadystatechange", function (e){
$.domFix(doc.body);
});
//修复IE背景缓存问题
doc.execCommand("BackgroundImageCache", false, true);
//屏蔽报错
win.onerror=function(ex){
return true;
};
} else {
//为Element的原型添加addEventListener方法
$.eventFix(Element.prototype);
}
}
/*@end @*/
document.realy = function(fun){
if(/loaded|complete/.test(doc.readyState)){
fun($);
} else if($.browser.msie < 9){
var timer = setInterval(function () {
try {
doc.body.doScroll('left');
clearInterval(timer);
fun($);
} catch(exp) {};
},0);
} else {
document.addEventListener("DOMContentLoaded", function(){fun($);}, false);
}
};
win.jeft = $;
})(window.jeft, window, document);