我创建了一个图片库，在 FF 17.0.1、Chrome 23.0.1271.97 或 Safari 5.0.3 上观看时看起来不错。工具“IETester”也可以正确显示 IE 9 的页面。在 IE8 的兼容模式下查看时，它也可以正常呈现，但不是默认模式。
CSS 文件“core.css”添加了以下规则:
/* Image ---*/
img {
max-width: 100%;
}
我不知道，我是否可以更改此规则，因为它是众多第三方模板之一。 这条规则似乎折叠了我的 IE8 画廊的图像。设置附加规则“width:auto”不是一个选项，因为图像并不总是以原始大小显示。
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>
<title></title>
<link rel="stylesheet" href="/media/plg_fancybox2/css/aobgallery.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="/templates/ja_lens/css/reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="/templates/ja_lens/css/core.css" media="all" />
</head>
<body>
<p><script type='text/javascript'>var tlist = ['/images/showroom/playground/displaced/Disp_7b1.jpg','/images/showroom/playground/displaced/dispm_6.jpg','/images/showroom/playground/displaced/dispm_9.jpg','/images/showroom/playground/displaced/dispm_9b.jpg','/images/showroom/playground/displaced/dispm_9c.jpg','/images/showroom/playground/displaced/dispm_10a.jpg','/images/showroom/playground/displaced/dispm_12b.jpg','/images/showroom/playground/displaced/dispm_12d.jpg','/images/showroom/playground/displaced/dispm_12e.jpg','/images/showroom/playground/displaced/dispm_12f.jpg'];
</script><div id="fancycontainer">
<div class="fancyitem"><a href="/images/showroom/playground/displaced/Disp_7b1.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 0,helpers : { title : { type : 'inside' }, buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/Disp_7b1.jpg" /></a></div>
<div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_6.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 1,helpers : { title : { type : 'inside' }, buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_6.jpg" /></a></div>
<div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_9.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 2,helpers : { title : { type : 'inside' }, buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_9.jpg" /></a></div>
<div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_9b.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 3,helpers : { title : { type : 'inside' }, buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_9b.jpg" /></a></div>
<div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_9c.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 4,helpers : { title : { type : 'inside' }, buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_9c.jpg" /></a></div>
<div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_10a.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 5,helpers : { title : { type : 'inside' }, buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_10a.jpg" /></a></div>
<div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_12b.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 6,helpers : { title : { type : 'inside' }, buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_12b.jpg" /></a></div>
<div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_12d.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 7,helpers : { title : { type : 'inside' }, buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_12d.jpg" /></a></div>
<div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_12e.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 8,helpers : { title : { type : 'inside' }, buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_12e.jpg" /></a></div>
<div class="fancyitem"><a href="/images/showroom/playground/displaced/dispm_12f.jpg" class="fancyframe" rel="gallery" onclick="callMe(tlist,{index: 9,helpers : { title : { type : 'inside' }, buttons : {}}, playSpeed: 5000, closeBtn : false});return false;"><img width="215" src="/images/showroom/playground/displaced/thumbs/dispm_12f.jpg" /></a></div>
</div></p>
</body>
</html>
这是用于格式化图库的 css: aobgallery.css
#fancycontainer
{
list-style: none outside none;
margin: 8px auto !important;
overflow: hidden;
padding: 8px !important;
border:1px solid #000000;
}
.fancyframe
{
display: block;
float:left;
font-size: 11px;
font-weight: bold;
left: 0;
padding: 5px;
right: 0;
text-align: left;
top: 0;
}
.fancyframe:hover
{
background-color: #333333;
}
为什么'max-width' 属性设置为 100% 在 IE8 中折叠图像？ 我可以调整我的 html 以防止这种情况发生吗？ 我可以定义一个额外的 CSS 规则来解决这个问题吗？
这是该问题的在线演示: http://demo.artonbit.com/test.htm
最佳答案
那么您是否尝试过重新安排 css 顺序？在我看来，您可能希望将 'ol css reset 移动到加载顺序的前面，以帮助重置 spacing crowse-browser。
这有助于解释 css 重置的要点: What's the purpose of using CSS browser reset code?
关于html - CSS 属性 'max-width' 使图像在 Internet Explorer 8 中崩溃，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14014188/