max-width on< img>标签不工作在IE8 [英] max-width on <img> tag not working in IE8
问题描述
我有一个奇怪的问题。在一个正在建设的网站上，我们有一个图库功能，通过jQuery插件，Gallerific。图库在模态窗口中打开。我需要的是将图片的最大宽度设置为765px。因此我设置了max-width：765px;在我的CSS。
我知道我不在IE6工作，但我不在乎。
奇怪的是，当我使用宽1400像素，兼容性视图中的IE8，Firefox，Chrome，Safari和Opera，所有这些都将宽度缩小到765像素，但不是IE8！
我不知道为什么这不工作。
任何人都知道发生了什么，或者更好，如何解决
尊敬的金，
IE8要求在图像周围放置一个容器，宽度设置为您要查找的最大宽度，或设置为100％更好地工作在绝对定位的div）。只要在该容器上定义了一个宽度，IE8似乎很高兴。
对于你的例子，你可以设置容器div为你正在寻找的最大宽度，同时将所有图片的max-width属性设置为100％：
.container {width：765px;}
img {max-width：100％;}
这会强制图像不超过宽度找到它们的容器。
确保您声明了一个HTML5 doctype; IE不喜欢XHTML doctypes。
关心，
Larry
I have a strange problem. On a site that were currently building we have a gallery function throuh the jQuery plugin, Gallerific. The gallery opens in a modal window. What I need is to set a max width of the images to 765px. There fore I have set the max-width: 765px; in my CSS. I know i't not working in IE6 but I don't care.
The strange thing is that when I use an image of e.g. 1400px wide, IE8 in compatibility view, Firefox, Chrome, Safari and Opera, all scales this image down to 765px in the width - but not IE8! I can't figure out why this isn't working.
Anyone have got a clue on what's going on, or how even better, how to fix it?
Your answers are greatly appreciated - Thanks!
Regards, Kim
IE8 requires that a container be placed around the image, with it's width either set to the max width you are looking for, or to 100% width (seems to work better on absolutely positioned divs). IE8 seems to be happy as long as a width is defined on that container.
For your example you can set the container div to the maximum width you're looking for, while setting the max-width property of all images to 100%:
.container { width: 765px;}
img { max-width: 100%;}
which forces the images to be no more than the width of the container in which they are found.
Make sure you declare an HTML5 doctype; IE doesn't like XHTML doctypes.
Kind regards, Larry
这篇关于max-width on< img>标签不工作在IE8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
