Javascript 网页在google chrome上显示异常
照片幻灯片无法在google chrome上显示，但在firefox上看起来非常完美。代码如下：Javascript 网页在google chrome上显示异常,javascript,html,css,firefox,google-chrome,Javascript,Html,Css,Firefox,Google Chrome,照片幻灯片无法在google chrome上显示，但在firefox上看起来非常完美。代码如下： <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>xxxxxxx</title> <
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxxxxxx</title>
<meta name="keywords" content="xxxxxxxxx" />
<meta name="description" content="xxxxxxx, New York" />
<link rel="shortcut icon" href="css/favicon.ico">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link type="text/css" rel="stylesheet" href="css/tn3e/tn3e.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tn3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var tn1 = $('.mygallery').tn3({
skinDir:"css",
autoplay:true,
width:768,
delay:5000,
skin:"tn3e",
imageClick:"url",
image:{
crop:true,
transitions:[{
type:"blinds",
duration:300
},
{
type:"grid",
duration:160,
gridX:9,
gridY:7,
easing:"easeInCubic",
sort:"circle"
},{
type:"slide",
duration:430,
easing:"easeInOutExpo"
}]
}
});
});
</script>
</head>
<body>
<figure class="logo">
<img src="css/vbccr.jpg" alt="logo" />
</figure>'
<div class="nav_example">
<div class="menu">
<span>'
<ul id="nav">
<li><a href="#">主页<br />Home</a>
<div class="subs">
<div>
<ul>
<li><h3>关于我们<br />About Us</h3>
<ul>'
<li><a href="#">陈述</a></li>
<li><a href="#">历史沿革</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</li>
<li><h3>冯师<br />Feng</h3>
<ul>'
<li><a href="#">简介</a></li>
<li><a href="#">寄语</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li><a href="#">主拜<br />Sunday</a>
<div class="subs">
<div class="wrp2">
<ul>'
<li><h3><a href="#">时间地点<br />Time & Location</a></h3></li>
<li><h3>师道<br />Sermons</h3>
<ul>'
<li><a href="#">2012</a></li>
<li><a href="#">2011</a></li>
<li><a href="#">2010</a></li>
<li><a href="#">2009</a></li>
<li><a href="#">2008</a></li>
</ul>
</li>
</ul>
<p class="sep"></p>
<ul>
<li><h3>人学<br />School</h3>
<ul>'
<li><a href="#">新班</a></li>
<li><a href="#">门班</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</span>
</div>
</div>
<script type="text/javascript">
jQuery(window).load(function() {
$("#nav > li > a").click(function () { // binding onclick
if ($(this).parent().hasClass('selected')) {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
} else {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
if ($(this).next(".subs").length) {
$(this).parent().addClass("selected"); // display popup
$(this).next(".subs").children().slideDown(200);
}
}
});
});
</script>
<!-- This is gallery setting -->
<div class="mygallery">
<div class="tn3 album">
<h4>Large Images</h4>
<div class="tn3 description">Large Images</div>
<div class="tn3 thumb">images/114x72/3.jpg</div>
<ol>
<li>
<h4>Hdfae</h4>
<div class="tn3 description">daa</div>
<a href="images/1.jpg"><img src="images/114x72/1.jpg" alt="demo" /></a>
</li>
<li>
<h4>Isolated</h4>
<div class="tn3 description">island</div>
<a href="images/2.jpg"><img src="images/114x72/2.jpg" alt="demo" /></a>
</li>
<li>
<h4>Town</h4>
<div class="tn3 description">Herceg</div>
<a href="images/3.jpg"><img src="images/114x72/3.jpg" alt="demo" /> </a>
</li>
</ol>
</div>
<div class="tn3 album">
<h4>Fixed</h4>
<div class="tn3 description">Images</div>
<div class="tn3 thumb">images/114x72/1.jpg</div>
<ol>
<li>
<h4>Wall</h4>
<div class="tn3 description">Jai</div>
<a href="images/920x360/6.jpg"><img src="images/114x72/6.jpg" alt="demo" /></a>
</li>
<li>
<h4>City</h4>
<div class="tn3 description">Ne</div>
<a href="images/920x360/7.jpg"><img src="images/114x72/7.jpg" alt="demo" /></a>
</li>
</ol>
</div>
</div>
</body>
</html>
body {
background:white;
margin:0px auto;
padding:0;
width: 768px;
color:#eee;
font-size:medium;
font-family:Tahoma,Arial,Verdana,sans-serif;
}
.logo {
padding:inherit;
margin:inherit;
}
.logo > img {
width: 768px;
display:block;
}
.nav_example {
background:url(navigation_bar.gif) no-repeat;
width:100%;
height:60px;
margin:inherit;
/* border:1px #000 solid; */
/* border-radius:3px; */
/* -moz-border-radius:3px; */
/* -webkit-border-radius:3px; */
}
/* main menu styles */
.menu {
padding-top:9px;
text-align:center;
width:100%;
}
.menu > span {
display:inline-block;
margin:10 auto;
}
#nav {
display:inline;
text-align:center;
/* text-align:left; */
position:relative;
list-style-type:none;
}
#nav > li {
float:left;
padding:0;
position:relative;
}
#nav > li > a {
/* border:1px solid transparent; */
color:#eee;
display:block;
font-size:1.05em;
padding:3px 10px;
position:relative;
text-decoration:none;
}
#nav > li > a:hover {
color:#fefefe;
background-color:#d10e15;
/* border-color:#999 */
}
#nav > li.selected > a {
background-color:#d10e15;
color:#fefefe;
z-index:0;
}
#nav li div {
position:relative;
}
#nav li div div {
background-color:#1a1a1a;
display:none;
font-size:1em;
margin:0;
padding:0;
position:absolute;
top:5px;
z-index:1;
width:200px;
}
#nav li div div.wrp2 {
width:400px;
}
#nav .sep {
left:200px;
border-left:1px solid #2a2a2a;
bottom:0;
height:auto;
margin:15px 0;
position:absolute;
top:0;
width:1px;
}
#nav li div ul {
padding-left:5px;
padding-right:5px;
position:relative;
width:190px;
float:left;
list-style-type:none;
}
#nav li div ul li {
margin:0;
padding:0;
}
#nav li div ul li h3 {
border-bottom:1px solid #3a3a3a;
color:#1da0ff;
font-weight:bold;
font-size:0.95em;
margin:8px 0px;
padding:3px 0px;
}
#nav li div ul li h3 a {
color:#1da0ff;
display:block;
text-decoration:none;
}
#nav li div ul li h3 a:hover{
background-color:#d10e15;
color:#fefefe;
}
#nav li ul ul {
padding:0 0 8px;
}
#nav li ul ul li {
margin:0;
padding:0;
}
#nav li ul ul li a {
color:#eee;
display:block;
margin-bottom:1px;
padding:3px 5px;
text-decoration:none;
font-size:0.95em;
}
#nav li ul ul li a:hover{
background-color:#d10e15;
color:#fefefe;
}
/*!
* tn3 v1.1.0.28
* http://tn3gallery.com/
*
* License
* http://tn3gallery.com/license
*
* Date: 29 Jul, 2011 16:21:54 +0300
*/
顺便说一句，favicon也不能在google chrome中显示，但在firefox中成功显示。有人知道吗？尝试使用css重置，如果您提供更多关于页面运行方式的信息，效果会更好。需要更多信息，比如css，可能还有指向您尝试使用的jQuery插件的链接。。。。当你说“不能显示”时，你的意思是它不能正确显示，还是根本不能显示？您还缺少favicon的“type=”image/x-icon“”。我们拥有的信息越多，帮助就越容易：）最好创建fiddle/在线演示会更合适，通过查看代码在您的情况下解决问题并不容易。@HappySingh:这是一个很好的建议。问题是我没有一个在线的地方可以这样做。@Mattisdata：谢谢。我刚刚添加了css文件。仅仅通过查看它们来调试可能太复杂了。整个幻灯片没有显示在google-chrome中。您可以将其转换为JSFIDLE。使它成为一个优秀的在线演示，因此我们可以看到行为和调试。正如gastonfartek所说，CSS重置是一个非常方便的工具，可以确保所有浏览器“启动”在同一个基础上。
/*!
* tn3 v1.1.0.28
* http://tn3gallery.com/
*
* License
* http://tn3gallery.com/license
*
* Date: 29 Jul, 2011 16:21:54 +0300
*/