使用IE和Firefox時出現在頁面的不同部分的元素

我有一個隱藏的元素，當您將鼠標懸停在它出現的鏈接上時。唯一的問題是，當使用IE瀏覽器時，它看起來比右邊（頁面外）要好，而不是當你使用Firefox時（它顯示我想要的位置），我該如何解決這個問題？我不知道因爲這個頁面非常大，所以我試圖避免無關的信息，希望在這裏有足夠的瞭解它爲什麼它不能在IE中正常工作..謝謝使用IE和Firefox時出現在頁面的不同部分的元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Simple Tabs with CSS &amp; jQuery</title> 
<style type="text/css"> 
.hidden{ 
    background-color:#ccc; 
    position:absolute; 
    width:auto; 
    border:1px black inset; 
    height:auto; 
    text-decoration:none; 
    font-size:14px; 
    padding: 1em 1em 1em 1em; 
    border:2px black double; 
    list-style-type:none; 
    left:1100px; 
    top:300px; 
    margin:1em 1em 1em 1em; 
    display:none; 
} 
body { 
margin:1em; 
padding:0; 
height:100%; 
background-color:#cbcbcb; 
color:#000000; 
text-align:center; 
font-family:Arial, Helvetica, sans-serif; 
border-style: thin; 
} 

h1 {font-size: 3em; margin: 20px 0;} 
#centerColumn { 
    margin: 0 auto; 
    padding: 1em; 
    width: 1000px; 
    height:1200px; 
    text-align: left; 
    vertical-align: bottom; 
    background-color: #ffffff; 
    border: 1px solid #999999;} 


#header { 
    border-style: thin; 
    background-position: center; 
    margin: -1em -1em 0 -1em; 
    padding: 0 0 0 0; 
    height: 15.5em; 
    background-color: #ffffff; 
    background-image: url('karrnsmall.jpeg'); 
    background-repeat: repeat-y; 
    background-attachment: scroll; 

} 

ul.tabs { 
    margin: 0; 
    list-style: none; 
    height: 32px; 
    float:left; 
    width:200px; 
    padding:0 0 0 0; 
} 
ul.tabs li { 

    margin: 0; 
    padding: 0; 
    height: 31px; 
    line-height: 31px; 
    border: 1px solid #999; 
    border-left: none; 
    margin-bottom: -1px; 
    background: #e0e0e0; 
    overflow: hidden; 
    position: relative; 
} 
ul.tabs li a { 
    text-decoration: none; 
    color: #000; 
    display: block; 
    font-size: 1.2em; 
    padding: 0 20px; 
    border: 1px solid #fff; 
    outline: none; 
} 
ul.tabs li a:hover { 
    background: #eee; 
    font-size:1.25em; 
} 
html ul.tabs li.active, html ul.tabs li.active a:hover { 
    background: #fff; 
    border-bottom: 1px solid #fff; 
} 
table { 
     background-color: black; 
     border: 1px black solid; 
     border-collapse: collapse; 
     } 
     th { 
     border: 1px outset silver; 
     background-color: silver; 
     color: white; 
     } 
     tr { 
     background-color: white; 
     margin: 10px; 
     } 
     tr.striped { 
     background-color:silver ; 
     } 
     td { 
     padding: 1px 8px; 
     } 

.tab_container { 
    border: 1px solid #999; 
    border-top: none; 
    clear: both; 
    float: right; 
    width: 99%; 
    background: #fff; 
    -moz-border-radius-bottomright: 5px; 
    -khtml-border-radius-bottomright: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    -moz-border-radius-bottomleft: 5px; 
    -khtml-border-radius-bottomleft: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
} 
.tab_content { 
    padding: 20px; 
    font-size: 1em; 
    text-align: left; 

</style> 
$(document).ready(function(){ 
$("#button").hover(function(){ 
    $(".hidden").fadeIn(200); 
}, 
function(){ 
    $(".hidden").fadeOut(200); 
}); 
}); 
</script> 

<body> 
<div class="hidden"><p>info here 
    </p></div> 
<div id="button"><a href="javascript:;">hover here</a></div></body>

來源

2011-01-07 corybranan

你缺少一個左腳本標籤 – 2011-01-07 18:59:50

哪裏是開通

相關問題