Javascript 创建的 div 不读取 IE 中的 CSS

Question

再一次，IE 被证明是世界上最大的痛苦，在headset.no，我们有一个小的蓝色搜索字段，当你在其中输入例如“jabra”时，它应该会生成一个 div 给你下面的建议，这在 Chrome、Safari、opera 和 FF 中完美运行，但当然，IE 对如何处理它有另一个想法。

我使用CSS Browser Selector plugin 来识别本网站中浏览器之间的 CSS。

当我在 IE 上按 F12 时，似乎有许多内联样式应用于

<div class="autocomplete" id="searchSuggestions" 

style="
z-index: 2; 
position: absolute; 
filter: ; 
width: 130px; 
display: none; 
top: 193px; 
left: 1px;" 

getElementsByClassName="function() {...

源代码中没有。

有人可以看看并尝试告诉我这有什么问题吗？我已经耗尽了我所有的耐心。

JS：

var searchSuggestionInit = function()
{
    if ($('searchField'))
    {
        $('searchField').addClassName('quickSearch');
        $('searchField').down('.srch-txt').addClassName('text');
    }

    var field = $('searchContainer').down('.quickSearch').down('input.text');
    if (!field.id)
    {
        field.id = 'searchQuery';
    }

    field.setAttribute('autocomplete', 'none');

    new Ajax.Autocompleter(field.id, 'searchSuggestions', Router.createUrl('searchSuggestions', 'index'),
        {
        });
}

Event.observe(window, 'load', searchSuggestionInit);

还有 CSS：

/************************************************** SEARCH SUGGESTIONS*/
div.autocomplete {
  position:absolute;
  width:250px;
  background-color:white;
  border:1px solid #888;
  margin:0;
  padding:0;
  z-index: 50000;
  font-size: 0.85em;
  overflow: hidden;

}

.ie .div.autocomplete {
  position:absolute;
  width:250px;
  background-color:white;
  border:1px solid #888;
  margin:0;
  padding:0;
  z-index: 50000;
  font-size: 0.85em;
  overflow: hidden;
}
div.autocomplete ul {
  list-style-type:none;
  margin:0;
  padding:0;
}
div.autocomplete ul li.selected { background-color: #ffb;}
div.autocomplete ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
  white-space: nowrap;
}

还有一些源代码。

<div id="search" title="Søk automatisk i databasen">
<div id="searchField">
{capture assign="searchUrl"}{categoryUrl data=$category}{/capture}
{form action="controller=category" class="Search" handle=$form}
<input type="hidden" name="id" value="1" />
{textfield type="text" onblur="if(this.value=='') this.value='';" onfocus="if(this.value=='') this.value='';" class="srch-txt" name="q" id="s" size="16"}
</div>
<button type="submit" class="m" id="searchsubmit">&nbsp;</button>{/form}
</div>


{loadJs form=true}
<div id="searchSuggestions" class="autocomplete" style="display: none;"></div>


{literal}
<script type="text/javascript">  
$j("#search").tooltip({ offset: [45, 200], effect: 'slide' });
</script>
{/literal} 

        <div class="clear"></div>
    </div>
</div>

非常感谢:)

Answer 1

这在 IE7 中有效，但在 IE8 中无效。

如果您通过删除 - 工具 | 中“禁用脚本调试”选项旁边的复选标记来打开脚本调试互联网选项 |高级 - 您会看到启动时出现脚本错误。 调查此错误，您可能会发现搜索框问题是由于页面加载时未正确设置造成的。