0
我有一個奇怪的問題ie7（ie8在兼容模式下）。 我有div容器，我正在更新值使用JavaScript innhtml更新值。這在Firefox和ie8中運行良好。在IE7中，值不會更新，但如果點擊值並突出顯示值，則會更新值，如果更改瀏覽器的高度，則在下次更新時值會正確更新。ie7 innerhtml奇怪的顯示問題
我已經想通了，如果我將外部div容器的位置屬性從相對靜態更改，那麼更新正常工作。
此頁面可以在這裏查看http://islendingasogur.net/test/webmap_html_test.html 在兼容性打開的Internet Explorer 8中，您可以看到灰色框中的時間戳只更新一次，之後您看不到更改。每隔10秒更新右下角的時間戳。但是，如果您突出顯示灰色框中的文本，則會顯示更新的時間戳值！
這裏是頁：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="expires" content="Mon, 22 Jul 2002 11:12:01 GMT"/>
<title>innerhtml problem</title>
<script type="text/javascript">
<!--
var alarm_off_color = '#00ff00';
var alarm_low_color = '#ffff00';
var alarm_lowlow_color = '#ff0000';
var group_id_array = new Array();
var var_alarm_array = new Array();
var timestamp_color = '#F3F3F3';
var timestamp_alarm_color = '#ff00ff';
group_id_array[257] = 0;
function updateParent(var_array, group_array) {
//Update last update time
var time_str = "Last Reload Time: ";
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
if(minutes < 10)
{minutes = "0" + minutes;}
if(seconds < 10)
{seconds = "0" + seconds;}
time_str += hours + ":" + minutes + ":" + seconds;
document.getElementById('div_last_update_time').innerHTML = time_str;
//alert(time_str);
alarm_var = 0;
//update group values
for(i1 = 0; i1 < var_array.length; ++i1)
{
if(document.getElementById(var_array[i1][0]))
{
document.getElementById(var_array[i1][0]).innerHTML = unescape(var_array[i1][1]);
if(var_array[i1][2]==0)
{document.getElementById(var_array[i1][0]).style.backgroundColor=alarm_off_color}
else if(var_array[i1][2]==1)
{document.getElementById(var_array[i1][0]).style.backgroundColor=alarm_low_color}
else if(var_array[i1][2]==2)
{document.getElementById(var_array[i1][0]).style.backgroundColor=alarm_lowlow_color}
//check if alarm is new
var_id = var_array[i1][3];
if(var_array[i1][2]==1 && var_array[i1][4]==0)
{
alarm_var = 1;
}
else if(var_array[i1][2]==2 && var_array[i1][4]==0)
{
alarm_var = 1;
}
}
}
//Update group timestamp and box alarm color
for(i1 = 0; i1 < group_array.length; ++i1)
{
if(document.getElementById(group_array[i1][0]))
{
//set timestamp for group
document.getElementById(group_array[i1][0]).innerHTML = group_array[i1][1];
if(group_array[i1][4] != -1)
{
//set data update error status
current_timestamp_color = timestamp_color;
if(group_array[i1][4] == 1)
{current_timestamp_color = timestamp_alarm_color;}
document.getElementById(group_array[i1][0]).style.backgroundColor = current_timestamp_color;
}
}
}
}
function update_map(map_id) {
document.getElementById('webmap_update').src = 'webmap_html_test_sub.html?first_time=1&map_id='+map_id;
}
-->
</script>
<style type="text/css">
body {
margin:0;
border:0;
padding:0px;background:#eaeaea;font-family:verdana, arial, sans-serif;
text-align: center;
}
A:active { color: #000000;}
A:link { color: #000000;}
A:visited { color: #000000;}
A:hover { color: #000000;}
#div_header {
/*position: absolute;*/
background: #ffffff;
width: 884px;
height: 60px;
display: block;
float: left;
font-size: 14px;
text-align: left;
/*overflow: visible;*/
}
#div_container{
background: #ffffff;border-left:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
float: left; width: 884px;}
#div_image_container{
position: relative;
width: 884px;
height: 549px;
background: #ffffff;
font-family:arial, verdana, arial, sans-serif;
/*display: block;*/
float:none!important;
float/**/:left;
border:1px solid #00ff00;
padding: 0px;
}
.div_group_box{
position: absolute;
width: -2px;
height: -2px;
background: #FFFFFF;
opacity: 1;
filter: alpha(opacity=100);
border:1px solid #000000;
font-size: 2px;
z-index: 0;
padding: 0px;
}
.div_group_container{
position: absolute;
opacity: 1;
filter: alpha(opacity=100);
z-index: 5;
/*display: block;*/
/*border:1px solid #000000;*/
}
.div_group_container A:active {text-decoration: none; display: block;}
.div_group_container A:link { color: #000000;text-decoration: none; display: block;}
.div_group_container A:visited { color: #000000;text-decoration: none; display: block;}
.div_group_container A:hover { color: #000000;text-decoration: none; display: block;}
.div_group_header{
background: #17B400;
border:1px solid #000000;font-size: 12px;
color: #FFFFFF;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
text-align: center;
}
.div_var_name_container{
color: #000000;background: #FFFFFF;
border-left:1px solid #000000;
border-top:0px solid #000000;
border-bottom:0px solid #000000;font-size: 12px;
float: left;
display: block;
text-align: left;
}
.div_var_name{
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
display: block;
}
.div_var_value_container{
color: #000000;background: #FFFFFF;
border-left:1px solid #000000;
border-right:1px solid #000000;
border-top:0px solid #000000;
border-bottom:0px solid #000000;font-size: 12px;
float: left;
text-align: center;
}
.div_var_value{
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
}
.div_var_unit_container{
color: #000000;background: #FFFFFF;
border-right:1px solid #000000;
border-top:0px solid #000000;
border-bottom:0px solid #000000;font-size: 12px;
float: left;
text-align: left;
}
.div_var_unit{
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
}
.div_timestamp{
float: none;
color: #000000;background: #F3F3F3;
border:1px solid #000000;font-size: 12px;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
text-align: center;
clear: left;
z-index: 100;
position: relative;
}
#div_last_update_time{
height: 14px;
width: 210px;
text-align: right;
padding: 1px;
font-size: 10px;
float: right;
}
.copyright{
height: 14px;
width: 240px;
text-align: left;
color: #777;
padding: 1px;
font-size: 10px;
float: left;
}
a img {
border: 1px solid #000000;
}
.clearer { clear: both; display: block; height: 1px; margin-bottom: -1px; font-size: 1px; line-height: 1px; }
</style>
</head>
<body onload="update_map(1)">
<div id="div_container"><div id="div_header"></div><div class="clearer"></div><div id="div_image_container"><img id="map" src="Images/maps/0054_gardabaer.jpg" title="My map" alt="" align="left" border="0" usemap ="#_area_links" style="padding: 0px; margin: 0px;" />
<div id="group_container_257" class="div_group_container" style="visibility:visible; top:10px; left:260px; cursor: pointer;">
<div class="div_group_header" style="clear:right">Site</div>
<div class="div_var_name_container">
<div id="group_name_257_var_8" class="div_var_name" >variable 1</div>
<div id="group_name_257_var_7" class="div_var_name" style="border-top:1px solid #000000;">variable 2</div>
<div id="group_name_257_var_9" class="div_var_name" style="border-top:1px solid #000000;">variable 3</div>
</div>
<div class="div_var_value_container">
<div id="group_value_257_var_8" class="div_var_value" >0</div>
<div id="group_value_257_var_7" class="div_var_value" style="border-top:1px solid #000000;">0</div>
<div id="group_value_257_var_9" class="div_var_value" style="border-top:1px solid #000000;">0</div>
</div>
<div class="div_var_unit_container">
<div id="group_unit_257_var_8" class="div_var_unit" >N/A</div>
<div id="group_unit_257_var_7" class="div_var_unit" style="border-top:1px solid #000000;">N/A</div>
<div id="group_unit_257_var_9" class="div_var_unit" style="border-top:1px solid #000000;">N/A</div>
</div>
<div id="group_257_timestamp" class="div_timestamp" style="">-</div>
</div>
</div><div class="clearer"></div><div class="copyright">© Copyright</div><div id="div_last_update_time">-</div>
</div>
<iframe id="webmap_update" style="display:none;" width="0" height="0"></iframe></body>
</html>
帶班div_var_value的div，div_timestamp & div_last_update_time都得到通過JavaScript函數更新。在div「div_image_container」是導致這一個看來，至少如果我改變位置屬性，這相對於靜態值，得到正確更新
這是更新值的頁面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Loader</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
<!--
window.onload = doLoad;
function refresh()
{
//window.location.reload(false);
var _random_num = Math.floor(Math.random()*1100);
window.location.search="?map_id=54&first_time=0&t="+_random_num;
}
var var_array = new Array();
var timestamp_array = new Array();
var_array[0] = Array('group_value_257_var_9','41.73',-1, 9, 0);
var_array[1] = Array('group_value_257_var_7','62.48',-1, 7, 0);
var_array[2] = Array('group_value_257_var_8','4.24',-1, 8, 0);
var current_time = new Date();
var current_time_str = current_time.getHours();
current_time_str += ':'+current_time.getMinutes();
current_time_str += ':'+current_time.getSeconds();
timestamp_array[0] = Array('group_257_timestamp',current_time_str,'box_group_container_206',-1, -1);
//timestamp_array[0] = Array('group_257_timestamp','11:33:16 23.Nov','box_group_container_257',-1, -1);
window.parent.updateParent(var_array, timestamp_array);
function doLoad()
{
setTimeout("refresh()", 10*1000);
}
//-->
</script>
</head>
<body>
</body>
</html>
我編輯了帖子，並添加了一個鏈接到有問題的網頁，我也測試了網頁瀏覽器7中的網頁，這個錯誤不會出現在那裏。我只在IE8中看到這個錯誤，並打開了兼容性。
如果有人曾經見過這個，並有修復，我會非常感激。
謝謝。
如果你有一個更簡潔的例子，這將有很大的幫助。它甚至可以幫助你弄清楚發生了什麼。 – Jerry 2009-11-23 15:18:51