等效的div显示inline-block为IE8，IE7和旧版的浏览器 [英] Equivalent of div display inline-block for IE8, IE7 and older browsers

问题描述

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

This is a fairly generic question about cross-browser compatibility.

在设计中的各个点，我正在努力实现布局的唯一方法，我想要的样式（不求助于使用图像）是使用 display：inline-block css样式选项。但是，这不是IE8和其他旧版本的浏览器支持，这导致我的设计中断。

At various points in a design I'm currenly working on the only way to achieve the layout and style that I want (without resorting to using images) is to use the display:inline-block css style option. However, this is not supported by IE8 and other older browsers and this results in my design beign broken.

所以有两个部分，我的问题
1 - 有没有一种方法实现类似或等效的IE8的效果？
2 - 如果不是，我如何能使我的设计平滑地降级？

So there are two parts to my question 1 - Is there a method of achieving a similar or equivalent effect for IE8? 2 - If not, how best can I make my design degrade smoothly?

为了参考，这里有一个例子，

For your reference, here's an example of where this is being used in my design.

< div style =width：20px; height：20px; display：inline-block; background-color：rgb（200,120,120） ; margin-right：10px;>< / div> Direct

这是一个20x20像素的颜色块，一个图表。

It is a 20x20 pixel colour block to explain the colours in a chart.

更一般地说，当我想要更大的格式化&

More generally this issue arises whenever I want greater formatting & layout control over a particular bit of text etc within a body of text.

在设计中，我目前正在努力，我将放弃对旧版浏览器类型的支持反正，因为它很大程度上依赖于canvas元素。然而，我认为这将是一个很好的问题，因为我遇到了问题几次之前。

In the design I'm currently working on I'll be dropping support for the older browser types anyway since it's heavily reliant on the canvas element. However, I thought this would be a good question to ask as I've come across the problem several times before.

感谢

推荐答案

这是一个很好的资源，涵盖了这个主题： http://foohack.com/2007/11/cross-browser- support-for-inline-block-styleing /

Here is a good resource that covers this topic: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

基本上IE有一个名为hasLayout的触发器。触发这将允许您在块级别元素上使用 display：inline-block （默认情况下IE仅允许在原生内联元素上使用inline-block）。

Basically IE has a trigger called "hasLayout". Triggering this will allow you to use display:inline-block on a block level element (by default IE only allows inline-block on native inline elements).

此外，旧版本的Fire Fox不支持inline-block，但是有一个inline-stack值（ moz-inline- stack ）。

Additionally older version of Fire Fox didn't support inline-block either, but had an "inline-stack" value (moz-inline-stack).

据我所知，这是获取跨浏览器显示的最佳方式：inline-block ：

Here is, to my knowledge, the best way to get a cross-browser display:inline-block:

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

这篇关于等效的div显示inline-block为IE8，IE7和旧版的浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！