CSS：在 IE 与 Firefox 或 Chrome 中对齐图像 - 图像大小都搞砸了答案

【问题标题】：CSS: Aligning Images in IE vs. Firefox or Chrome - Image size all screwed upCSS：在 IE 与 Firefox 或 Chrome 中对齐图像 - 图像大小都搞砸了
【发布时间】：2011-08-11 03:46:20
【问题描述】：

对我来说这是一个令人沮丧的问题。

这是链接。在 IE、Chrome 和 Firefox 中试用。后两者很好，图像向右对齐，显示为 375x500。但在 IE 中，图像向右对齐，但显示为 15x500。

http://www.themoneygoround.com/2011/04/intc-intel-shows-up-strong-afterhours.html

当我在 IE 中查看 View Source 时，图像的宽度和高度应该是 375x500，但这不是显示的内容。图像按预期向右对齐，但缩小为 15x500。感谢您的任何想法...

这里是 CSS

p img {
    padding: 0;
    max-width: 100%;
    }

img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }

img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }

.alignright {
    float: right;
    }

.alignleft {
    float: left;
    }
/* End Images */

【问题讨论】：

在让 IE 像其他更现代的浏览器一样运行时遇到问题，这是正常现象。
我很困惑。图片在 IE9 中似乎相同，但右侧的 flash 内容不同。

标签： css image internet-explorer alignment

【解决方案1】：

首先，我在 IE 中看到大约 14 个 javascript 错误，当我将其拉出并声明“null”为 null 或不是对象时。也许从那里开始？

编辑：顺便说一下，我在 IE8 中

工作解决方案：

我删除了包裹相关图像的<p class="alignright"></p>，它的作用就像一个魅力。

在我的working jsFiddle demo中查看。

【讨论】：

我相信这只是因为 max-width 现在不再指代因为 CSS 指的是“p img”。
@D Gauer - 可能，但它确实有效，并且允许 OP 继续前进而不会出现任何其他混乱。我不知道为什么 max-width 真的开始了，但不是我的应用程序。 =D

【解决方案2】：

我也看到了 IE 8 的问题。问题在于 <img> 的 max-width 属性。 IE 将无法使用 XHTML 文档类型（您似乎正在使用）正确呈现 max-width。您可以删除max-width 或使用将在IE 中触发标准模式的文档类型。我根据this article推荐HTML5 doctype。

【讨论】：

谢谢你，D Gauer。删除 max-width 解决了这个问题。我还更改了 HTML5 文档类型，它没有解决它，但可能是一个好主意。再次感谢您。
@muck 很高兴成功了！如果您有机会“接受”我的回答，我将不胜感激。快乐发展。