CSS网页布局问题:li上多出的margin问题

2016-02-20 00:06 10 1 收藏

有了下面这个CSS网页布局问题:li上多出的margin问题教程，不懂CSS网页布局问题:li上多出的margin问题的也能装懂了，赶紧get起来装逼一下吧！

【 tulaoshi.com - Web开发】

不知道大家知道这个问题不，在ie6的情况。假如ul中的li被设置了浮动，而ul本身有设置padding-top.你会发现li无端端多出了根ul的padding-top一样宽的margin-top(在浮动的li元素的数目已使分行的时候出现)。

解决方法：

1.请不要设置ul的padding，可以用margin代替，实在不行只能嵌套解决。

2.给ul设置zoom:1;overflow:hidden

3.设置ul的宽度或者高度

问题原因：ie6（或7）在这种情况下，ul的没有获得layout,致使奇怪问题出现。

来源:https://www.tulaoshi.com/n/20160220/1631287.html

上一篇： CSS:网页表单实现鼠标悬停交互效果
下一篇：解决Windows 7系统故障的方法

看过《CSS网页布局问题:li上多出的margin问题》的人还看了以下文章更多>>

网页空格引起网页布局间距问题

标签： Web开发

发现的“页面空格引起的间距问题”，是不同浏览器对“空格”宽度的解析不同造成的。 ie7浏览器解析的空格间距要比ie6/firefox大。解决方法如下： 1.删掉空格 2.给需要间距的元素margin属性，示例： .del img{margin-right:5px}

网页制作css不解析问题

标签： Web开发

网页采用了 UTF-8 编码格式，这本来没有问题，问题是外部 CSS 文件默认是 ANSI 编码，并没有保存为 UTF-8 格式。可能你会发现在一般情况下这样也是没有问题的，然而当 CSS 文件中包含有中文注释时就可能不尽如人意了！估计是 IE6 版本以下的浏览器在解析这个 CSS 文件时因为编码问题而无法正确解析，所以才会发生 CSS 在 IE6 下不起作用的情...

CSS教程:Firefox浏览器下margin-top问题

标签： Web开发

很早之前就有发现这个问题，也慢慢的摸索出了一些避免这个问题的规律，但是因为比较懒，迟迟没有细究原因，今天再次遇到，忍无可忍...一探究竟。长出现两种情况（一）margin-top失效先看下面代码： div div class="box1" float:left/div div class="b...

CSS代码解决网页挂马问题

标签： Web开发

两行CSS来解决，共5种方案一、 iframe{n1ifm:expression(this.src='about:blank',this.outerHTML='');}/*这行代码是解决挂IFRAME木马的哦*/ script{nojs1:expression((this.src.toLowerCase().indexOf('http')==0)？document.write('木马被成功隔离!'):'');} 原理：将script标记的src拿出来转为小写，再看是不是以http开头的外域JS脚本文...

DIV CSS布局浏览器兼容的问题

标签： Web开发

刚学css div布局，总会遇到很多浏览器兼容的问题，这个问题困扰了一段时间，只到看了精通css才看到几个解决办法。 1.加clear空div .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {heigh...

查看更多精彩>>