ie7 innerhtml奇怪的显示问题

时间：2009-11-23 14:34:23

标签： javascript internet-explorer innerhtml

我对ie7有一个奇怪的问题（ie8在兼容模式下）。 我有div容器，我使用javascript innhtml 更新值以更新值。这在Firefox和ie8中运行良好。在ie7中，值不会更新，但是如果单击值并突出显示它们然后更新，那么如果更改浏览器的高度，则在下次更新时，值会更新正确。

我已经发现如果我将外部div容器的position属性从relative更改为static，那么更新可以正常工作。

可以在此处查看该页面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类div_var_value，div_timestamp＆amp; div_last_update_time全部由javascript函数更新。 div“div_image_container”似乎是导致它的一个，至少如果我将它的position属性从相对静态更改为静态值正确更新

这是更新值的页面：

<!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中只看到了这个错误，并且打开了兼容性。

如果有人之前已经看过这个并且有解决方法，我将非常感激。

感谢。

1 个答案:

答案 0 :(得分：0)

尝试使用JavaScript或CSS在div_timestamp上设置特定宽度，113px会为您完成。

相关问题
最新问题