如何解决此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错误？

回答

相关问题