黑马程序员技术交流社区

标题: overflow的浏览器兼容性问题 [打印本页]
作者: 第一印象    时间: 2013-9-3 09:42
标题: overflow的浏览器兼容性问题
本帖最后由 第一印象 于 2013-9-5 21:51 编辑

以下这段代码在火狐浏览器中显示有效(菜单能够打开和关闭)，但在IE10中显示无效，而Aptana给的提示是两者都有效，这是什么情况，主要问题是
overflow的问题，在IE10中对dl标签无效，但有趣的是，如果我的dl标签不作为body标签的第一个子元素存在就没问题了，就是说在dl标签前面加个hr标签或者任意其他标签，dl标签中的overflow属性又会生效了
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=GBK">
  4. <title>Insert title here</title>
  5. <style type="text/css">
  6.         dl dd{
  7.                 margin:0px;
  8.         }
  9.         
  10.         .close{
  11.                 height:16px;
  12.                 overflow:hidden;
  13.         }
  14.         
  15.         .open{
  16.                 height:16px;
  17.                 overflow:visible;
  18.         }
  19.         
  20. </style>

  22. <script type="text/javascript">
  23.         function showMenu(node){
  24.                 var oDL = node.parentNode;
  25.                 if(oDL.className=="open"){
  26.                         oDL.className = "close";
  27.                 }else{
  28.                         oDL.className = "open";                                
  29.                 }
  30.         }

  32. </script>
  33. </head>
  34. <body>

  36.         <dl class="close">
  37.                 <dt onclick="showMenu(this)">显示菜单</dt>
  38.                 <dd>我的第一个菜单</dd>
  39.                 <dd>我的第二个菜单</dd>
  40.                 <dd>我的第三个菜单</dd>
  41.         </dl>
  42. </body>
  43. </html>
复制代码
作者: 神之梦    时间: 2013-9-5 21:26
很明显有抽风的，先了解怎么用就ok



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2