图像调整大小在引导框架的 IE8 中不起作用答案

【问题标题】：Image resize doesn't work in IE8 for bootstrap framework图像调整大小在引导框架的 IE8 中不起作用
【发布时间】：2012-12-11 18:13:19
【问题描述】：

我一直在hack和挖掘google + stackoverflow，希望在下面找到与我的问题相关但找不到的相关解决方案：

我正在使用 bootstrap (twitter) ver 2.0 并且遇到图像调整大小在 IE8 上不起作用但在其他浏览器上起作用。

图片调整大小原代码为：

 <img src="alpha1-stamp.png" width="70" height="70">

它在 Safari、Firefox 和 Google Chrome 等浏览器中表现得非常好，但不是 IE8（我在另一个桌面上的唯一版本，但估计它不应该在所有 IE 版本上都工作）

请建议并迫切需要修复这个 IE 噩梦

干杯

【问题讨论】：

标签： image twitter-bootstrap internet-explorer-8 resize

【解决方案1】：

我通过破解 HTML 中的条件覆盖样式以不同方式解决了这个问题。

我已经在引导样式表下方有一个 IE8 解决方法部分，因此我为问题图像添加了重置：

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <style type="text/css">
      img, img.img-responsive {
     width:auto;
     height:auto;
     max-width: none;
      }
    </style>

<![endif]-->
<style type="text/css">

【讨论】：

【解决方案2】：

问题是
width: auto\9; height: auto; 如果您评论此行，它在 IE 上可以正常工作

【讨论】：

【解决方案3】：

如果从引导 css 中删除一些代码没有帮助，你可以试试这个 => https://stackoverflow.com/a/17763577/789012

至于我在删除它之后，我在 Chrome 中的布局被破坏了，就像在 Mozilla 或 IE 中一样......

【讨论】：

【解决方案4】：

我遇到了 Internet Explorer img 选择器的 height:auto 规则。（删除 max-width 没有帮助）

【讨论】：

【解决方案5】：

只需在 bootstrap.css（引导框架）上注释以下内容

img {
  width: auto\9;
  height: auto;
 /* max-width: 100%;*/
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

【讨论】：

【解决方案6】：

好吧，终于整理好了，找到破解boostrap.css文件的方法

只需在 bootstrap.css（引导框架）上注释以下内容

/*
img {
  width: auto\9;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
} */

【讨论】：