相当于div显示IE8,IE7和旧浏览器的内联块

时间:2012-09-24 14:37:30

标签: html internet-explorer-8 cross-browser css

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

在设计的各个方面,我目前正致力于实现我想要的布局和样式(不使用图像)的唯一方法是使用display:inline-block css样式选项。但是,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 个答案:

答案 0 :(得分:9)

以下是涵盖此主题的优质资源:http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

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

此外,较旧版本的Fire Fox也不支持内联块,但具有“内联堆栈”值(moz-inline-stack)。

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

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

答案 1 :(得分:4)

给定here

  

IE支持内联块,但仅适用于本机元素   排队。所以,如果你真的想使用内联块,你就受到了限制   跨越,强者和ems ...

是的,这不符合逻辑,因为通常如果你使用div或span就没关系...但请记住 - 这是IE:)

所以只需将<div>更改为<span>就可以了!

答案 2 :(得分:0)

使用此代码

*display: inline;
*vertical-align: middle;

答案 3 :(得分:0)

  display: inline-block; 
  *zoom: 1; 
  *display: inline;

您可以为其他浏览器添加内联块,但对于IE,您可以使用*添加样式。它只适用于