Question

在我的网站上，我在后台获得了一张大图片，负z-index和位置已修复。这张图片是可点击的，在顶部有网站的主要内容（它就像所说的＆＃34;皮肤横幅＆＃34;）。一切都在FF，Chrome和Safari中运行，但是，经常发生的事情，它在IE中无法工作......有人可以帮助我吗？我想避免使用JS，如果可能的话，我想在HTML中而不是在CSS中维护图像定义（我正在谈论＆＃34;空间＆＃34;图像）。这是复制问题的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="it-it"
      lang="it-it"
      dir="ltr">
<head>
  <title>TEST BACKGROUND IMAGE</title>

  <style type="text/css">
    body
    {
        background: #000 url(http://upload.wikimedia.org/wikipedia/commons/6/64/AFM_image_of_tin_layer.jpg) repeat;
        background-attachment: fixed;
        color: #333;
        font-family: arial, helvetica, sans-serif;
        z-index: -10000;
        margin: auto;
        width: 980px;
    }

    .skin-banner
    {
        position: fixed;    
        z-index: -9000;
        width: 1280px;
        height: 920px;
        left: 50%;
        top: 0;
        margin-left: -550px;
        padding: 0;
    }

    #all
    {
        color: #333;
        border:solid 0px;
        padding-top:0px;
        background:#FFF;
        -webkit-border-radius: 15px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        border-radius: 15px;
        overflow: hidden;
    }

    .with_skin_on_top
    {
        margin-top: 60px !important;
    }
  </style>
</head>

<body>
  <div class="skin-banner">
    <div class="custom">
      <p>
        <a href="http://www.google.it" target="blank">
          <img src="http://www.redorbit.com/media/gallery/xmm-newton/cl-j14490856.jpg" border="0" alt="" />
        </a>
      </p>
    </div>
  </div>
  <div id="all" class="with_skin_on_top">
    <p>TEST</p>
  </div>
</body>
</html>

Answer 1

试试这个js代码适用于IE中锚标记的所有图像：

$(document).ready(function(){
    $('a input[type=button]').click(function(){
       window.location = $(this).closest('a').attr('href');
    });
});

Answer 2

到目前为止，这是有效的。只需检查你的img的宽度是否正确定位。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="it-it"
      lang="it-it"
      dir="ltr">
<head>
  <title>TEST BACKGROUND IMAGE</title>

  <style type="text/css">
    body
    {
        background: #000 url(http://upload.wikimedia.org/wikipedia/commons/6/64/AFM_image_of_tin_layer.jpg) repeat;
        background-attachment: fixed;
        color: #333;
        font-family: arial, helvetica, sans-serif;
        z-index: -10000;
        margin: auto;
        width: 980px;
    }

    .skin-banner
    {
        position: fixed;    
        z-index: -9000;
        width: 1280px;
        height: 920px;
        top: 0;
        margin-left: auto;
        padding: 0;
    }

    #all
    {
        color: #333;
        border:solid 0px;
        padding-top:0px;
        background:#FFF;
        -webkit-border-radius: 15px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        border-radius: 15px;
        overflow: hidden;
        z-index: 1;
        position:absolute;
        width: 980px;
        left:50px;
        top:0px;    
    }

    .with_skin_on_top
    {
        margin-top: 60px !important;
    }
  </style>
</head>

<body>
  <div class="skin-banner">
    <div class="custom">

      <p>
        <a href="http://www.google.it" target="blank">
          <img src="http://www.redorbit.com/media/gallery/xmm-newton/cl-j14490856.jpg" border="0" alt="" />
        </a>
      </p>

    </div>
      <div id="all" class="with_skin_on_top">
        <p>TEST</p>
      </div>       
  </div>

</body>
</html>

在背景图像中链接不在IE上工作

2 个答案: