简体   繁体   English

如何解决此IE7错误?

[英]How to workaround this IE7 bug?

The code is here: http://pastebin.me/6d3b7cfcd79b35615b41c2b8b305a159 代码在这里: http : //pastebin.me/6d3b7cfcd79b35615b41c2b8b305a159

<!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>

Click "Show", click "Missed problems", Click the red "X" (top right), click "Show" again and the tabs are messed up. 单击“显示”,单击“遗漏问题”,单击红色的“ X”(右上角),再次单击“显示”,选项卡被弄乱了。

It only happens in IE7. 它仅在IE7中发生。 How to fix it? 如何解决?

I do have a temporary solution till you not found any good solution. 在您找不到任何好的解决方案之前,我确实有一个临时解决方案。 When you creating that tab by javascript, after creation try to refresh it. 当您使用javascript创建该标签时,请在创建后尝试刷新它。 For example 例如

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

It'll fix your problem but as you can see it's not a perfect solution :( If you not got any solution then I'll have a look at it at free time. Because it's a good question 它可以解决您的问题,但是如您所见,这不是一个完美的解决方案:(如果您没有任何解决方案,那么我将在空闲时间进行研究。因为这是一个很好的问题

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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