zoukankan      html  css  js  c++  java
  • 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为负值;

  • 相关阅读:
    sublime & atom 插件
    正则表达式必知必会读书笔记
    前端自动化工具
    CSS3效果收集
    JS 常用功能收集
    【1】Hover 效果收集
    javascript进阶高手必备知识
    ionic 实现仿苹果手机通讯录搜索功能
    ionic2APP 如何处理返回键问题
    三张图搞懂JavaScript的原型对象与原型链
  • 原文地址:https://www.cnblogs.com/yanaweb/p/5049128.html
Copyright © 2011-2022 走看看