Question

嘿伙计们，我花了好几个小时看着这个，我希望有一双新鲜的，甚至是一双更有经验的眼睛可以帮助它解决。虽然IE6支持并不是特别需要，但IE7却是，这对我的图像滚动器造成了问题。

任何人都可以看一看是什么导致其父div中图像上方和下方的大量间距？你可以在IE6中看到更好，因为IE7不显示溢出。

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

我真的很感谢任何看过这个的人，可以提供任何猜测或解决方案。

马特

Answer 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">

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

<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导致额外的空间。

Answer 2

我无法确定并且没有安装IE的调试工具，但看到额外的空间加上图像只是一个视口高度（100％）高，我认为这是其中之一：

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

或

font-size: 100%

来自您的重置样式表。

明天我会明白我是否是对的。

晚！

Answer 3

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

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

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

Answer 4

这有帮助吗？

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

Answer 5

我正在经历类似ATM的事情。看看这个帖子：

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

似乎这与绝对定位有关，你可以尝试一些建议。对我来说，在所有浏览器中都没有可靠的工作，我不得不做一个IE特定的黑客来抵消绝对定位元素的边缘，如下所示：

/margin-top: -50px;

只有IE才会选择这种风格，其他浏览器会因为行尾的/而忽视它。

Answer 6

尝试添加：

position: relative;

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

IE6和7的bug引起了很大的麻烦

6 个答案: