Как обход этой ошибки 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 неправильно распознает отображение: встроенный блок (https://www.google.ca/search?q=ie7+inline-block) Кроме того, float: right + position: absolute + left: 418px? – isotrope

не проблема в IE9 :) –

ya Я бы сказал, isotrope прав ... у вас есть отображение: встроенный блок и поплавки и абсолютные позиции. IE7, вероятно, путается со всеми этими стилями. – zgood

У меня есть временное решение, пока вы не нашли подходящего решения. Когда вы создаете эту вкладку с помощью javascript, после создания попробуйте обновить ее. Например

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

Это будет исправить вашу проблему, но, как вы можете видеть, что это не идеальное решение :( Если вы не получили какое-либо решение, то я буду смотреть на это в свободное время. Потому что это Хороший вопрос

источник

2012-03-16 04:28:09 Tarun

Как обход этой ошибки IE7?

ответ

Смежные вопросы