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个样式
上一篇:比较两个数据库表table结构不同之处


下一篇:【zheng阅读系列】shiro权限管理