Html 相当于 IE8、IE7 和旧浏览器的 div 显示内联块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12567240/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Equivalent of div display inline-block for IE8, IE7 and older browsers
提问by Marvin
This is a fairly generic question about cross-browser compatibility.
这是一个关于跨浏览器兼容性的相当普遍的问题。
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-blockcss style option. However, this is not supported by IE8 and other older browsers and this results in my design beign broken.
在设计的各个方面，我目前正在研究实现我想要的布局和样式的唯一方法（不诉诸使用图像）是使用display:inline-blockcss 样式选项。但是，IE8 和其他较旧的浏览器不支持此功能，这导致我的设计遭到破坏。
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?
所以我的问题 1 有两个部分 - 是否有一种方法可以为 IE8 实现类似或等效的效果？2 - 如果不是，我怎样才能最好地让我的设计顺利降级？
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
<div style="width:20px; height:20px; display:inline-block; background-color:rgb(200,120,120); margin-right:10px;"></div>Direct
It is a 20x20 pixel colour block to explain the colours in a chart.
它是一个 20x20 像素的色块，用于解释图表中的颜色。
More generally this issue arises whenever I want greater formatting & layout control over a particular bit of text etc within a body of text.
更普遍的是，每当我想要对文本正文中的特定文本位等进行更好的格式设置和布局控制时，就会出现这个问题。
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.
在我目前正在进行的设计中，无论如何我都会放弃对旧浏览器类型的支持，因为它严重依赖于 canvas 元素。但是，我认为这将是一个很好的问题，因为我之前多次遇到过这个问题。
Thanks
谢谢
回答by Joel Kinzel
Here is a good resource that covers this topic: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
这是一个很好的资源，涵盖了这个主题：http: //foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
Basically IE has a trigger called "hasLayout". Triggering this will allow you to use display:inline-blockon a block level element (by default IE only allows inline-block on native inline elements).
基本上 IE 有一个名为“hasLayout”的触发器。触发这将允许您display:inline-block在块级元素上使用（默认情况下，IE 仅允许在本机内联元素上使用内联块）。
Additionally older version of Fire Fox didn't support inline-block either, but had an "inline-stack" value (moz-inline-stack).
此外，旧版本的 Fire Fox 也不支持 inline-block，但有一个“inline-stack”值 ( moz-inline-stack)。
Here is, to my knowledge, the best way to get a cross-browser display:inline-block:
据我所知，这是获得跨浏览器的最佳方法display:inline-block：
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
回答by TMS
As given here:
正如这里给出的：
IE supports inline-block, but only for elements that are natively inline. So, if you really want to use inline-block, you're restricted to spans and strongs and ems...
IE 支持内联块，但仅适用于本机内联的元素。所以，如果你真的想使用 inline-block，你只能使用 spans、strongs 和 ems...
Yes, it is not logical, because normallyit doesn't matter if you use div or span... but remember - this is IE :)
是的，这不合逻辑，因为通常使用 div 或 span 并不重要...但请记住 - 这是 IE :)
So just change <div>to <span>and that's it!
所以只需更改<div>为<span>，就是这样！
回答by GeniusJRS
display: inline-block;
*zoom: 1;
*display: inline;
you can add inline-block for other browser but for IE you can add style with *. it only works in ie
您可以为其他浏览器添加内联块，但对于 IE，您可以添加带有 *. 它只适用于 ie
回答by Web Designer cum Promoter
use this code
使用此代码
*display: inline;
*vertical-align: middle;
