css - IE 和 FF 中的幻灯片位置太低

Question

我有这个幻灯片，我想简单地向上移动，但我无法正确定位它以使其向上。现在有所有这些空白。有人可以帮我解决我哪里出错了吗？只需在 Firefox 或 IE 中查看即可查看空格。它当然适用于 Chrome，b/c 一切都适用于 chrome。

http://modernd-i.com/

我尝试在 css 中使用位置，但在这些浏览器中它并没有让步。

Answer 1

IT 看起来您正在使用表格进行布局。包含图片库的<td>那个有一个垂直对齐设置，vertical-align: baseline;如果你在 html 中将其更改为valign="top"它将使其工作。在 Firefox 中检查它，而不是 IE。

Answer 2

在你的 styles.css 中，第 4 行你有：

...tfoot, thead, tr, th, td {
background: none repeat scroll 0 0 transparent;
border: 0 none;
margin: 0;
padding: 0;
vertical-align: baseline;   /* this is what is causing it */
}

将最后一个更改为： vertical-align: top

基线作为全局声明并不是最好的主意，除非它是故意的。

希望这可以帮助。

Answer 3

这应该有效：

#yourslideshow {
    position: relative;
    top: (-X)px;
 }

*-X 表示像素数。

由于您没有 jsfiddle，因此我无法确切告诉您多少。但是，如果您使用顶部，那就是您的幻灯片和页面顶部之间的像素数。（您也可以使用底部，而不是使用负值）。

前任。

#yourslideshow {
    position: relative;
    bottom: (X)px;
 }

我知道您说您使用了职位，但我不确定您使用的是哪种职位，因为您没有指定。

然后

如果位置仍然不起作用，您可以尝试正边距顶部或负边距底部

#yourslideshow {
    position: relative;
    margin-bottom: (X)px;
 }

或者

#yourslideshow {
    position: relative;
   margin-top: (-X)px;
 }