• 让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/),且不得用于商业目的。如您有任何疑问或者授权方面的协商,请与我联系

  • 相关阅读:
    Spring MVC 核心组件详解
    Spring MVC 入门就这一篇
    Spring 事务解决方案
    【UGUI源码分析】Unity遮罩之Mask详细解读
    游戏开发中不同时区下的时间问题
    ARTS第十三周(阅读Tomcat源码)
    Win10 电脑安装.NET低版本提示“这台计算机中已经安装了 .NET Framwork 4.6.2或版本更高的更新”问题
    Dynamics 365 Setup 提示SqlServer 存在
    Dynamics CRM "Verification of prerequisites for Domain Controller promotion failed. Certificate Server is installed."
    Dynamics CRM
  • 原文地址:https://www.cnblogs.com/liminjun88/p/2440019.html
Copyright © 2020-2023  润新知