求解,html页面顶部有空白??

时间:2022-03-01 08:35:02
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


<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里面好吗?我没记错的话这应该写在head里面的

#28


<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>

#29


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

#30


<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" />
应该是个浏览器对花括弧的解释不同造成的!还是尽量别用动态的吧!

#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的开发人员工具看看


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


<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里面好吗?我没记错的话这应该写在head里面的

#28


<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>

#29


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

#30


<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" />
应该是个浏览器对花括弧的解释不同造成的!还是尽量别用动态的吧!

#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 搜索源码中是否含有“  ` ", 然后去掉保存。

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