工作中遇到的CSS问题
2012-08-29 10:04
274 查看
摘自 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内正常显示
<div id="d1" style="background-color:#000000;margin-top:20px;height:100px;"></div>
<div id="d2" style="background-color:#000000;margin-top:20px;height:100px;"></div>
</div>
</body>
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)[b] 定义一个CSS类:[/b]
.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; 这样也好用;
这些都是我之前工作中平时收集总结的问题,如果读者你有更正或增加的请回帖补充
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内正常显示
<div id="d1" style="background-color:#000000;margin-top:20px;height:100px;"></div>
<div id="d2" style="background-color:#000000;margin-top:20px;height:100px;"></div>
</div>
</body>
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)[b] 定义一个CSS类:[/b]
.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; 这样也好用;
相关文章推荐
- css/js(工作中遇到的问题)-5
- css/js(工作中遇到的问题)
- css/js(工作中遇到的问题)-3
- 工作中遇到的问题总结1(css类)
- css/js(工作中遇到的问题)-2
- 我在工作中遇到的css问题汇总
- css/js(工作中遇到的问题)-4
- css/js(工作中遇到的问题)-6
- 工作上遇到的css 问题,兼容性问题总结
- 记录自己学习心得以及工作中遇到问题的总结
- 开始记录工作中遇到的一些技术问题
- Java web 工作中遇到的一些问题
- 工作中遇到的问题和解决办法9
- J2EE开发工作中遇到的异常问题及解决方法总结
- js在工作中遇到的一些问题
- 2013年工作中遇到的20个问题:221-240
- 工作中Tortoise SVN遇到的一个问题,Commit failed (details follow): Authorization failed
- 2013年工作中遇到的20个问题:121-140
- 实际宽度与赋值宽度,工作中遇到一个问题。