Chinaunix首页 | 论坛 | 博客

离不开大数据的社会计算lk.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

五岳之巅

  • 博客访问： 4022508
  • 博文数量： 272
  • 博客积分： 7846
  • 博客等级： 少将
  • 技术积分： 6476
  • 用 户 组： 普通用户
  • 注册时间： 2009-08-25 16:27
文章分类

全部博文（272）

我的朋友
最近访客
推荐博文
相关博文
CSS做的下拉菜单“在IE8中不显示”问题的解决方案

分类： 系统运维

2011-06-19 22:33:16

今天在做下拉菜单，最终效果要是下图这样的：


我的代码如下：
  1. <html>
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.     <style>
  5.         #menu{
  6.             margin:0;
  7.             padding:0;
  8.             list-style-type:none;
  9.             width:610px;
  10.             font:14px Arial;
  11.         }
  12.         
  13.         #menu li{
  14.             float:left;
  15.             width:150px;
  16.             padding:0px;
  17.             margin:0 1px 0 0;
  18.         }
  19.         
  20.         #menu li dl{
  21.             margin:0;
  22.             padding:0 0 10px 0;
  23.             background:#cb6 url(images/bottom.gif) no-repeat left bottom;
  24.         }
  25.         
  26.         #menu li dt{
  27.             margin:0;
  28.             padding:5px;
  29.             text-align:center;
  30.             border-bottom:1px solid #b00;
  31.             background:#ed8 url(images/top.gif) no-repeat top left;
  32.         }
  33.         
  34.         #menu li dt a, #menu li dt a:visited{
  35.             display:block;
  36.             color:#333;
  37.             text-decoration:none;
  38.         }
  39.         
  40.         #menu li dd{
  41.             margin:0;
  42.             padding:0;
  43.             color:#fff;
  44.             background:#47a;
  45.             display:none;
  46.         }
  47.         
  48.         #menu li dd.last{
  49.             border-bottom:1px solid #b00;
  50.         }
  51.         
  52.         #menu li dd a, #menu li dd a:visited{
  53.             display:block;
  54.             color:#fff;
  55.             text-decoration:none;
  56.             padding:4px 5px 4px 20px;
  57.             background:#47a url(images/arrow.gif) no-repeat 10px;
  58.         }
  59.         
  60.         #menu li:hover dd{
  61.             display:block;
  62.         }
  63.         
  64.         #menu li dd a:hover{
  65.             background:#147;
  66.             color:#9cf;
  67.         }
  68.         
  69.         #menu li dt.orange{
  70.             background:#fa5 url(images/top.gif) no-repeat top left;
  71.         }
  72.         
  73.         #menu li dt.yellow{
  74.             background:#ee5 url(images/top.gif) no-repeat top left;
  75.         }
  76.         
  77.         #menu li dt.green{
  78.             background:#5e5 url(images/top.gif) no-repeat top left;
  79.         }
  80.         
  81.         #menu li dt.blue{
  82.             background:#5cf url(images/top.gif) no-repeat top left;
  83.         }
  84.     </style>
  85. </head>
  86. <body>
  87.     <ul id="menu">
  88.         <li>
  89.             <dl>
  90.                 <dt class="orange"><a href="#">周一</a></dt>
  91.                 <dd><a href="#">稀饭</a></dd>
  92.                 <dd><a href="#">豆角焖面</a></dd>
  93.                 <dd class="last"><a href="#">面条</a></dd>
  94.             </dl>
  95.         </li>
  96.         <li>
  97.             <dl>
  98.                 <dt class="yellow"><a href="#">周二</a></dt>
  99.                 <dd><a href="#">豆浆油条</a></dd>
  100.                 <dd><a href="#">米饭套餐</a></dd>
  101.                 <dd class="last"><a href="#">稀饭包子</a></dd>
  102.             </dl>
  103.         </li>
  104.         <li>
  105.             <dl>
  106.                 <dt class="green"><a href="#">周三</a></dt>
  107.                 <dd><a href="#">稀饭</a></dd>
  108.                 <dd><a href="#">大米过油肉</a></dd>
  109.                 <dd class="last"><a href="#">打卤面</a></dd>
  110.             </dl>
  111.         </li>
  112.         <li>
  113.             <dl>
  114.                 <dt class="blue"><a href="#">周四</a></dt>
  115.                 <dd><a href="#">包子豆浆</a></dd>
  116.                 <dd><a href="#">蒜薹肉丝盖饭</a></dd>
  117.                 <dd class="last"><a href="#">烤全羊</a></dd>
  118.             </dl>
  119.         </li>
  120.     </ul>
  121. </body>
  122. </html>
结果，在Firefox和Chrome下都OK，但IE8下弹不出下拉菜单，又对比了书上的所有CSS和Xhtml代码，也没发现什么错误。

最后，突然发现网页最上方的
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="">
我代码中没有。
加上这些代码，在IE8中就正常了，看来IE8对transitional.dtd审查机制比较僵化。

大家以后编程时，千万别忘了“为了兼容IE系，声明下DTD啊”。
阅读(12423) | 评论(0) | 转发(0) |
0

上一篇：Joomla模板设计教程收集

下一篇：不得不转发：读博和大便的相同点

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6