Firefox中未显示跨度图像，谷歌浏览器 [英] span image is not shown in firefox,google chrome
本文介绍了Firefox中未显示跨度图像，谷歌浏览器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我在Firefox中打开图像时，为什么没有显示图像?
但它适用于Internet Explorer
我的代码是
When I open in firefox image is not shown why?
But it is working for Internet Explorer
my code is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Sync-API: Main Page</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
<style>
a:hover {
color: #F30;
}
h1 {
font: bold 150%/120% Arial, Helvetica, sans-serif;
text-transform: uppercase;
margin: 0 0 10px;
color: #0000;
}
a {
color: #69C;
text-decoration: none;
}
p {
margin: 0 0 0px;
}
em {
font: italic 100% "Times New Roman", Times, serif;
}
.credits {
border-bottom: solid 1px #eee;
padding-bottom: 10px;
margin: 0 0 30px;
}
#pagewrap {
margin: 0 auto;
width: 600px;
padding-left: 150px;
position: relative;
}
/*
Back to top button
*/
#back-top {
position: fixed;
bottom: 30px;
margin-left: -100px;
}
#back-top a {
width: 40px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* home icon (span tag) */
#back-top span {
width: 40px;
height: 40px;
display: block;
margin-bottom: 5px;
background: #ddd url(up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
</head>
<body id="top">
<div id="pagewrap">
<p id="back-top">
<a href="#top" style="position: relative; left: 925px;"><span></span>Back to top</a>
</div>
</body>
</html>
并且图像在同一文件夹中是up-arrow.png.
and image is up-arrow.png in same folder.
推荐答案
(document).ready(function(){ //隐藏#back-top first
(document).ready(function(){ // hide #back-top first
(#back-top").hide(); //淡入#back-top
("#back-top").hide(); // fade in #back-top
(function(){
(function () {
这篇关于Firefox中未显示跨度图像，谷歌浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
