Javascript创建的div不在IE中读取CSS
再一次,IE被证明是世界上最大的痛苦,在上,我们有一个小的蓝色搜索字段,当你在其中键入例如“jabra”时,它应该生成一个div,在下面给你建议,这在Chrome、Safari、opera和FF中非常有效,但当然,IE对如何处理它有另一个想法 我使用CSS来识别这个站点中浏览器之间的CSS 当我在IE上点击F12时,似乎有许多内联样式应用于Javascript创建的div不在IE中读取CSS,javascript,html,css,internet-explorer,Javascript,Html,Css,Internet Explorer,再一次,IE被证明是世界上最大的痛苦,在上,我们有一个小的蓝色搜索字段,当你在其中键入例如“jabra”时,它应该生成一个div,在下面给你建议,这在Chrome、Safari、opera和FF中非常有效,但当然,IE对如何处理它有另一个想法 我使用CSS来识别这个站点中浏览器之间的CSS 当我在IE上点击F12时,似乎有许多内联样式应用于 <div class="autocomplete" id="searchSuggestions" style=" z-index: 2; pos
<div class="autocomplete" id="searchSuggestions"
style="
z-index: 2;
position: absolute;
filter: ;
width: 130px;
display: none;
top: 193px;
left: 1px;"
getElementsByClassName="function() {...
和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"> </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>
{capture assign=“searchUrl”}{categoryUrl data=$category}{/capture}
{form action=“controller=category”class=“Search”handle=$form}
{textfield type=“text”onblur=“if(this.value=”)this.value=”;onfocus=“if(this.value=”)this.value=”;class=“srch txt”name=“q”id=“s”size=“16”}
{/form}
{loadJs form=true}
{literal}
$j(“#search”)。工具提示({offset:[45200],效果:'slide'});
{/literal}
非常感谢:)这在IE7中有效,但在IE8中无效 如果通过删除-Tools | internetoptions | Advanced中两个“禁用脚本调试”选项旁边的复选标记来启用脚本调试,您将看到启动时出现脚本错误。
调查此错误,您可能会发现搜索框问题是由于加载页面时未正确设置所致。谢谢bob,有一个对脚本的旧调用不再使用,我删除了该调用,现在生成的div在IE8中根本不显示。我们不再支持旧版本,仅供参考。在我的IE8中显示,但比输入字段低得多-也许顶部是相对于输入字段的,例如它下面的198px?@mplungjan:是的,这是我需要取消的,tpo 198px是一种我在任何地方都没有定义的内联样式,在源代码和javascript中都没有。有些东西在添加内联样式——当我在Chrome中查看页面时,它们也在那里。真的吗?那到底是什么?有没有办法追溯它?我不太喜欢调试JS。
<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"> </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>