简体   繁体   中英

Hyperlinks not working in IE8 with Twitter Bootstrap

I've looked all over the place for an fix for this but I can't seem to find it!

I've made my own old browser alert using Twitter Bootstrap's alert class with a black overlay on the content under the alert, it looks great, but I want a hyperlink in the alert that takes the user off to http://browsehappy.com/ where they can then update their browser. But the hyperlink doesn't do anything in IE - it works in everything else (even IE7!) but in IE8 it just shows up blue and isn't clickable.

I've made a JSFiddle with conditional comments in it so you can see what I'm doing:

http://jsfiddle.net/X3tKs/2/

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div id="black" style="width:100%;height:100%;background-color:black;opacity:0.8;filter:alpha(opacity=80);position:absolute;top:52px;z-index:3000;"></div>
<div class="alert alert-danger">
    Yikes! You're using an old browser! This page might not work the way it should. <a href="http://browsehappy.com" target="_blank">Time to update!</a>
</div>

Any help will be MUCH appreciated!

UPDATE: Turns out it was just my fault for using an online browser simulator! Thank you @joshhunt for your comment regarding this - I sent the link to my friend who has a windows computer and they confirmed it was working, it was actually Browserstack that wasn't working right. I tried taking everything out - bootstrap styling, black div (thanks @OJay) and it still didn't work, so I figured it couldn't have been my code. Time to invest in an old Windows laptop for testing! :)

HTML

<div class="alert alert-danger">
    Yikes! You're using an old browser! This page might not work the way it should. <a href="http://browsehappy.com" id="update_link" target="_blank">Time to update!</a>
</div>

jQuery

$("#update_link").click(function(){
    var url = "http://browsehappy.com";
    window.open(url, '_blank');
});

CSS

#update_link{
    cursor:pointer;
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM