Question

我做了一个弹出窗口，我有IE 8-10的问题（在IE11下没问题）。我的代码将图像替换为链接图像。 Link正在Firefox，Chrome和IE11下运行，但不能在其他IE版本下运行。默认情况下，这是一个popop窗口。这是我的代码：

<div id="fadeinboxrevol">
<div id="koppbase">
<p class="kalapacs"><img src="./images/original.png" alt="Click here" /></p>
</div>
</div>
<script type="text/javascript">
var tto = jQuery.noConflict();
function get_path() {
var piclist =['./images/1.png','./images/2.png','./images/3.png','./images/4.png'];
var linklist =['1.html','2.html','3.html','4.html'];
var random = Math.floor(Math.random()*piclist.length);
var picpath = piclist[random];
var linkpath = linklist[random];
var pack = [picpath, linkpath];

return pack;
}

tto(".kalapacs").click(function () {
var mypack = get_path();
var mypic = mypack[0];
var mypath = mypack[1];

var content1 = '<p class="torp"><img class="torve" src="'+mypic+'" alt="Don't wait" /><a class="tortext" href="'+mypath+'"></a></p>';

tto("#koppbase").html(content1);

});

</script>

这是我的CSS：

#fadeinboxrevol {
position: absolute;
width: auto;
left: 301px;
top: 262.5px;
visibility: visible;
border: none;
background-color: ;
padding: 0 px;
z-index: 999;
text-align: left;
}
.kalapacs:hover {
cursor: url(http://cur.cursors-4u.net/others/oth-5/oth438.cur), progress !important;
}
.torp {
position: relative;
}
.tortext {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: block;
z-index: 9999;
}
#revolclosebutton {
margin-top: -40px;
right: 20px;
position: absolute;
width: 16px;
z-index: 999;
}

以下是jsfiddle中的一个示例，我使用jQuery 1.11版本以获得更好的兼容性： http://jsfiddle.net/mykee/uDCKL/

我也试过这行：

tto("#koppbase").replaceWith(content1);

但没有帮助。： - （

我的问题是什么？

Answer 1

问题在于这行代码：var content1 = '<p class="torp"><img class="torve" src="'+mypic+'" alt="Don't wait" /><a class="tortext" href="'+mypath+'"></a></p>';

将其更改为： var content1 = '<p class="torp"><a class="tortext" href="'+mypath+'"><img class="torve" src="'+mypic+'" alt="Don't wait" /></a></p>';

当你看看旧的IE时，在img标签之后a是空的，所以很难点击它！（将鼠标悬停在第二张图片上。）

演示： http://jsfiddle.net/uDCKL/7/

Answer 2

我找到了解决方案！将content1行更改为：

var content = '<p class="torp"><a class="tortext" href="'+mypath+'"><img class="torve" src="'+mypic+'" alt="Dont wait" /></a></p>';

CSS替换为此并正在工作：

.kalapacs:hover {
cursor: url(http://cur.cursors-4u.net/others/oth-5/oth438.cur), progress !important;
}
.torp {
position: relative;
}
.tortext {
display: block;
}
#revolclosebutton {
margin-top: -40px;
right: 20px;
position: absolute; 
width: 16px;
z-index: 99999;
}

JQuery取代了在IE 8-10下无法正常工作的链接

2 个答案: