• li下沉 margin-top越界 浮动带来的影响


    使用li嵌套实现的二级导航菜单,在IE浏览器下显示正常,而在谷歌及360极速模式下最后的几个li标签下沉了,其实在webkit内核的浏览器中都会有这种情况,如下图:

    谷歌浏览器 <wbr>导航条最后几个li标签下沉

    出现此种状况,有两种可能:

    1、导航条的宽度不够,使得最后的几个li标签容纳不下,因此错行下沉,此时只需调整导航条和li标签的宽度;

    2、横排的导航条是通过li标签设置浮动实现的,即li标签的float属性,当设置li浮动而其所在的ul标签未设置浮动时也会出现此种状况,此时只需为li所在的ul设置float属性即可;为固定导航条的位置,可通过div标签先将位置固定,再使用ul li标签设置浮动实现;

    经测试,我的网站属于第二种情况,所以设置浮动时,尽量一个div中的子元素都设置浮动,不要设一部分。

    不行就是margin-top越界使用伪元素清除浮动

    .header:after,.sec_head:after,.sec_img:after,section:after,
    .header:before,.sec_head:before,.sec_img:before,section:before{content:"";display:table;clear:both;}

    这里的元素是当前元素和受影响的元素

    或者设置margin-top为负值;

  • 相关阅读:
    面向对象 & sql语句
    MySQL--数据库面试题汇集
    MySQL优化
    JAVA日报
    JAVA日报
    JAVA日报
    JAVA日报
    JAVA日报
    《大道至简》读后感
    JAVA日报
  • 原文地址:https://www.cnblogs.com/yanaweb/p/5049128.html
Copyright © 2020-2023  润新知