html - 如何解决这个 IE7 错误?

标签 html css internet-explorer-7

代码在这里: 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>

点击“显示”,点击“遗漏的问题”,点击红色的“X”(右上角),再次点击“显示”,选项卡就乱七八糟了。

它只发生在 IE7 中。如何解决?

最佳答案

在您找不到任何好的解决方案之前,我确实有一个临时解决方案。当您通过 javascript 创建该选项卡时,创建后尝试刷新它。例如

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

它会解决你的问题,但正如你所看到的,它不是一个完美的解决方案:( 如果您没有任何解决方案,那么我会在空闲时间查看它。因为这是个好问题

关于html - 如何解决这个 IE7 错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9727735/

相关文章:

javascript - CSS 内容 :url() not working on anything other than chrome. 使用 JS 更改 <img> src?

html - IE 10 字体问题 - OpenType 嵌入权限检查失败。权限必须是可安装的

javascript - 谷歌图表 : Y-Axis numbers not visible

javascript - onmouseover javascript 函数未链接?

asp.net - VS 2012 中的解析器错误

html - bootstrap 3 中的居中水平形式

javascript - IE 安全设​​置设置为高 - javascript 不工作

css - IE7 文本被下推

html - 具有固定布局 TABLE 和 TD 宽度百分比的 IE 7/8 错误

javascript - 使用字符串设置内联 css 过渡样式会改变真实值。奇异的