Question

虽然我有这个工作，我做得对，但是当我查看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>

Answer 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标签。

将来，请更清楚你的问题。这很令人困惑，但我相信这会回答你的问题。

将文本放在多个链接旁边

1 个答案: