15个经典的css常见问题及解决方法汇总

   

在div+css设计中，我们常发生这样的问题：如何清除列表前的圆点、IE6的双倍边距bug、浮动ie产生的双倍距离、IE与宽度和高度的问题等，现汇总问题与解决方法如下。

1.怎么让一个div块级元素水平居中

#layout {margin:0 auto;}

2.如何清除列表前的圆点

.list { list-style-type:none;}

3.CSS强制换行与强制不换行

/* 禁止换行 */

.nowrap{word-break:keep-all;white-space:nowrap;}

/* 强制换行 */

.break{word-break:break-all;}

4.IE6的双倍边距bug

在css中增加代码 display:inline;

5.margin加倍的问题    

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;    例如： <#div id=”imfloat”>    相应的css为    #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}

6.浮动ie产生的双倍距离    

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}    这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);    #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果}

7.IE与宽度和高度的问题

IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。    比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：    #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}  

8.IE6下为什么图片下有空隙产生

解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.

9.web标准中定义id与class有什么区别吗

(1)web标准中是不容许重复ID的,比如 div id="aa"   不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.

(2)属性的优先级问题 ID 的优先级要高于class,看上面的例子

 (3)方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

10.LI中内容超过长度后以省略号显示的方法

此方法适用与IE与OP浏览器

<style type="text/css">

<!--

 li { width:200px; white-space:nowrap;  text-overflow:ellipsis; -o-text-overflow:ellipsis;      overflow: hidden;   }

-->

</style>

11.怎么样才能让层显示在FLASH之上呢

解决的办法是给FLASH设置透明 <param name="wmode" value="transparent" />

12.为什么无法定义1px左右高度的容器

IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

13.为什么IE6下容器的宽度和FF解释不同

CSS HACK的方法  height:20px; /*For Firefox*/    *height:25px; /*For IE7 & IE6*/    _height:20px; /*For IE6*/    注意顺序。   这样也属于CSS HACK，不过没有上面这样简洁。    #example { color: #333; } /* Moz */    * html #example { color: #666; } /* IE6 */    *+html #example { color: #999; } /* IE7 */  

<!--其他浏览器 -->    <link rel="stylesheet" type="text/css" href="css.css" />    <!--[if IE 7]>    <!-- 适合于IE7 -->    <link rel="stylesheet" type="text/css" href="ie7.css" />    <![endif]-->    <!--[if lte IE 6]>    <!-- 适合于IE6及一下 -->    <link rel="stylesheet" type="text/css" href="ie.css" />    <![endif]-->  

14.用CSS实现段落前面缩进两个字

p{ text-indent: 2em; /*em是相对单位，2em即现在一个字大小的两倍*/}

15.IE6 li下height高度变高问题

如：下面代码在IE6下高度会变高的

#fcnum li{ float:left; background:#FFF; margin-left:5px; height:7px; width:7px; cursor: pointer; margin-top:8px;}

方法：

在代码中加入 overflow: hidden;