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

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

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为负值;

li下沉 margin-top越界 浮动带来的影响的更多相关文章

  1. float---浮动带来的影响与清除浮动带来的影响方法----在路上(20)

    使用float会带来哪些影响: 脱标:无行级块级之分: 相互贴靠:若想之间有空隙可用margin与padding: 顶边对齐: 文字环绕: 当使用float后,子标签脱离父标签,父标签就会失去高度,此 ...

  2. 为什么设置overflow为hidden可以清除浮动带来的影响

    1.问题起源 在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了.使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动 ...

  3. 浅谈css中浮动和清除浮动带来的影响

    有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...

  4. 详解为什么设置overflow为hidden可以清除浮动带来的影响

    1.问题起源 在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了.使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动 ...

  5. 《----css样式---------浮动带来的影响与解决方法---------------》

    浮动就是让我们的元素脱离标准文档流,目的是为了布局好看! 浮动的现象: 脱离标准文档流被叫做脱流,同时会出现字围现象. 浮动的元素会相互贴靠,而且如果父容器空间足够大,则浮动的元素会正常紧靠也就是后一 ...

  6. li里的a标签浮动了,为什么li本身也浮动了?

    <ul> <li><a href="#"></a></li> <li><a href="#& ...

  7. 如何清除浮动(float)所带来的影响

    清除浮动(float) 1.定义和用法 在w3c中给了浮动这样的定义. "float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素 ...

  8. 解决float浮动带来的父元素高度没有的问题---清除浮动

    float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...

  9. [css]浮动造成的影响

    浮动造成的影响: 子元素浮动,父元素无法被撑出高了. 如果要给父元素做通栏background? 如果两个box的子元素都浮动,且希望两个box分行显示? box1 box2 box3: float: ...

随机推荐

  1. 理解Linux中断 (3)【转】

    转自:http://blog.csdn.net/tommy_wxie/article/details/7425712 版权声明:本文为博主原创文章,未经博主允许不得转载. .下半部 在中断处理过程中, ...

  2. 【Pro ASP.NET MVC 3 Framework】.学习笔记.7.SportsStore:购物车

    3 创建购物车 每个商品旁边都要显示Add to cart按钮.点击按钮后,会显示客户已经选中的商品的摘要,包括总金额.在购物车里,用户可以点击继续购物按钮返回product目录.也可以点击Check ...

  3. 记录一下:chrome上,把网页保存为文件的插件

    插件地址: https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoal ...

  4. Quartz2D简介及基本线条绘制

    * Quartz2D简介 1.什么是Quartz2D? 他是一个二维的绘图引擎,同时支持iOS和Mac系统 2.Quartz2D能完成的工作 画基本线条,绘制文字,图片,截图,自定义UIView. 3 ...

  5. 搭建HTTP Live Streaming直播系统

    最近,需要将苹果的HTTP Live Streaming系统搭建起来.完全没有头绪,故第一步就是学习. 一.学习资料 官网资料 1. http://developer.apple.com/resour ...

  6. Codeforces 743D:Chloe and pleasant prizes(树形DP)

    http://codeforces.com/problemset/problem/743/D 题意:求最大两个的不相交子树的点权和,如果没有两个不相交子树,那么输出Impossible. 思路:之前好 ...

  7. UWP开发入门系列笔记之(一):UWP初览

    标签: 随着微软Build2015带来的好消息,Win10正式版发布的日子已经离我们越来越近了,我们也终于欣喜地看到:一个统一的Windows平台对于开发人员来说充满了吸引力,这局棋下的好大的说--于 ...

  8. Humble Numbers

    Humble Numbers Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9988 Accepted: 4665 Descri ...

  9. 深入理解include预编译原理

    http://ticktick.blog.51cto.com/823160/596179 你了解 #include 某个 .h 文件后,编译器做了哪些操作么? 你清楚为什么在 .h文件中定义函数实现的 ...

  10. 从客户端中检测到有潜在危险的Request.Form 值

    今天往MVC中加入了一个富文本编辑框,在提交信息的时候报了如下的错误:从客户端(Content="<EM ><STRONG ><U >这是测试这...&q ...