移除某些浏览器中头部和主要内容之间顶部的空白间隙

4
似乎我的一个页面存在不一致的问题。
在某些IE浏览器中,标题和主要内容之间会显示近乎整个屏幕大小的空白。奇怪的是,在我的PC上使用Firefox和IE时,页面显示正确,但在其他一些PC上则显示空白区域。
希望能得到帮助,非常感谢。
链接:http://kiwiradio.blakjak.net/wxradar.php

哪些版本的IE有这个问题? - Homer6
1
正文 { 边距: 0; 填充: 0; } - Matt Phillips
你的问题出现在IE6和IE7上,在IE8上它看起来正常。 - o15a3d4l11s2
问题出在IE7及更早版本。 - Gary
7个回答

1

好的,我下载并安装了Microsoft Expression 3 Superpreview,这样我就可以同时在IE6和IE8中看到打开的页面,这使找到罪魁祸首的脚本变得容易。

结果证明是幻灯片脚本附带的CSS脚本导致了显示问题,去掉它后,所有东西现在似乎都按照我想要的方式显示,包括早期版本的IE。

感谢您的帮助。

<style type="text/css">

/* All Styles Optional */

* {
font-family:arial;
font-size:10pt;
}
div#show3 {
background-color:#efefef;
width:140px;
margin:0 auto;
border:1px solid #444444;
}
div#show3 table td, div#show4 table td {
height:24px;
background-image:url('38.gif');
}
div#show4 table td {
background-image:url('40.gif');
}
div#show3 table input,  div#show4 table input {
outline-style:none;
}
</style>

<!--[if IE]>
<style type="text/css">
div#show3 table td, div#show4 table td {
height:21px;
}
</style>
<![endif]-->

1
Gary,如果你认为这是最终答案,你应该标记它。 (在问题旁边使用勾号)这将从“未回答的问题”列表中删除你的问题,并给予发布答案的人积分(除非像这种情况一样,你将自己的答案标记为最佳答案)。如果其他人有好的建议,你可以考虑将那个答案标记为正确答案,并将你在此帖子中提供的信息作为对原始问题的更新。 - Simon Groenewolt

0

我在IE 8.0中查看了URL: http://kiwiradio.blakjak.net/wxradar.php,它是完美的,没有空格。如果你遇到问题,有几件事可能会出错。

  1. 你把两个DIV并排放置,父DIV的宽度是固定的,小于并排放置的两个DIV的总宽度。在这种情况下,第二个DIV会移动到下面,如果第一个DIV的高度设置为填充整个页面,则可以看到它是空白的。

  2. 标题DIV /表的高度错误地设置为填充页面的高度,而内容未填满整个DIV /表等。

找出哪个浏览器出现了问题,并查看URL:http://www.quirksmode.org/css/contents.html以获取任何兼容性问题。

我认为设置边距和填充不会有帮助,因为你说的空间是整个页面的。


0

IETester很有用,但我不会完全依赖它。我发现在IE6中出现的错误,在IETester的IE6模式下并没有显示出来。 - Mr_Chimp
你说得对。它并不是100%确定性的。然而,使用它要比根本不测试好得多。大多数人不会费尽心思去获得完全功能的IE6安装。相反,廉价的解决方案就是使用IETester。 - Homer6

0
如果您还没有找到问题所在 - 问题出在您的“Rain Radar and Maps”标题上 - 您使用了不常用的标签< center >,因为该标签本身设计不佳。 如果您不想更改此设置,则最快且最简单的解决方案是为“Rain Radar and Maps”中心标记添加高度。

0
你是否使用带有BOM的UTF-8编码?我曾经使用过,也遇到了类似的问题。如果是这样,请将编码更改为不带BOM的UTF-8。

0

有些人默认设置为: * {padding:0px;margin:0px;}

至少自己设置一切会有所帮助。


-2

CSS解决方案:

* { padding: 0; margin: 0; }

1
通用选择器 (*) 的效率非常低下。请参见:http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/ - Yahel
@yc:我之前并不知道。谢谢。 - Amit
基本建议不要使用“<一些选择器> *”,它会在匹配<一些选择器>之前与每个元素匹配。使用经典的星号重置并不比基本针对所有元素的长重置样式表更加耗费性能。 - Daniel

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接