Question

我只能猜到一个奇怪的问题是浏览器的怪癖，但我发布这个问题的原因是看看是否有人知道CSS提供的众多可能性中的任何解决方法。

所以这是触发问题的基本标记：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
 div       { display: block; border: 1px solid blue; float: left; }
 div a     { display: block; border: 1px solid red; }
 div a img { display: block; border: 0; height: 64px; width: auto; }
</style>
</head>
<body>
 <div>
  <a href="#">
   <img src="https://www.google.com/images/errors/robot.png" />
  </a>
 </div>
</body>
</html>

（边界和填充仅用于显示目的，对结果没有影响）

在我测试的所有现代浏览器中，跨三个不同的操作系统 - 我甚至测试过IE7 - 唯一有问题的浏览器是IE8。使用下图快速说明问题：

IE8 rendering weirdly

顶部图像是原始图像，只是为了显示它的尺寸，左下角是上面标记正确渲染的方式 - 用它的容器捕捉来满足缩放图像。右下角的图像是IE8的事件版本，正如您所看到的，即使图像已缩放，父级也保持图像的自然宽度。

虽然我很想忽视IE8是一个讨厌的昙花一现，但我必须至少尝试一切，然后再放弃它。为了解决问题，我已经经历了一系列不同风格的尝试，甚至回归到只是抛出修复其他IE问题的随机样式 - 即zoom:1和overflow:hidden - 问题。

我试过了：

div       { position: absolute; display: block; }
div a img { display: block; border: 0; height: 64px; width: auto; }

或

div       { display: block; height: 64px; float: left; }
div a img { display: block; border: 0; height: 100%; width: auto; }

甚至......

div       { display: inline-block; }
div a img { display: block; border: 0; height: 64px; width: auto; }

可能......

div       { display: block; float: left; width: 0; }
div a img { display: block; border: 0; height: 64px; width: auto; }

包括！

div       { display: block; float: left; width: 0; }
div a img { display: block; border: 0; max-height: 64px; width: auto; }

有什么想法吗？我可能只是有一些简单的伎俩......我已经放弃了搜索，因为我找到的所有帖子都与这个特定问题无关。

Answer 1

除非我在这里遗漏了一些东西（完全有可能！），否则你不能像在高度上那样明确地设置元素的宽度吗？或者将max-width属性设置为100％，以便将其约束到它所在的容器的宽度？

使用css缩小子图像时，IE8中容器保留的原始图像宽度

1 个答案: