工作中遇到的CSS问题

摘自 http://hi.baidu.com/wicker_wind/item/31a1f1da08302cfaca0c394b

这些都是我之前工作中平时收集总结的问题，如果读者你有更正或增加的请回帖补充

1. 使用img ul ul img排列时底部在IE6下有间隙

解决方法：.downloadCon ul,.downloadCon .downLinImg{width:100%; float:left;}

.downloadCon ul,.downloadCon .downLinImg{ clear:both; display:block;}

downLinImg为图片样式

去掉图片与容器之间的空格并给图片加上属性align="absmiddle"

2 使用img <ul><li>img</li></ul>排列时底部有间隙

解决方法：给li加高度

PS：善于使用初始化样式

3. LI之前有空隙：font-size:0;/*IE6下LI出现空白*/

4. 3象素BUG：vertical-align:middle;/*for ie6 3x bug*/

5. 针对IE6下PNG背景透明图片重复：

_background-image: none

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="images/indexMainKbac.png",sizingMethod="crop");

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bodyMainLine.png", sizingMethod="scale");

sizingMethod="crop":剪切图片以适应边界

sizingMethod="scale" 拉伸图片以适应边界

6 </ul><img src="images/nl_newsTypeBottome.gif" width="198" height="8" /></div>结构下ul与图片在IE6下有间隙：

div ul,div img{clear:both; display:block;}

7 DIV设置浮动后IE6下链接失效问题

设置浮动的DIV设置了PNG透明滤镜,在此DIV外面再加一个DIV并设置浮动，然后将所有的A标签都设置 position:relative;即可

8 绝对定位的DIV在IE与FF下位置不相符

margin:0

9 已设置为最底层的浮动FLASH在IE6下仍位于浮动层之上：

将浮动FLASH层代码放于应该浮动层之上即可

10 IE6下设置浮动层的时候，z-index大的反而在下面的情况：

1，父级层尽量相对body或本身的父DIV同级

2，设置父级DIV的z-index属性

*尽量不要在行内标签里嵌套块标签，保持代码语意规范

11 li标记中包含块级样式元素后带来的高度问题.

给<li>添加vertical-align:bottom;样式解决

12 IE6下3象素慢移
给出现BUG的DIV加zomm:1; 使用盒子模型，在出现BUG的DIV下面加CLEAR样式DIV(可能是IE6下浮动未关闭的原因)

13 css 如何显示客户端没有的字体:
@font-face { font-family : name ; src : url ( url ) ; sRules }
@font-face { font-family : name ; src : url ( url ) ; sRules }
14 DIV 中LI标签底部出现4PX
     方法1 #list div设置clear:left|both，这时#list li不能设置width、height、zoom。      方法2
     #list li设置float:left，这时#list li可以设置width、height、zoom。
     #list li设置clear:left|both，这时#list li不能设置width、height、zoom。
    方法3
    IE6/IE7的这个Bug可以通过给li中的div设置vertical-align:top|middle|bottom解决。太怪异了，只要加上vertical-align的值是三者之一即可。

15 解决div内嵌套div的margin-top作用到父级DIV
<body style="margin:0;height:0;">
<div id="d0" style="background-color:#333333;height:500px;">
<br style="line-height:0;"/>

//不加入br这一行，在FIREFOX中id1的margin-top:20px将会在d0上作用，使d0上方与body间有20px的间距,d1与d0的上方没有间距，而IE内正常显示

16 FF不支持table的positon:relative属性

17 高度不能自适应
在外面加<div class=” grid”></div>
.grid:after{clear:both;
content:" ";
display:block;
height:0;}
18 margin 上面外边距折叠：设置父标签FLAOT属性

19 关于IE6下margin负值对象被隐藏的问题：结对象加position:relative‍

20 关于IE8FF下DIV嵌套出现外层自适应高度问题<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

1） 给外层DIV加样式：display=table

2） 定义一个CSS类：
.box:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
然后将父层DIV代码中的<div id="main">改为<div id="main" class="box">。

3） 给外层div加个overflow:auto;

21 li设置float属性后ul的高度不能自适应li设置float属性后ul的高度不能自适应

1）在ul 的样式里写上float:left，让ul 也飘浮；

2）在ul的样式里写上width:100%; overflow:hidden; 这样也好用；

转载于:https://www.cnblogs.com/JoannaQ/archive/2012/08/29/2661533.html

工作中遇到的CSS问题

猜你喜欢