求解，html页面顶部有空白？？

1、html文件字符编码已是utf-8去boom格式了；2、css代码上也置顶了但顶部还是有空白？？！！求高手解答。。。。。。

43 个解决方案

#1

详细描述并贴代码。

#2

* {margin:0px;padding:0px;}

#3

引用 2 楼的回复:

* {margin:0px;padding:0px;}

css加了这段代码了。。。还是顶部有空白。。。ps：火狐上是正常的，可是ie跟谷歌顶部都有空白

#4

用chrome的开发人员工具看看

#5

引用 4 楼的回复:

用chrome的开发人员工具看看

html代码是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="{res file=css/search_store.css}" rel="stylesheet" type="text/css" />
<link href="{res file=css/store_mall.css}" rel="stylesheet" type="text/css" />
<title>店铺列表</title>
</head>
<body>
。。。

但是用工具检查显示后的html代码却成了
<html>
<head></head>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="{res file=css/search_store.css}" rel="stylesheet" type="text/css" />
<link href="{res file=css/store_mall.css}" rel="stylesheet" type="text/css" />
<title>店铺列表</title>
"
===========>这里就是顶部空白的部分

"
。。。

求解答？？？？？？？？？？？

#6

用文本文件打开html 另存下

#7

引用 6 楼的回复:

用文本文件打开html 另存下

试过了，不是字符编码的问题；我都转为utf-8去bom的格式了。。。

#8

楼主幸运了。当初我是花了时间逐块测试代码才发现的，那时在网上连同样的问题都找不到。

你把
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

修改为

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/transitional.dtd">

就应该好了

#9

引用 8 楼的回复:

楼主幸运了。当初我是花了时间逐块测试代码才发现的，那时在网上连同样的问题都找不到。

你把
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

修改为

<!DOCTYPE HTML PUBL……

三种文档声明我都试过了，还是不行。。。。
我其他页面头部文档声明也是用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
的，都正常的。。。。

跪求解答？？？？？

#10

是这的问题吧href="{res file=css/store_mall.css}"
这样试试
href="css/store_mall.css"

#11

引用 10 楼的回复:

是这的问题吧href="{res file=css/store_mall.css}"
这样试试
href="css/store_mall.css"

不是，css的地址是动态的，到前台显示后才看到css的绝对路径的

#12

该回复于2012-10-13 15:01:51被版主删除

#13

把utf-8有bom，保存为utf-8无bom

#14

……呃，没看清
如果已经是无bom，多数是后台程序在输出html前，已经输出header造成的

引用 13 楼的回复:

把utf-8有bom，保存为utf-8无bom

#15

之前在另一个帖子上看到如下代码：
<body>`
就是因为那一点导致的顶部有空白行。。。

#16

CTRAL + A把代码全选中，看哪些阴影区没字都删掉
你可用注释法来排查，守先把你的，文件头都换掉，
看顶格不，把body之间内容ctrl+x 改为abcd再看一下顶格不
ctrl+z就能回退回来，相信这样你能找到问题点了，动态页生成的话极有可能生成无用
的部份，如果只是静态页，可以传给另一个人测试一下

#17

为什么我用Chrome运行就没有空白的？？？？我运行的可以的呀

#18

引用 16 楼的回复:

CTRAL + A把代码全选中，看哪些阴影区没字都删掉
你可用注释法来排查，守先把你的，文件头都换掉，
看顶格不，把body之间内容ctrl+x 改为abcd再看一下顶格不
ctrl+z就能回退回来，相信这样你能找到问题点了，动态页生成的话极有可能生成无用
的部份，如果只是静态页，可以传给另一个人测试一下

#19

把顶部那块，换行和空格全部删除掉，让代码连在一起，一点空不留。
如果不行，那就不是空白字符造成的，那就应该从语法解析方面分析。
楼主先试试吧，很多人都是某个空格或者字符造成的

#20

把margin-top置成负数试试

#21

如果这些属性“特别注意事项”的问题都不是，那就是楼主自己编写的错误问题了。
不是HTML+CSS写得有问题，就是标签对和层级没匹配好，以及JS/CSS不兼容等。
我说过当初处理时就是逐段删除测试的，这样找起来其实挺快的，先大后小就排查出来了。
再解决不了就是楼主基本经验问题了。
别人连你整个代码都没看到，怎么知道具体会是什么呢，都只能猜空气。

#22

顶楼上的..这样真是猜空气
我觉得针对一些不明原因或原因有很多种的问题，最好说明：
1、问题描述
2、浏览器
3、源代码||截图||可供访问的链接当然是最好，众多免费的测试人员...何乐而不为。。
给大家方便，也是给自己方便。

#23

引用 21 楼的回复:

如果这些属性“特别注意事项”的问题都不是，那就是楼主自己编写的错误问题了。
不是HTML+CSS写得有问题，就是标签对和层级没匹配好，以及JS/CSS不兼容等。
我说过当初处理时就是逐段删除测试的，这样找起来其实挺快的，先大后小就排查出来了。
再解决不了就是楼主基本经验问题了。
别人连你整个代码都没看到，怎么知道具体会是什么呢，都只能猜空气。

ff上可以正常显示，谷歌跟ie顶部有空白；字符编码已经是utf-8去bom格式了。。。
在谷歌上查看源代码是正常的，如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="{res file=css/search_store.css}" rel="stylesheet" type="text/css" />
<link href="{res file=css/store_mall.css}" rel="stylesheet" type="text/css" />
<title>店铺列表</title>
</head>
<body>
。。。
</body>
</html>
但是用谷歌开发者工具检查显示后的html代码却成了：
<html>                     =============>文档声明不见了？？！！
<head></head>             =============>head标签里的代码跑到body里面去？？！！
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="{res file=css/search_store.css}" rel="stylesheet" type="text/css" />
<link href="{res file=css/store_mall.css}" rel="stylesheet" type="text/css" />
<title>店铺列表</title>
"
  ===========>无故生成无用的空字符？？！！这里也就是顶部空白的部分

"
</body>
</html>

能力有限，求大神解答？？？？？？？？

#24

规范问题哦！你仔细检查一下你页面里面的逻辑，是否写的规范了……

#25

body{ margin:0px; }

#26

可以用 <!DOCTYPE HTML PUBL……正解。。。www.seo7ye.com

#27

#28

#29

我也碰到这个问题，不知道怎么解决

#30

#31

感觉是格式不规范，格式化下格式试试

#32

用的IE几？是不是ie双边距的问题？

#33

CSS 加上 * { margin: 0px; padding: 0px; } 或者 body { margin: 0px; padding: 0px; }

#34

*{margin:0;padding:0;}

#35

楼主的这个问题貌似我也遇到过了，里面的div别用margin，用padding代替。这貌似是css里面所说的边距合并的问题。

#36

该回复于2013-01-15 13:04:36被管理员删除

#37

用chrome来调试啊，很容易发现问题的。

#38

该回复于2013-01-25 11:35:42被管理员删除

#39

这个问题本人遇到过，是网页源代码的编码问题，如果编码不对就会造成此问题，比如源程序编码是utf8格式，而样式文件是gb2312格式，就会造成这种情况。
还有一点，utf8格式又分为：utf-8无签名与utf8-带签名两种格式，一定要保持一致，否则就会出现异常。
希望对大家有用。

#40

楼主我跟你的问题一模一样

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

这样解决的。

在CSS里加入这个。

#41

26楼和40楼正解

#42

是不是Thiniphp写的，你看下你的控制器上面和下面有没有空格

#43

如果以上方法都无效，可以试试我的方法：

用文本编辑器打开网页源码，Ctrl+F 搜索源码中是否含有“ ` ", 然后去掉保存。

我今天也碰到了这个问题，折腾了一个小时，代码翻来覆去看都没问题，最后发下是自己不小心按多了这个反单引号，顺便写出来，希望对后续碰到这样问题的有帮助。

#1

详细描述并贴代码。

#2

* {margin:0px;padding:0px;}

#3

引用 2 楼的回复:

* {margin:0px;padding:0px;}

css加了这段代码了。。。还是顶部有空白。。。ps：火狐上是正常的，可是ie跟谷歌顶部都有空白

#4

用chrome的开发人员工具看看

#5

引用 4 楼的回复:

用chrome的开发人员工具看看

#6

用文本文件打开html 另存下

#7

引用 6 楼的回复:

用文本文件打开html 另存下

试过了，不是字符编码的问题；我都转为utf-8去bom的格式了。。。

#8

#9

引用 8 楼的回复:

楼主幸运了。当初我是花了时间逐块测试代码才发现的，那时在网上连同样的问题都找不到。

你把
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

修改为

<!DOCTYPE HTML PUBL……

#10

是这的问题吧href="{res file=css/store_mall.css}"
这样试试
href="css/store_mall.css"

#11

引用 10 楼的回复:

是这的问题吧href="{res file=css/store_mall.css}"
这样试试
href="css/store_mall.css"

不是，css的地址是动态的，到前台显示后才看到css的绝对路径的

#12

该回复于2012-10-13 15:01:51被版主删除

#13

把utf-8有bom，保存为utf-8无bom

#14

……呃，没看清
如果已经是无bom，多数是后台程序在输出html前，已经输出header造成的

引用 13 楼的回复:

把utf-8有bom，保存为utf-8无bom

#15

之前在另一个帖子上看到如下代码：
<body>`
就是因为那一点导致的顶部有空白行。。。

#16

#17

为什么我用Chrome运行就没有空白的？？？？我运行的可以的呀

#18

引用 16 楼的回复:

CTRAL + A把代码全选中，看哪些阴影区没字都删掉
你可用注释法来排查，守先把你的，文件头都换掉，
看顶格不，把body之间内容ctrl+x 改为abcd再看一下顶格不
ctrl+z就能回退回来，相信这样你能找到问题点了，动态页生成的话极有可能生成无用
的部份，如果只是静态页，可以传给另一个人测试一下

#19

#20

把margin-top置成负数试试

#21

#22

#23

引用 21 楼的回复:

如果这些属性“特别注意事项”的问题都不是，那就是楼主自己编写的错误问题了。
不是HTML+CSS写得有问题，就是标签对和层级没匹配好，以及JS/CSS不兼容等。
我说过当初处理时就是逐段删除测试的，这样找起来其实挺快的，先大后小就排查出来了。
再解决不了就是楼主基本经验问题了。
别人连你整个代码都没看到，怎么知道具体会是什么呢，都只能猜空气。

#24

规范问题哦！你仔细检查一下你页面里面的逻辑，是否写的规范了……

#25

body{ margin:0px; }

#26

可以用 <!DOCTYPE HTML PUBL……正解。。。www.seo7ye.com

#27

#28

#29

我也碰到这个问题，不知道怎么解决

#30

#31

感觉是格式不规范，格式化下格式试试

#32

用的IE几？是不是ie双边距的问题？

#33

CSS 加上 * { margin: 0px; padding: 0px; } 或者 body { margin: 0px; padding: 0px; }

#34

*{margin:0;padding:0;}

#35

楼主的这个问题貌似我也遇到过了，里面的div别用margin，用padding代替。这貌似是css里面所说的边距合并的问题。

#36

该回复于2013-01-15 13:04:36被管理员删除

#37

用chrome来调试啊，很容易发现问题的。

#38

该回复于2013-01-25 11:35:42被管理员删除

#39

#40

楼主我跟你的问题一模一样

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

这样解决的。

在CSS里加入这个。

#41

26楼和40楼正解

#42

是不是Thiniphp写的，你看下你的控制器上面和下面有没有空格