8

这是一个关于跨浏览器兼容性的相当普遍的问题。

在设计的各个方面，我目前正在研究实现我想要的布局和样式（不求助于使用图像）的唯一方法是使用display:inline-blockcss 样式选项。但是，IE8 和其他较旧的浏览器不支持此功能，这导致我的设计被破坏。

所以我的问题 1 有两个部分 - 有没有一种方法可以为 IE8 实现类似或等效的效果？2 - 如果不是，我怎样才能让我的设计顺利降级？

供您参考，这是我的设计中使用它的示例。

<div style="width:20px; height:20px; display:inline-block; background-color:rgb(200,120,120); margin-right:10px;"></div>Direct

它是一个 20x20 像素的色块，用于解释图表中的颜色。

更一般地说，每当我想要对正文中的特定文本位等进行更大的格式和布局控制时，就会出现这个问题。

在我目前正在进行的设计中，无论如何我都会放弃对旧浏览器类型的支持，因为它严重依赖于 canvas 元素。但是，我认为这将是一个很好的问题，因为我之前曾多次遇到过这个问题。

谢谢

4

4 回答 4

9

这是涵盖此主题的好资源：http: //foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

基本上 IE 有一个称为“hasLayout”的触发器。触发此操作将允许您display:inline-block在块级元素上使用（默认情况下，IE 仅允许在本机内联元素上使用 inline-block）。

此外，旧版本的 Fire Fox 也不支持 inline-block，但有一个“inline-stack”值 ( moz-inline-stack)。

据我所知，这是获得跨浏览器的最佳方式display:inline-block：

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
于 2012-09-24T14:46:26.480 回答
4

如此处给出：

IE 支持内联块，但仅适用于本机内联的元素。所以，如果你真的想使用 inline-block，你只能使用 spans、strongs 和 ems ......

是的，这不合逻辑，因为通常使用 div 或 span 都没关系……但请记住 - 这是 IE :)

所以只需更改<div>为<span>，就是这样！

于 2013-05-09T12:52:53.287 回答
0

使用此代码

*display: inline;
*vertical-align: middle;
于 2012-09-24T16:03:51.310 回答
0 
  display: inline-block; 
  *zoom: 1; 
  *display: inline;

您可以为其他浏览器添加内联块，但对于 IE，您可以使用 *. 它只适用于ie

于 2014-02-15T15:58:37.383 回答