zoukankan      html  css  js  c++  java
  • ie6的又一个变态问题

    要实现如下的布局:

    最开始想的是:

    <div class="tab_title"><em class="selected"><span>新闻排行</span></em><em><span>热门课程</span></em></div>

    css如下:

    #contain_right .tab .tab_title{height:34px;line-height:34px;background:none #fafafa;border-bottom:1px solid #368ee0;}
    #contain_right .tab .tab_title em{display:block;float:left;78px;height:34px;float:left;height:34px;text-align:center;font-size:14px;}

    #contain_right .tab .tab_title em.selected{height:33px;background-color:#fff;border-2px 1px 0 1px;border-style:solid solid none;border-color:#368ee0;color:#368ee0;font-weight:700;}

    不设置tab_title的overflow属性刚好可以在标准浏览器中正常显示,ie6除外。不管怎么用hack控制selected  em的高度都没法实现如图效果。

     后面改成在最里面放个span,绝对定位,

    <div class="tab_title"><em class="selected"><span>新闻排行</span></em><em><span>热门课程</span></em></div>

    #contain_right .tab .tab_title{height:34px;line-height:34px;background:none #fafafa;border-bottom:1px solid #368ee0;}
    #contain_right .tab .tab_title em{display:block;position:relative;float:left;78px;height:34px;float:left;}
    #contain_right .tab .tab_title em span{position:absolute;78px;height:34px;text-align:center;font-size:14px;}
    #contain_right .tab .tab_title em.selected span{height:33px;overflow:hidden;background-color:#fff;border-2px 1px 0 1px;border-style:solid solid none;border-color:#368ee0;color:#368ee0;font-weight:700;}

    圈中的很重要,去掉ie6总会多一个像素。

    人生短短几十年,要在有限的生命里多做店有意义的事情。莫要让自己迎合别人的眼光活着。随心而为,听从心的声音。讨好自己,悠哉悠哉!
  • 相关阅读:
    台式机+笔记本的扩展模式+远程登录设置
    Hadoop 集群搭建以及脚本撰写
    Python 入门学习(三)
    1056 Mice and Rice
    1057 Stack
    1058 A+B in Hogwarts
    1059 Prime Factors
    使用熔断器仪表盘监控
    使用熔断器防止服务雪崩
    创建服务消费者(Feign)
  • 原文地址:https://www.cnblogs.com/jiaojiaome/p/3615447.html
Copyright © 2011-2022 走看看