css兼容问题与实践归纳总结

css兼容问题与实践归纳总结

一、IE6/7 原生块元素与display:inline-block;

<div  style="display:inline-block;">some text</div>

在ie6/7下，这个div还是会独占一行,所以要是需要设置inline-block的元素来呈现按钮图标之类的要素，最好用 span em i 等这些默认为内联元素的标签。

想起以前设置按钮时，也是吧 a 设置为 display:inline-block; 就可以设置宽高，可以在同一行显示的。div怎么不行了？

原来也有办法在IE6/7, 让块元素实现display:inline-block

• 先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象
  
  两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失

    div {display:inline-block;...}
    div {display:inline;}
  

• 直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）

    div {display:inline; zoom:1;...}
  

二、float后的元素与vertical-align

<div style="height:100px; background:pink; font-size:4em;">
    <span style="float:left; width:30px; height:30px; background:green; vertical-align:middle;"></span>我是裸文字 测试垂直对齐
</div>

对于已经设置浮动的元素，若要在垂直方向上调整位置，vertical-align不起作用，应该用margin-top/margin-bottom;

个人理解 vertical-align主要是设置line-box中inline or inline-block元素垂直方向的对齐方式的, 浮动的元素自身高度塌陷 没有行高，所以不能由vertical-align来调整。

三、清除浮动影响较好的方法 zoom:1 :after{}

ul li{float:left;}
ul{zoom:1} 触发hasLayout for IE
ul:after{content:''; display:block; clear:both;  font-size:0; height:0; line-height:0;}

<ul>
    <li>item</li><li>item</li>
</ul>

四、IE6 inline-block元素设置width:0; height:0; 但实际会被font-size 和 继承的line-height撑高

<span style="display:block; height:25px; line-height:25px;">
    选择省份<i style="display:inline-block; width:0; height:0; border:5px solid transparent; border-top-color:blue;"></i>
</span>

比如上面这个设置为小三角的<i>标签, 在IE6下还需要设置 font-size:0; line-height:0;

IE6/7 float:right后换行的问题

比如有代码如下： <h1>标题 <span>更多</span> </h1> 想显示成左右靠边的布局： 如果给span {float:right;} 但是,在IE6/7下会出现BUG。浮动框移动到本行行框之下。

解决方法：

1. 让span放到最前面。优点是：不用写代码。缺点：破坏语义。

2. 绝对定位。优点：不破坏语义。缺点：代码量加大。

3. 都添加浮动。优点：同上。缺点：会引起其他bug等。

4. 添加hack。_margin-top:-XXXXpx;优点：同上。缺点：使用了hack。 你有更好的方法可以给我留言。相互学习探讨。

五、IE6不支持max-width , IE7+都支持

max-width 在实现自适应内容宽度，但不超过给定宽度的情况下比较有用，比如 弹出二级商品分类菜单的场景

**解决方法： ** 可以在外层套一个div 设置宽度=最大宽度 内部div的宽度自适应内容

.container{width:500px;}
.menu{display:inline-block; *display:inline; *zoom:1; background:#aaa; max-width:500px;}
.menu a{display:inline-block; margin:0 10px;}

<div class="container">
    <div  class="menu">
        <a href="#">三级菜单</a><a href="#">蓝牙耳机</a><a href="#">充电器</a><a href="#">数据线</a><a href="#">手机耳机</a><a href="#">贴膜</a><a href="#">存储卡</a><a href="#">保护套</a><a href="#">车载</a><a href="#">iPhone配件</a>
    </div>
</div>

六、IE6不支持a以外的标签不支持 hover 伪类 ， IE7+都支持

如题

七、IE6垂直列表 列表项之间的空隙 阶梯bug

li a{display:block; border-bottom:1px solid #eee;}

在ietester 里面用debugbar查看文档代码，每个ul li里面都有这个 text: empty text node 这个东西，像<li><a>sometext</a></li> IE6下 js检测显示最后一个子节点为空白文本节点，改成<div><a>sometext</a></div>这样内部就无空白文本节点，这应该是导致li内部有空白行的原因

只要将列表li的子元素(子元素是行内元素的情况下，比如a,span)设置成块元素就会在ie6出问题，

**解决办法： **

1. 触发设置为display:block子元素的haslayout
2. 设置 li {display:inline} 此时空白节点依然是存在的只是没有换行撑出空白而已
3. 用js遍历删除那个空白的文本节点

如何触发ie的hasLayout

• position: absolute

• display: inline-block;

• float: left / right;

• width: 除“auto”以外的值

• height: 除”auto”以外的值，如”height: 1%;”

• zoom: 除“normal”以外的值

• writing-mode-tb-rl;

    li a{display:block; line-height:40px; height:40px; border-bottom:1px solid #E8E8E8; font-size:14px; color:#444; text-indent:18px; background:#fff;} 
  
    <ul>
        <li id="ali"><a href="javascript:;">热销机型</a><i></i></li>
        <li id="ali2"><a href="javascript:;">操作系统</a></li>
        <li><a href="javascript:;">屏幕大小</a><i></i></li>
        <li><a href="javascript:;">网络制式</a><i></i></li>
        <li><a href="javascript:;">价格区间</a><i></i></li>
        <li><a href="javascript:;">推荐人群</a><i></i></li>
        <li><a href="javascript:;">特色功能</a><i></i></li>
        <li><a href="javascript:;">运营商</a><i></i></li>
        <li><a href="javascript:;">手机配件</a><i></i></li>
    </ul>
  

像这样的html结构，触发display:block a元素的hasLayout也不行，解决方法只能是 li{display:inline;} 或者 js删除空文本节点

七、IE6 float元素内部有块级子元素的话，float内联特性会被破坏，即float的父元素的宽度被撑到100%

li{float:left;} a{display:block;} li的宽度被撑开 类似恢复block特性

<li><a>sometext</a></li>

八、IE6 不支持选择器 .class1.class2{}

.al{color:green;}
.ar{color:blue;}
.al.hover{border:1px solid green;}  /*~~IE6中 .al.hover {}等价于 .hover{},   .hover.al{} = .al{} 只识别最后一个class */ 

<div class="al hover">若支持class选择器 .aclass.bclass 则显示绿色字体 绿色边框</div>
<div class="ar hover">若支持class选择器 .aclass.bclass 则显示蓝色字体 蓝色边框, 结果同样显示绿色边框</div>

九、IE6/7 ul下只能包含li，若包含其他子元素则会被解析到就近的li里

<ul>
    <li>home</li>
    <li>contact</li>
    <b class="hlbg"></b>
</ul>

最后一个会被解析到最后一个li里面

十、让空白单元格显示边框？

 table{ border-collapse:collapse;  empty-cell:show; }  //~~~给table设置这2个样式