display:inline和display:inline-block中的问题

Question

我在display:inline和display:inline-block中有一个问题......我应该如何在css中定义这两者...即display:inline for ie和display:inline-block for ff和chrome...

Answer 1

您可以使用Conditional Comments加载带有仅由Internet Explorer加载的覆盖的CSS文件。例如：

<!-- main stylesheet for all browsers (uses display: inline-block) -->
<link href="main.css" media="screen" rel="stylesheet" type="text/css" />

<!-- overrides for IE 7 and earlier (uses display: inline where necessary) -->
<!--[if lte IE 7]>
  <link href="main-ie.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->

<!-- overrides for IE 6 and earlier (uses display: inline where necessary) -->
<!--[if lte IE 6]>
  <link href="main-ie6.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->

Answer 2

下面是CSS浏览器hacks的一个很好的概述：http://brainfart.com.ua/post/css-hacks-overview/

我想第4条、第8条或第9条可以适用于你的案子。

Answer 3

IE7及更低版本不支持内联块。但是有一个简单的解决方法。因为内联块-简单地说就是-一个行为像一个块但又像内联一样对齐的元素，你只需要告诉IE它是一个带有布局的内联元素( IE的愚蠢之处)。所以：

.el { display:inline-block; *display:inline; *zoom:1; }

这就对了！非常简单。你也可以使用有条件的评论，避免星型的攻击。我个人使用的是Paul爱尔兰的超文本标记语言声明(http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/)，然后我专门针对IE7和下面的内容使用：

.el { display:inline-block; }
.lt-ie8 .el { display:inline; zoom:1; }