解决办法: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);