另一个IE的味道 [英] Another IE odity
问题描述
我一直在摸着这个，我有一个简单的菜单，
< div id =" linksDiv" >
< ul id =" viewMenu" class =" hidden">
< li>
< a href =" customer.html">客户< / a>
< / li>
< li>
< a href =" finance.html"> Finance< / a>
< / li>
< / ul>
< / div>
隐藏的地方定义
..隐藏{visibility：hidden; }
通过单击顶级菜单中的几个条目中的一个来显示菜单。揭示代码是：
this.viewMenu.className =''viewMenuVisible'';
this.viewMenu.style.top =（event.clientY- 100）+''px'';
其中viewMenuVisible包含
..viewMenuVisible
{
可见性：可见;
显示：块;
背景颜色：浅蓝色;
颜色：黑色;
}
问题是，在IE中单击其中一个顶级条目会显示
浅蓝色div，但不是链接。再次单击，或单击另一个条目
，一切都会出现。
在FF或Opera上正常工作。
我可以通过明确设置< a>来强制解决问题。元素
style.visibility =''可见''，但这有点难看。
有什么想法吗？
-
Ian Collins。
I''ve been scratching my head over this one, I have a simple menu,
<div id="linksDiv">
<ul id="viewMenu" class="hidden">
<li>
<a href="customer.html">Customer</a>
</li>
<li>
<a href="finance.html">Finance</a>
</li>
</ul>
</div>
Where hidden is defined
..hidden { visibility: hidden; }
The menu is revealed by clicking one of several entries in a top level
menu. The reveal code is:
this.viewMenu.className = ''viewMenuVisible'';
this.viewMenu.style.top = (event.clientY-100)+''px'';
where viewMenuVisible contains
..viewMenuVisible
{
visibility: visible;
display: block;
background-color: lightblue;
color: black;
}
The problem is, in IE clicking one of the top level entries reveals the
light blue div, but not the links. Click again, or click another entry
and everything appears.
Works fine on FF or Opera.
I can force the issue by explicitly setting the <a> elements
style.visibility = ''visible'', but that''s a bit ugly.
Any ideas?
--
Ian Collins.
推荐答案
Ian Collins于2006年22日在comp.lang上写道。 javascript ：
Ian Collins wrote on 22 mei 2006 in comp.lang.javascript:
我一直在摸着这个，我有一个简单的菜单，
< div id =" linksDiv">
< ul id =" viewMenu" class =" hidden">
< li>
< a href =" customer.html">客户< / a>
< / li>
< li>
< a href =" finance.html"> Finance< / a>
< / li>
< / ul>
< ; / div>
隐藏的地方被定义
.hidden {visibility：hidden;通过单击顶级菜单中的几个条目之一，可以显示菜单。揭示代码是：
this.viewMenu.className =''viewMenuVisible'';
document.getElementById（''viewMenu''）。className =''viewMenuVisible'';
id是/应该是唯一的在一个文档中，所以本地化不是很有用，而且这个.viewMenu在我的试用中给出了语法错误。
this.viewMenu.style.top =（event .clientY-100）+ '' 像素 '';
仅适用于css位置编辑元素，而非此处。
viewMenuVisible包含
.viewMenuVisible
{
可见度：可见;
显示：块;
显示：状态不受影响。
background-color：lightblue;
颜色：黑色;
}
问题是，在IE中单击其中一个顶级条目显示
浅蓝色div，但不显示链接。再次单击，或单击另一个条目
，一切都会出现。
this.viewMenu。将会出错。
在FF或Opera上运行正常。
我可以通过明确设置< a>来强制解决问题。元素
style.visibility =''visible''，但这有点难看。
这在IE中运行良好：
==================== ===================
< style>
..hidden {visibility：hidden; }
..viewMenuVisible {
可见性：可见;
背景颜色：浅蓝色;
颜色：黑色;
}
< / style>
< div id =" linksDiv"
onclick =
" document.getElementById（''viewMenu''）。className =''vi ewMenuVisible'';">
< ul id =" viewMenu" class =" hidden">
< li>
< a href =" customer.html">客户< / a>
< / li>
< li>
< a href =" finance.html"> Finance< / a>
< / li>
< / ul>
点击此处
< / div>
========================================
任何想法？
I''ve been scratching my head over this one, I have a simple menu,
<div id="linksDiv">
<ul id="viewMenu" class="hidden">
<li>
<a href="customer.html">Customer</a>
</li>
<li>
<a href="finance.html">Finance</a>
</li>
</ul>
</div>
Where hidden is defined
.hidden { visibility: hidden; }
The menu is revealed by clicking one of several entries in a top level
menu. The reveal code is:
this.viewMenu.className = ''viewMenuVisible'';
document.getElementById(''viewMenu'').className = ''viewMenuVisible'';
An id is/should be unique in a document, so the localiing this is not
usefull, and this.viewMenu gives a syntax error in my trial.
this.viewMenu.style.top = (event.clientY-100)+''px'';
only works on a css position-ed element, not here.
where viewMenuVisible contains
.viewMenuVisible
{
visibility: visible;
display: block;
the display:; status is not affected.
background-color: lightblue;
color: black;
}
The problem is, in IE clicking one of the top level entries reveals the
light blue div, but not the links. Click again, or click another entry
and everything appears.
this.viewMenu. will give an error.
Works fine on FF or Opera.
I can force the issue by explicitly setting the <a> elements
style.visibility = ''visible'', but that''s a bit ugly.
This works fine in IE:
=======================================
<style>
..hidden { visibility: hidden; }
..viewMenuVisible {
visibility: visible;
background-color: lightblue;
color: black;
}
</style>
<div id="linksDiv"
onclick=
"document.getElementById(''viewMenu'').className=''vi ewMenuVisible'';">
<ul id="viewMenu" class="hidden">
<li>
<a href="customer.html">Customer</a>
</li>
<li>
<a href="finance.html">Finance</a>
</li>
</ul>
click here
</div>
========================================
Any ideas?
-
Evertjan。
荷兰。
（请将x''es更改为我的电子邮件地址中的点数）
--
Evertjan.
The Netherlands.
(Please change the x''es to dots in my emailaddress)
Evertjan。写道：
Evertjan. wrote:
Ian Collins于2006年22日在comp.lang.javascript上写道 ：
Ian Collins wrote on 22 mei 2006 in comp.lang.javascript:
我是我一直在摸着这个，我有一个简单的菜单，
< div id =" linksDiv">
< ul id =" viewMenu" class =" hidden">
< li>
< a href =" customer.html">客户< / a>
< / li>
< li>
< a href =" finance.html"> Finance< / a>
< / li>
< / ul>
< ; / div>
隐藏的地方被定义
.hidden {visibility：hidden;通过单击顶级菜单中的几个条目之一，可以显示菜单。揭示代码是：
this.viewMenu.className =''viewMenuVisible'';
document.getElementById（''viewMenu''）。className =''viewMenuVisible' ';
一个id在文档中是/应该是唯一的，因此本地化不是有用的，而this.viewMenu在我的试验中给出语法错误。
I''ve been scratching my head over this one, I have a simple menu,
<div id="linksDiv">
<ul id="viewMenu" class="hidden">
<li>
<a href="customer.html">Customer</a>
</li>
<li>
<a href="finance.html">Finance</a>
</li>
</ul>
</div>
Where hidden is defined
.hidden { visibility: hidden; }
The menu is revealed by clicking one of several entries in a top level
menu. The reveal code is:
this.viewMenu.className = ''viewMenuVisible'';
document.getElementById(''viewMenu'').className = ''viewMenuVisible'';
An id is/should be unique in a document, so the localiing this is not
usefull, and this.viewMenu gives a syntax error in my trial.
我使用本地因为菜单在几个地方使用。
I use a local because the menu is used in several places.
this.viewMenu.style.top =（event.clientY-100）+''px'';
仅适用于css位置编辑的元素，而不是这里。
this.viewMenu.style.top = (event.clientY-100)+''px'';
only works on a css position-ed element, not here.
元素是CSS定位。
..viewMenuVisible
{
职位：绝对;
剩余：100％;
宽度：100px;
}
The element is CSS positioned.
..viewMenuVisible
{
position: absolute;
left: 100%;
width: 100px;
}
其中viewMenuVisible包含
.viewMenuVisible
{
可见性：可见; 显示：阻止;
显示：;状态不受影响。
where viewMenuVisible contains
.viewMenuVisible
{
visibility: visible;
display: block;
the display:; status is not affected.
是的，它是作为一个实验。
this.viewMenu。会出错。
不在我的情况下。
True, it was there as an experiment.
this.viewMenu. will give an error.
Not in my case.
在FF或Opera上正常工作。
我可以通过明确设置< a取代;元素
style.visibility =''visible''，但这有点难看。
Works fine on FF or Opera.
I can force the issue by explicitly setting the <a> elements
style.visibility = ''visible'', but that''s a bit ugly.
这在IE中工作正常：
= ======================================
< style>
..隐藏{visibility：hidden; }
..viewMenuVisible {
可见性：可见;
背景颜色：浅蓝色;
颜色：黑色;
}
< / style>
< div id =" linksDiv"
onclick =
" document.getElementById（''viewMenu''）。className =' 'vi ewMenuVisible'';">
< ul id =" viewMenu" class =" hidden">
< li>
< a href =" customer.html">客户< / a>
< / li>
< li>
< a href =" finance.html">财务< / a>
< / li>
< / ul>
点击这里
< / div>
==================================== ====
This works fine in IE:
=======================================
<style>
..hidden { visibility: hidden; }
..viewMenuVisible {
visibility: visible;
background-color: lightblue;
color: black;
}
</style>
<div id="linksDiv"
onclick=
"document.getElementById(''viewMenu'').className=''vi ewMenuVisible'';">
<ul id="viewMenu" class="hidden">
<li>
<a href="customer.html">Customer</a>
</li>
<li>
<a href="finance.html">Finance</a>
</li>
</ul>
click here
</div>
========================================
我会再玩一次。
干杯。
-
Ian Collins。
I''ll have another play.
Cheers.
--
Ian Collins.
Ian Collins写道：
Ian Collins wrote:
我'我一直在摸着这个，我有一个简单的菜单，
< div id =" linksDiv">
< ul id =" viewMenu" class =" hidden">
< li>
< a href =" customer.html">客户< / a>
< / li>
< li>
< a href =" finance.html"> Finance< / a>
< / li>
< / ul>
< ; / div>
隐藏的地方被定义
.hidden {visibility：hidden;通过单击顶级菜单中的几个条目之一，可以显示菜单。揭示代码是：
this.viewMenu.className =''viewMenuVisible'';
this.viewMenu.style.top =（event.clientY-100）+''px'' ;
什么是this.viewMenu ？看起来你正在使用IE为id''ed元素创建的自动变量
- 但是你不能指望其他UA上的那个。
至少一个需要额外检查：
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 // EN">
< html>
< head>
< title> Untitled Document< / title>
< meta http-equiv =" Content型" content =" text / html;
charset = iso-8859-1">
< style type =" text / css">
..隐藏{
公开程度：隐藏;
}
..viewMenuVisible {
能见度：可见;
显示：块;
背景颜色：浅蓝色;
颜色：黑色;
}
< / style>
< script type =" text / javascript">
function test（）{
if（''undefined''== typeof viewMenu）{
viewMenu = document.getElementById（''viewMenu''）;
}
viewMenu.className =''viewMenuVisible'';
viewMenu.style.top =（event.clientY-100）+''px'';
}
< / script>
< / head>
< body< div id =" ; linksDiv"
< p style =" cursor：pointer" onclick =" test（）">点击切换< / p
< ul id =" viewMenu" class =" hidden"
< li>< a href =" customer.html">客户< / a>< / li
< li>< a href =" ; finance.html"> Finance< / a>< / li
< / ul
< / div>
I''ve been scratching my head over this one, I have a simple menu,
<div id="linksDiv">
<ul id="viewMenu" class="hidden">
<li>
<a href="customer.html">Customer</a>
</li>
<li>
<a href="finance.html">Finance</a>
</li>
</ul>
</div>
Where hidden is defined
.hidden { visibility: hidden; }
The menu is revealed by clicking one of several entries in a top level
menu. The reveal code is:
this.viewMenu.className = ''viewMenuVisible'';
this.viewMenu.style.top = (event.clientY-100)+''px'';
What is "this.viewMenu" ? It looks like you are using auto vars created
by IE for id''ed element - but you cannot count on that on other UA''s.
At least an extra check is needed:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
..hidden {
visibility: hidden;
}
..viewMenuVisible {
visibility: visible;
display: block;
background-color: lightblue;
color: black;
}
</style>
<script type="text/javascript">
function test(){
if (''undefined'' == typeof viewMenu) {
viewMenu = document.getElementById(''viewMenu'');
}
viewMenu.className = ''viewMenuVisible'';
viewMenu.style.top = (event.clientY-100)+''px'';
}
</script>
</head>
<body<div id="linksDiv" <p style="cursor:pointer" onclick="test()">Click to switch</p
<ul id="viewMenu" class="hidden"
<li><a href="customer.html">Customer</a></li
<li><a href="finance.html">Finance</a></li
</ul </div>
< / body>
< / html>
</body>
</html>
这篇关于另一个IE的味道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
