虽然我有这个工作,我做得对,但是当我查看IE和Chrome网络浏览器时,它并不完美。但这确实在Firefox中正常运行。我正在修改一个函数,该函数使用javascript显示不同的.png文件,具体取决于单击的缩略图。我对其进行了修改,以便点击链接而不是点击缩略图。代码中的问题位于代码的H2
标题部分的底部。在IE和Chrome中,文本“选择”和2个链接(Link_1和Link_2)并不完全相邻,但链接显示更高一些。同样在Chrome和IE中,链接在我们应该看到的链接下面没有该行。我将它放在标题H2
内,因为它让我可以控制文本“选择”的文本样式。有人可以告诉我正确的方法将文本“选择”放在这些链接旁边。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>clickLinks</title>
<style type="text/css">
H1 {line-height:0px;}
H1 {padding: 0cm 0cm 0cm .2cm; }
P {padding: 0cm 0cm 0cm 0cm;}
a {padding: 0cm 0cm 0cm .3cm;}
body { width: 920px; margin: auto; }
#imageWrap {
width: 930px;
height: 470px;
background: url('ajax-loader.gif') center center no-repeat;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> -->
<script type="text/javascript">
$(document).ready(function() {
$('.thumbnail').live("click", function() {
$('#mainImage').hide();
$('#imageWrap').css('background-image', "url('ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn();
});
return false;
});
});
</script>
</head>
<body>
<H2 style="font-family:Angency FB;color:#A8A8A8; font-size:14px">choose:
<a href="picture_1.png" class="thumbnail"><img
alt="Link_1"/></a>
<a href="picture_2.png" class="thumbnail"><img
alt="Link_2"/></a>
<div id="imageWrap">
<img src="picture_1.png" WIDTH="930" HEIGHT="470" alt="Main Image" id="mainImage"/></p>
</div> </H2>
</body>
</html>
答案 0 :(得分:1)
看看这个FIDDLE。你有h2标签围绕着一切......你不应该这样做。
<H2 style="font-family:Angency FB;color:#A8A8A8; font-size:14px">choose:</H2>
<a href="picture_1.png" class="thumbnail"><img
alt="Link_1"/></a>
<a href="picture_2.png" class="thumbnail"><img
alt="Link_2"/></a>
<div id="imageWrap">
<img src="picture_1.png" WIDTH="930" HEIGHT="470" alt="Main Image" id="mainImage"/>
</div>
另外,你的css指向一个不存在的h1标签。我改为h2标签。
将来,请更清楚你的问题。这很令人困惑,但我相信这会回答你的问题。