JQuery替换了IE 8-10下无法工作的链接

Question

我做了一个弹出，我有一个问题的IE8-10(在IE11下没有问题)。我的代码将图像替换为链接图像。链接工作在火狐，Chrome和IE11，但不工作在其他IE版本。默认情况下，这是一个弹出窗口。这是我的代码：

<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，a是空后的img标签，所以很难点击它！(在第二张图片上悬停。)

演示： 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;
}