Question

我已经搜索了论坛，但似乎无法找到答案。我的图像在FF，Chrome和IE 11中都很好，但是，在IE 10中，我的图像占据了整个页面，即使它们只有大约300像素宽。我使用Bootstrap 3和Joomla Purity III模板。我已经看到了CSS中的黑客攻击：宽度：100％\ 9。我尝试删除auto的高度，但这似乎使我的图像消失了。什么是这个问题的最佳/最简单的解决方案？

 article img,
.article-intro img {
  display: block;
  width: 100% \9;
  max-width: 100%;
  height: auto;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  width: 100% \9;
  background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 0;
   /* line-height: 1.42857;*/
    padding: 4px;
    transition: all 0.2s ease-in-out 0s;
}
.img-responsive-left {
    float: left;
    display: block;
    max-width: 100%;
    width: 100% \9;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 0;
    line-height: 1.42857;
    padding: 4px;
    margin-right: 1em;
}
.img-responsive-right {
    float: right;
    display: block;
    max-width: 100%;
    width: 100% \9;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 0;
    line-height: 1.42857;
    padding: 4px;
}
.img-left-borderless {
    float: left;
    display: block;
    width: 100% \9;
    max-width: 300px;
    background-color: #ffffff;
    border: none;
    line-height: 1.42857;
    padding: 4px;
}

.img-rounded {
  border-radius: 0;
}
.img-thumbnail {
  padding: 4px;
  line-height: 1.42857143;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 0;
  display: inline-block;
  max-width: 100%;
  width: 100% \9;
  height: auto;
}

Answer 1

最好的解决方案？只需删除width: 100% \9;，这就是黑客攻击。

更强大的解决方案是确保css不会影响图像，如果它们的尺寸已经设置（就像使用图像编辑器插入图像时那样），例如：

/* Don't ignore `width` and/or `height` attributes if present. */
img[width],
img[height] {
    max-width: none;
    width: auto;
}

Answer 2

尝试声明max-width: 300px，您可以通过在其末尾标记!important来覆盖任何默认值。

max-width: 300px !important

如果这不起作用，那么查看更多代码以了解您的背景会很有帮助。

响应式图像调整引导程序3和IE 10的问题

2 个答案: