IE 8 兼容模式答案

【问题标题】：IE 8 compatibility modeIE 8 兼容模式
【发布时间】：2011-10-02 05:03:30
【问题描述】：

我有以下问题：

我的css如下：

.SPImage img
 {
    margin-top:-15px;
    float:left;
    white-space:normal;
    width:194px;
    height:149px;
 }

我的 HTML 如下：

<DIV id=SPImage class=SPImage>

<DIV style="POSITION: relative; WIDTH: 100%">
<IMG style="WIDTH: 165px; MARGIN-LEFT: 15px" title="test" alt="test" src="/resources/2710004.jpg">
</DIV>
</DIV>

我在 HTML 头标签中有以下设置：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

我的问题是，当我使用 IE 8 时，由于margin-top:-15px;，当我使用 IE 7 和 IE8 兼容时，我的图像提升到 15 像素，看起来还不错。我无法删除 margin-top:-15px;，因为它在 IE 7 中看起来很难看。

我该如何解决这个问题？

【问题讨论】：

使用 iedeveloper 工具栏。更改边距并查看效果。稍微改变一下应该可以。否则使用内联样式进行测试。如果这不起作用，您将不得不使用单独的 css 文件包含在 cmets 中
@MLS，我使用了 Ideveloper，不幸的是它改变了一点不起作用。所有问题都是 margin-top:-15px;
如果你有IE=EmulateIE7，那么它在“IE8 模式”下的样子并不重要。所有 IE8 用户都将在“IE7 模式”下看到该网站，它在该模式下工作。
您是否在 css 文件的开头使用了 CSS 重置？这将解决很多跨浏览器的问题。这是一个很好的 css 重置：meyerweb.com/eric/tools/css/reset
我假设你有一个 doctype，否则你将处于怪癖模式，这会让 IE 发疯，不管你在什么兼容模式下。

标签： html css cross-browser compatibility

【解决方案1】：

当我这样做时：

CSS：

.SPImage img {
    margin-top:-15px;
    float:left;
    white-space:normal;
    width:194px;
    height:149px;
}

HTML：

<DIV id="SPImage" class="SPImage">
    <IMG style="WIDTH: 165px; MARGIN-LEFT: 15px" title="test" alt="test" src="img url">
</DIV>

在 IE 7、IE 8、IE9、Chrome 和 FF 中看起来一样吗？

【讨论】：