IE6 和 7 的 bug 让人头疼答案

【问题标题】：IE6 and 7 bug causing a big headacheIE6 和 7 的 bug 让人头疼
【发布时间】：2010-01-07 07:28:10
【问题描述】：

大家好，我已经花了好几个小时来研究这个问题，希望有一双新的，甚至是一双更有经验的眼睛，可以帮助解决这个问题。虽然不是特别需要 IE6 支持，但 IE7 需要，这给我的图像滚动条带来了问题。

任何人都可以看看，看看是什么导致其父 div 中图像上方和下方的巨大间距？您将能够在 IE6 中看得更清楚，因为 IE7 不显示溢出。

这是链接：http://www.qwibbledesigns.co.uk/preview/aurelius/

我真的很感谢任何看到这个并能提供任何猜测或解决方案的人。

马特

【问题讨论】：

err 哪个图片有间距问题？
为选择 SLaks 干杯，这显然是深夜打字错误之一^^

标签： jquery html css internet-explorer-6 internet-explorer-7

【解决方案1】：

li 的内联样式正在为 IE 设置巨大的字体大小

<li class="roundabout-moveable-item roundabout-in-focus" style="z-index: 400; position: absolute; filter: alpha(opacity=100); WIDTH: 600px; zoom: 1; height: 300px; font-size: 500px; top: -1px; left: -52px;" degrees="0" startPos="600,300,500" current-scale="1.0000" jQuery1262819600298="2">

firefox 对同一个 li 的内联样式是

<li class="roundabout-moveable-item roundabout-in-focus" style="position: absolute; left: -52.5px; top: -1.5px; width: 600px; height: 300px; opacity: 1; z-index: 400; font-size: 12px;" degrees="0" startpos="600,300,12" current-scale="1.0000">

是 IE 中的 font-size:500px 与 FF 中的 font-size:12px 导致了额外的空间。

【讨论】：

你是一个救生员。不确定为什么 Jquery 会这样做，但我已经在我的样式表中用一个压倒一切的值来修复它，我会联系 Jquery carosuel 的作者来解决这个错误。谢谢艾米丽

【解决方案2】：

我无法确定也没有安装 IE 的调试工具，但是看到额外的空间加上图像正好是一个视口高度 (100%) 高，我认为它是其中之一：

.roundabout-moveable-item img { 
 ....
 height: 100% 
 }

或

font-size: 100%

来自您的重置样式表。

明天我会知道我是否正确。

晚上！

【讨论】：

【解决方案3】：

尝试将这些添加到 roundabout-moveable-item（一次一个，看看一个是否有效）：

.roundabout-moveable-item { display: inline; ... }

.roundabout-moveable-item { line-height: 0; font-size: 0; ... }

【讨论】：

【解决方案4】：

这有帮助吗？

.roundabout-moveable-item a{ 
 position:absolute;
 left:5px;
 top: 5px;
}

【讨论】：

【解决方案5】：

我正在经历类似的 ATM。看看这个线程：

http://doctype.com/ie7-div-positionabsolute-problem

好像和绝对定位有关，有几个建议可以试试。对我来说，没有一个在所有浏览器中都能可靠地工作，我必须做一个 IE 特定的 hack 来抵消绝对定位元素的边距，如下所示：

/margin-top: -50px;

只有 IE 采用这种样式，其他浏览器会忽略它，因为行首是 /。

【讨论】：

【解决方案6】：

尝试添加：

position: relative;

到您的代码调试区域（http://www.qwibbledesigns.co.uk/preview/aurelius/css/reset.css 的顶部）

【讨论】：