【问题标题】:Setting image height on IE7在 IE7 上设置图像高度
【发布时间】:2012-12-18 22:53:11
【问题描述】:

即使我已经在其他主要网络浏览器(Chrome、Firefox、Safari)上成功完成了 IE6/IE7 上的“漂亮”布局,我也遇到了问题。

很抱歉,我无法在 JSFiddle 上复制错误,所以在这里我提供网站的网址 here。在网站中,我只想设置右侧三个图像缩略图的高度(在 In-House Guru 部分下)。
我已将高度设置如下:

.in-house-guru .ihg-thumbnail {
  height: 112px;
}

但是,它们不是具有相同的高度,而是具有不同的高度。更糟糕的是,当我尝试通过 IE 开发者工具调试代码并尝试将高度直接注入(设置)到浏览器中时,什么也没有发生。
如果我增加 CSS 中的高度,比如增加 500 像素,它们也会增加高度,但是它们的高度不同(例如 477 像素、495 像素和 120 像素)。

补充说明:
此处使用带有 Zurb-Foundation 3 的指南针。以前网格存在问题,因为它们不支持 IE7 和早期,幸运的是我已经设法使用 Schepp 的 boxsizing.htc 脚本修复了它。
我在IE7浏览器模式下使用IE9进行了测试。

任何人,请帮助我。它把我的头发扯掉了。
提前致谢。

【问题讨论】:

  • 如果您删除 html 中的宽度和高度标签会发生什么情况?
  • 还是一样,什么也没发生。即使我将高度直接注入调试器后,也没有任何改变

标签: css internet-explorer internet-explorer-7 compass-sass zurb-foundation


【解决方案1】:

问题不在于图片,实际上是li的样式

.block-grid.two-up > li {
    padding: 0 5px 11px;
    width: 50%;
}

第一个图像的padding-bottom 11px 与第二行中的第三个图像重叠,因此出现了问题。

为 li 提供 5px 的恒定填充,如下所示:

.block-grid.two-up > li {
        padding: 5px;
      }

似乎为我解决了这个问题。

【讨论】:

  • 好吧,在我将四个填充更改为常量后仍然相同。除了那个 11px 是从哪里来的?在我的浏览器上是 8px
猜你喜欢
  • 1970-01-01
  • 2012-03-01
  • 2014-06-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-11-01
  • 1970-01-01
  • 2016-02-07
相关资源
最近更新 更多