CSS 问题

时间：2014-10-26 16:50:07 阅读：190 评论：0 收藏：0 [点我收藏+]

标签：style blog http color ar 使用 strong sp div

IE6 a:hover失效

a:hover { zoom:1}/*要解决这个问题就必须触发a:hover的layout，例如a:hover { display:inline-block}或者a:hover { zoom:1}等等。*/
a:hover span{color:#F00;}

<a href="#">鼠标经过时改变我的<span>颜色</span></a>

IE6/IE7下：块元素(li) inline-block解决方案

1、inline元素(比如span,em等)的display属性设置为inline-block时，所有的浏览器都支持；

2、block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的；
直接贴代码：

<div class="list">
  <span>无标题文档无标题文档</span>
  <span>无标题文档无标题文档</span>
  <span>无标题文档无标题文档</span>
  <span>无标题文档无标题文档</span>
</div>
<ul class="list1">
  <li>无标题文档无标题文档</li>
  <li>无标题文档无标题文档</li>
  <li>无标题文档无标题文档</li>
  <li>无标题文档无标题文档</li>
  <li>无标题文档无标题文档</li>
</ul>
.list{width:350px; border:1px solid #ccc;}
.list span{display:inline-block;width:150px; margin-left:20px;}
.list1{width:500px;border:1px solid #CCC; margin-top:20px;}
.list1 li{display:inline-block; width:150px; }

图1（ff/ie8-ie10等浏览器中的效果）

图2（ie6和ie7中的效果）
由上面两个图可以看出，如果是内联元素使用了inline-block，那所有的浏览器显示都是正常的。（ie6、ie7中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表征。）
但是如果是块级元素使用了inline-block，那在ie6和ie7中是有问题的。（ie6/ie7中块元素仅仅是被display:inline-block触发了layout，而它本身就是行布局，所以触发后，块元素依然还是行布局，而不会像火狐等其他浏览器块元素呈递为内联对象。）
那么，ie6/ie7下块元素如何实现display:inline-block的效果？解决方法如下：
让标准浏览器识别display:inline-block;让ie6/7识别display:inline;来覆盖上面的display:inline-block;然后通过zoom:1;来触发haslayout让inline元素在ie中表现得和inline-block元素一样。
.list1 li{display:inline-block; width:150px; *zoom:1;*display:inline;}
加上*zoom:1(触发ie6和ie7下的haslayout);*display:inline(只有ie6和ie7识别);
注：一定要加在display:inline-block;后面。

CSS 问题

标签：style blog http color ar 使用 strong sp div

原文地址：http://www.cnblogs.com/eaysun/p/4052109.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行