大连仟亿科技
客服中心
  • 电话
  • 电话咨询:0411-39943997
  • 手机
  • 手机咨询:15840979770
    手机咨询:13889672791
网络营销 >更多
您现在的位置:仟亿科技 > 新闻中心 > 常见问题

使用无序列表制作横向菜单对付ie6

作者:billionnet 发布于:2012/6/1 17:39:00 点击量:

 

通常,我们可以如下所示制作横向菜单:

#commonUsedDocumentContainerDiv ul{
    margin:0px;
    padding:0px;
    list-style-type:none;
    vertical-align:middle  ;
}

#commonUsedDocumentContainerDiv li a{
    width:130px;  
    height
:75px;
    line-height:32px;
    
    font-family
:"宋体","Tahoma"; 
    font-size
:14px;   
    font-weight
:bold;           
    color
:#000000;
    
    text-decoration
:none;
    text-align:left;  
    
    background
:#ffffff;
}

#commonUsedDocumentContainerDiv li a:hover{
    width:130px;  
    height
:75px;
    line-height:32px;
    
    font-family
:"宋体","Tahoma"; 
    font-size
:14px;   
    font-weight
:bold;           
    color
:#0000ff;
    
    text-decoration
:none;
    text-align:left;  
    
    background
:#ffffff;
}


这样做,在FF或是ie8以上的版本中,都没有问题,但是ie6有问题,具体上看来本来应该是一横排的菜单变成了阶梯状,一下子就难看了。

这是因为ie6对ul/li的解释方式所致,要解决这个问题也很简单,对li的样式也进行设置就行了,如下的粗体部分:
 

#commonUsedDocumentContainerDiv ul{
    margin:0px;
    padding:0px;
    list-style-type:none;
    vertical-align:middle  ;
}

#commonUsedDocumentContainerDiv li{
    float:left;
    display:block;
    
    width
:130px;  
    height
:75px;
     
    background
:#ffffff;
}


#commonUsedDocumentContainerDiv li a{
    width:130px;  
    height
:75px;
    line-height:32px;
    
    font-family
:"宋体","Tahoma"; 
    font-size
:14px;   
    font-weight
:bold;           
    color
:#000000;
    
    text-decoration
:none;
    text-align:left;  
    
    background
:#ffffff;
}

#commonUsedDocumentContainerDiv li a:hover{
    width:130px;  
    height
:75px;
    line-height:32px;
    
    font-family
:"宋体","Tahoma"; 
    font-size
:14px;   
    font-weight
:bold;           
    color
:#0000ff;
    
    text-decoration
:none;
    text-align:left;  
    
    background
:#ffffff;
}


另外需要注意的是,li a和li a:hover中照样可以设置display:block,如果li a 或者li a:hover 有背景还非得如此不可,这和网上流传甚广的方案不一样,看来知识不能拿来就用,还需要自己尝试一下。



分享到:


评论加载中...
内容:
评论者: 验证码:
  

Copyright@ 2011-2017 版权所有:大连仟亿科技有限公司 辽ICP备11013762-1号   google网站地图   百度网站地图   网站地图

公司地址:大连市沙河口区中山路692号辰熙星海国际2215 客服电话:0411-39943997 QQ:2088827823 42286563

法律声明:未经许可,任何模仿本站模板、转载本站内容等行为者,本站保留追究其法律责任的权利! 隐私权政策声明