如何解決此IE7錯誤？

的代碼是在這裏： http://pastebin.me/6d3b7cfcd79b35615b41c2b8b305a159 如何解決此IE7錯誤？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<meta http-equiv="Content-Style-Type" Content="text/css" /> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
</head> 
<body> 

<style type="text/css"> 
<!-- 
.problems-contents .wrapper-header{ 
    height:84px; 
} 
.lessons-wrapper { 
    /*behavior:url(/MM/css/htc/ie-css3.htc);*/ 
    border:1px solid #CCCCCC; 
    width:696px; 
    height:450px; 
} 
#problems-all { display:none; } 
div.active { 
    -moz-border-radius:5px 5px 0 0; 
    border-radius:5px 5px 0 0; 
    -webkit-border-bottom-left-radius: 0px; 
    -webkit-border-bottom-right-radius: 0px; 
    -webkit-border-top-left-radius: 5px; 
    -webkit-border-top-right-radius: 5px; 
    background:none repeat scroll 0 0 white; 
    border-color:#CCCCCC; 
    border-style:solid solid none; 
    border-width:1px 1px 0; 
    cursor:default; 
    float:right; 
    height:26px; 
    line-height:26px; 
    text-align:center; 
    width:120px; 
    margin-left:10px; 
    font-size: 11px; 
    font-weight: normal; 
    position:relative; 
} 
div.non-active { 
    -moz-border-radius:5px 5px 0 0; 
    border-radius:5px 5px 0 0; 
    -webkit-border-bottom-left-radius: 0px; 
    -webkit-border-bottom-right-radius: 0px; 
    -webkit-border-top-left-radius: 5px; 
    -webkit-border-top-right-radius: 5px; 
    height:26px; 
    line-height:26px; 
    text-align:center; 
    width:120px; 
    float:right; 
    cursor:hand; 
    cursor:pointer; 
    border-color:#DDD; 
    border-style:solid solid none; 
    border-width:1px 1px 0; 
    margin-left:10px; 
    font-size: 11px; 
    font-weight: normal; 
    position:relative; 
} 
.lessons-tab-header { 
    float:right; 
    font-size:12px; 
    font-weight:bold; 
    margin-top: 57px; 
    position:absolute; 
    /*z-index:10;*/ 
    display:inline-block; 
    width:278px; 
    left:418px; 
} 
.rightmargin10 { margin-right:10px; } 

.problems-contents{ 
     position:absolute; 
     top:92px; 
     left:50px; 
     height:452px; 
     width:698px; 
     background:white; 
     display:none; 
     z-index: 20; 
     width: 698px; 
    } 

.cross{ 
    float:right; 
    margin: 4px 4px 0 0; 
    width:12px; 
    zoom : 1; 
    line-height:16px; 
} 

.cross a{  
    color: red; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    font-weight: bold; 
    text-decoration: none; 
    line-height:16px; 
} 
.wrapper-header { 
    background-color:#E6E6E6; 
    height:50px; 
    padding-left:13px; 
    font-size:20px; 
    font-weight:bold; 
} 
--> 
</style> 
<script type="text/javascript"> 
    function show(){ 
     $(".problems-contents").show();      
     $('#problems-incorrect').hide(); 
     $('#problems-all').show(); 
    } 
</script> 

<a href="javascript:show();">show</a> 

<div class="problems-contents"> 
    <div class="lessons-wrapper" id="problems-all"> 
    <div class="wrapper-header"> 
     <div class="cross"><a href="javascript:$('.problems-contents').hide();void(0);">X</a></div> 
     <div class="lessons-tab-header"> 
     <div class="non-active" onclick="$('#problems-all').hide();$('#problems-incorrect').show();">Missed Problems</div> 
     <div class="active">All Problems</div> 
     </div> 
    </div> 
    </div> 
    <div class="lessons-wrapper" id="problems-incorrect"> 
    <div class="wrapper-header"> 
     <div class="cross"><a href="javascript:$('.problems-contents').hide();void(0);">X</a></div> 
     <div class="lessons-tab-header"> 
     <div class="active">Missed Problems</div> 
     <div class="non-active" onclick="$('#problems-incorrect').hide();$('#problems-all').show()">All Problems</div> 
     </div> 
    </div> 
    </div> 
</div> 
</body>

單擊「顯示」，單擊「錯過的問題」，點擊紅色的「X」（右上），點擊「查看」再次和標籤都搞砸了。

它只發生在IE7中。如何解決它？

來源

2012-03-15 kcsoft

我感覺它與IE7沒有正確識別顯示：inline-block（https://www.google.ca/search?q=ie7+inline-block）另外，float：right +位置：絕對+左：418px？ – isotrope 2012-03-15 20:40:51

在IE9中沒有問題:) – 2012-03-15 20:43:02

雅我會說isotrope是正確的......你得到顯示：內聯塊和浮點數和絕對位置。 IE7可能會混淆所有這些風格的木樁 – zgood 2012-03-15 20:53:48

我確實有一個臨時解決方案，直到你找不到任何好的解決方案。當您通過javascript創建該選項卡時，創建後嘗試刷新它。例如

$('#yourtabParent').html($('#yourtabParent').html());

這將解決您的問題，但你可以看到，如果你沒有得到任何解決方案然後我會看看它在空閒時間它不是一個完美的解決方案:( 。因爲它是一個很好的問題

來源

2012-03-16 04:28:09 Tarun

如何解決此IE7錯誤？

回答

相關問題