Question

我创建了一个图片库，在使用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

Answer 1

你有没有尝试重新安排css命令？在我看来，您希望将'ol css重置移动到加载顺序的前面，以帮助重置间距Crowse-browser。

这有助于解释css重置的重点： What's the purpose of using CSS browser reset code?

Answer 2

这是IE8中的一个错误，容器将缩小到图像的宽度。我现在正在路上，现在无法在我的错误列表中查找它，但如果没有其他人提供完整描述，我相信你可以谷歌。

修复可能是在图像周围设置div并将最大宽度放在div上。问题是由img所取代的元素引起的。（嗯，这个问题实际上是由IE引起的，但我离题了。）

CSS属性“max-width”使图像在Internet Explorer 8中崩溃

2 个答案: