博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
工作中遇到的CSS问题
阅读量:6841 次
发布时间:2019-06-26

本文共 2859 字,大约阅读时间需要 9 分钟。

摘自

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

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 关于IE8FFDIV嵌套出现外层自适应高度问题<?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; 这样也好用;

转载地址:http://vkdul.baihongyu.com/

你可能感兴趣的文章
【Spring】依赖注入三种方式
查看>>
【安全牛学习笔记】 本地提权
查看>>
VS2017 创建NET Core 1.1 Web项目,发布后找不到引用的js文件
查看>>
Linux_Mail_Server
查看>>
网络相关排查总结
查看>>
C++错误收集(2)
查看>>
博客园的老虞要搬家罗
查看>>
Data Pump需要用到steam pool
查看>>
异步7月上市新书,送出一本你爱的
查看>>
如何查看、管理npm模块--react-native为例
查看>>
归档及压缩
查看>>
Redis基础及与spring的整合总结
查看>>
小型公司局域网故障排查(思科)
查看>>
搭建Mysql数据库
查看>>
构建Squid传统代理及透明代理
查看>>
Ejecta (HTML5 Canvas加速引擎)
查看>>
数据备份与恢复
查看>>
【比原链】比原链合约入门
查看>>
PLSQL Developer连接Oracle11g 64位数据库配置详解
查看>>
什么是最有效的ddos混合防御方法?
查看>>