Question

我在显示中遇到问题：内联和显示：内联块.......我应该如何在css中定义...即display：inline for ie和display：inline-block for ff and chrome ....

Answer 1

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

我想第4,8或9节可能适用于您的情况。

Answer 2

您可以使用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 3

IE7及以下版本不支持内联块。但是有一个简单的解决方法。作为一个内联块 - 简单地说 - 一个行为类似于块但是对齐为内联的元素，你只需要告诉IE它是一个带有布局的内联元素（IE idiossincracy）。所以：

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

你有它！真的很简单。你也可以使用条件评论并避免明星黑客攻击。我个人使用Paul Irish的HTML声明（http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/），然后使用以下方式专门针对IE7及以下目标：

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

Answer 4

IE的问题在于它不能正确支持“内联块”。因此，为了弥补这一点，你必须浮动元素。因此，必须使用“clear：both”清除浮动元素的容器，除非所有内容都是固定大小，例如菜单链接。

我更倾向于找出每个浏览器不支持的内容，而不是为每个浏览器编写单独的样式表。

显示中的问题：内联和显示：内联块

4 个答案: