IE에서 작동하지 않는 백그라운드 이미지의 링크

내 웹 사이트에서 음수 인 z- 인덱스와 위치가 고정되어 큰 이미지가 배경에 나타납니다. 이 이미지는 클릭 할 수 있으며 맨 위에는 웹 사이트의 주요 내용 ("스킨 배너"라고합니다)이 있습니다. FF, Chrome 및 Safari에서는 모든 것이 작동하지만 IE에서 작동하지 않는 경우가 종종 있습니다 ... 누군가 나를 도울 수 있습니까? JS 사용을 피하고 싶습니다. 가능하다면 CSS 대신 HTML 안에 이미지 정의를 유지하고 싶습니다. (저는 "공간"이미지에 대해 말하고 있습니다).IE에서 작동하지 않는 백그라운드 이미지의 링크

<!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>

출처

2014-05-24 ufo

코드가 IE11에서 작동합니다. – ratmalwer

IE11도 실행합니다. 흰색 상자의 상단과 측면에있는 "공간"이미지를 클릭 할 수 있다는 말입니까? 이것은 내가 필요한 것이지만 내 브라우저에서 작동하지 않는 것 같습니다. – ufo

귀하의 권리. 흰색 상자 아래에서만 작동합니다. - 나중에 봐 ... – ratmalwer

이 코드는 앵커 태그에있는 IE의 모든 이미지에 대해 작동합니다 JS 시도해보십시오 :

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

출처

2014-05-24 11:24:04

앵커 태그 내부에있는 버튼에 대해서는 IE 태그가 지원되지 않으므로 앵커 태그 내부에있는 버튼에 대해 작동합니다. 원하는 경우 img 태그로 변경할 수 있습니다. –

문제가 해결되지 않습니다 ... – ufo

이 지금까지 작동이 문제를 복제하는 코드입니다. 올바른 위치에 대한 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>

출처

2014-05-25 11:22:04 ratmalwer

IE에서 작동하지 않는 백그라운드 이미지의 링크

답변

관련 문제