【问题标题】: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;
              } */
              

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 2014-09-01
                • 1970-01-01
                • 2014-08-09
                • 1970-01-01
                • 1970-01-01
                • 2014-05-13
                • 2014-08-29
                • 2014-05-12
                相关资源
                最近更新 更多