• 让IE7/8使用CSS中firstchild和lastchild样式属性


    项目最终效果如下图所示:

    tab

    可以看出2个tab之间有一天分割线,这条分割线没有使用单独的div或者span。而是使用li标签的border-right。但是最后一个需要隐藏,否则效果不是很理想。

    最原始的写法是:

       1:  #tabnav li:last-child
       2:  {
       3:  border-right:none;
       4:  }
    在常用的浏览器中测试都通过了。但是IE7/8中,此样式不起作用。D右侧的边框还是会出现。我想了一下,那就给最后一个li加一个样式:
    <li id="sub_nav_user" class="dcontent lastitem" ><a >D Content</a></li>
     
    lastitem是我们为最后一个li标签添加的类。然后给lastitem添加border-right:none。以为大功告成,但是忘了项目还与权限有关。管理员可以看到以上A,B,C,D四个选项。但是普通用户只能看到A和B2个选项。这下问题出来了,我不能直接给B的border-right设置为none。后来想了一个方法就是给C选项设置border-left:1px solid #6655cc。但是样式需重调,这样显得有点麻烦。既然last-child是针对最后一个元素进行样式设定的,那么我们可以通过jQuery达到同样的效果。也不需要给最后一个li添加lastitem的样式了。代码如下:
    $("#tabnav li:last").addClass("lastitem");
     
    样式如下:
    #tabnav .lastitem
    {
    border-right:none;
    }

    这样当然不是最好的做法。但是我们有时需要转变思路,这样有时可以达到事半功倍的效果。

     

    本文基于 知识共享许可协议 知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议发布,欢迎转载,演绎,但是必须保留本文的署名liminjun88(包含链接http://www.cnblogs.com/liminjun88/),且不得用于商业目的。如您有任何疑问或者授权方面的协商,请与我联系

  • 相关阅读:
    关于如何使`(a === 1 && a === 2 && a === 3)`返回`true`问题的思考
    选择适合的类型判断方式
    this的指向问题
    MarkDown基础语法记录
    快速掌握vuex状态管理
    自己如何手动实现一个isNaN的方法
    移动端webapp使用flex布局解决底部导航被手机键盘顶起
    swiper文字内容超出一屏的时候如何实现区域滚动不翻页
    css3动画如何实现停止以后停留在最后一帧动画
    检测任意数据类型
  • 原文地址:https://www.cnblogs.com/liminjun88/p/2440019.html
Copyright © 2020-2023  润新知