Internet Explorer 和 Google Chrome 不同的内容显示方式答案

【问题标题】：Internet Explorer and Google Chrome different showup of contentInternet Explorer 和 Google Chrome 不同的内容显示方式
【发布时间】：2013-06-29 20:04:05
【问题描述】：

我正在设置一个在线表单，用于选择框和东西。当我对自己说“让我们在 IE 中尝试一下”时，我几乎完成了整个事情。

这是我想要的结果以及 Google Chrome 中出现的内容：

这就是在 IE 中发生的事情：

这是该部分的 CSS 和 HTML：

HTML

<div id="choosen"><img src="img.jpg" class="center-img" /></div>

CSS

 img.center-img{
        margin-top:15px;
        position:relative;
        width: <?php echo $width; ?>px;
        left:50%;
        margin-left:-<?php echo $width/2; ?>px;
    }

基本上图像以 div 为中心，因为我正在编写的这个页面将被包含到另一个我从未见过的页面中，其他人会这样做。

已编辑

Here is the link

【问题讨论】：

IE 出现问题是正常的，也是意料之中的。您的展示不足以让我们提供帮助，当其中嵌入了 PHP 时，我们大多数人都无能为力（仅显示生成的标记）。我们需要一个链接或 jsfiddle。
好的，我编辑了帖子。谢了。

标签： html css image internet-explorer layout

【解决方案1】：

如何将 CSS 更改为

img.center-img{
    margin:15px auto 0;
    display:block;
}

【讨论】：

我试试看告诉你

【解决方案2】：

尝试使用 css hack。这是一个链接：

http://www.paulirish.com/2009/browser-specific-css-hacks/

【讨论】：

【解决方案3】：

如果没有正确的文档类型，您将处于“怪癖模式”。将此添加到您的第一行，前面没有其他内容：<!DOCTYPE html>。这将使您摆脱怪癖并进入标准模式，尤其是在 Internet Explorer 方面。那么让我们看看我们的立场。

A doctype is required of all new web pages. 我展示的是最新的，它将所有浏览器置于您想要的标准模式。 Quirks 使用 1990 年代的破盒模型，您永远不想在那里。

【讨论】：

可能是这样，我会检查的。即使我必须将文件包含到我无权访问的“未知项目”中
不，这会让事情变得更糟......对不起。我可以截屏给你看。
@NDLombardi - 当然可以。您创建了没有 doctype 的页面，并在 quirks 模式下完成了它。因此，您使用了破盒模型。当您使用 doctype 时，浏览器会切换到正确的框模型。 miah 的“修复”仅在这一情况下解决了您的问题，但如果没有适当的文档类型，您将在整个站点中永远存在问题。正如我在回答中所说，文档类型是所有新网页的要求。