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

对我来说令人沮丧的问题。CSS：在IE和Firefox或Chrome中对齐图像 - 图像大小都搞砸了

这是链接。在IE，Chrome和Firefox中试用。后两者都很好，图片右对齐，显示为375x500。但在IE浏览器中，图片与右侧对齐，但显示为15x500。

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

当我看到在查看源代码在IE中，图像的宽度和高度应该是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 */

来源

2011-04-22 muck

让IE像其他更现代的浏览器一样执行的问题有望成为问题并成为常态。 – Rob 2011-04-22 18:47:15

我很困惑。在IE9中图像看起来是一样的，但右侧的闪光灯是不同的。 – Rob 2011-04-22 18:52:53

我在IE 8中看到了问题。问题在于您的max-width属性为<img>。 IE不会正确显示max-width与XHTML文档类型（您似乎正在使用）。您可以删除max-width或使用在IE中触发标准模式的文档类型。我推荐按照this article的HTML5文档类型。

来源

2011-04-22 18:56:50 DaveGauer

谢谢，D Gauer。删除最大宽度解决了问题。我也更改为HTML5文档类型，但它没有解决它，但可能是一个好主意。再次感谢你。 – muck 2011-04-22 19:28:15

@muck很高兴工作！如果你有机会“接受”我的答案，我会很感激。快乐发展。 – DaveGauer 2011-04-22 20:11:33

首先，我看到约14 JavaScript的IE浏览器中的错误，当我拉，最多说明“空”为空或不是一个对象。也许从那里开始？

编辑：顺便说一句，我是在IE8

工作液：

我删除了包装有问题的图像<p class="alignright"></p>，和它的工作就像一个魅力。

查看我的working jsFiddle demo。

来源

2011-04-22 18:54:18

我相信这只适用，因为最大宽度现在不再指代，因为CSS是指“p img”。 – DaveGauer 2011-04-22 19:12:20

@D Gauer - 可能，但它确实有效，并且允许OP继续前进而没有任何其他混乱。我不知道为什么最大宽度是真的开始，但不是我的应用程序。 = D – 2011-04-22 19:16:47

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

回答

相关问题