代码之家  ›  专栏  ›  技术社区  ›  Kyle

javascript创建的DIV不在IE中读取CSS

  •  0
  • Kyle  · 技术社区  · 14 年前

    又一次证明这是世界上最大的痛苦 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>
    

    非常感谢:)

    1 回复  |  直到 14 年前
        1
  •  1
  •   belugabob    14 年前

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

    如果通过删除-tools internet option s advanced-中“禁用脚本调试”选项旁边的复选标记来启用脚本调试,则会看到启动时出现脚本错误。 调查此错误,您可能会发现搜索框问题是由于加载页面时设置不正确所致。