一些CSS"bug"

1.img三像像素问题

解决办法:img{display:block;} or img{vertical-align:middle;}

问题原因:img是行内元素,默认的垂直对齐方式 baseline,下面会空出来留个 y g 这样的字母显示下面的部分。

2. ie6浮动元素2倍边距问题

解决办法:{dispaly:inline;}

问题原因:ie6下浮动元素的浮动方向和浮动边界的方向一致时会出现这个问题

3.关于外边距叠加

注意:普通文档流中的块框的崔志外边距会发生叠加。行内框、浮动框、绝对定位框之间的外边距不会。ie拥有布局的元素不会叠加。

4.ie6文本偏移3像素bug[待细研究]

解决办法:文本元素 {height:1%;margin-left 0;} 浮动元素 {margin:0;}

问题原因:文本与一个浮动元素相邻时,这个bug就会表现出来。

5.ie6绝对定位[待细研究]

解决办法: 容器{height:1%;}

问题原因:没有获取layout的元素,不创建新的上下文,绝对定位元素相对于视口进行定位

6.ie6-7拥有布局[待细研究]

注意:在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。

.gainlayout { _height: 0; }//ie6

.gainlayout { min-height: 0; }//ie7

http://yiminghe.iteye.com/blog/367384

http://www.w3ctech.com/p/1101

http://www.cnblogs.com/radom/archive/2010/06/09/1755157.html

http://kayosite.com/internet-explorer-haslayout-in-detail.html

7.行内元素

注意:

    块级元素,在浏览器中通常是垂直布局,然后可以用margin来控制块级元素之间的间距,并列和嵌套的块级元素都存在外边距,也就是margin合并的问题。

    而行内元素是以水平的方式布局,垂直方向的margin,padding都是无效的,并且设置的宽高也是无效的。

8.空a元素ie无法点击

正常的display没用。

两种解决方法(主要是针对a标签不能设置背景情况):

        1、给a标签添加样式:background:url(about:blank);

        2、给a标签随便添加背景色或者背景图片,然后将a标签的透明度设置为0,不过在IE中需要使用滤镜,即 opacity:0;filter:alpha(opacity=0);

原文地址:https://www.cnblogs.com/acjialiren/p/css-points.html