2012-09-07 98 views
2

我在开发site时遇到了一些奇怪的问题。HTML中的奇怪间距

我的计算机上的任何浏览器都会在页面上的某些元素(例如导航栏上方,导航栏下拉菜单,容器等)上方添加一个空格。 Chrome开发工具它显示像具有奇怪text元件(带间隔引号): 1

但在源代码中它显示没有它: 2

如果我删除从工具引用,所述间距消失。

无法通过Javascript或PHP添加引号(间距):它永远存在它我们评论所有脚本包含并禁用了对.html文件(example)的php预处理。 这个间距不能由CSS添加:例如对于导航栏,我们有规则:

.navbar { 
    margin-top: 0; 
} 

的间距在我的电脑上所有的浏览器存在(在火狐,Chrome,IE 9测试)。

此外,Firefox的开发工具不显示任何报价: 3

但代码添加空格,这地方是在Chrome浏览器开发工具的报价。

那么,它是什么?如何删除此间距(我不想使用负边距等丑陋的解决方案)?

请评论你的机器上有这个问题吗?谢谢。

+1

哈哈,当我开始使用PHP时,我的年龄与您的年龄有关!我现在21岁,在编程方面有着成功的职业生涯。这是一个伟大的工作:)保持它,祝你好运。 – user1477388

+0

如果您从某处复制并粘贴了您的Html,那么您可能已复制了一些隐藏的字符。从jsfiddle复制到visual studio时,这是一个已知的问题。 –

+0

@Jon:是的,到目前为止,我已经获得了很多经验,并且赚了很多钱......从我的背上大声笑起来。 – user1477388

回答

6

在我看来,空间是'特殊空间',如 就是其中之一。即使在文本编辑器中,它们也可能看起来像普通的空格字符

查看生成HTML结构的代码。 然后删除请求中的空格。使用空格键放回格式化空格。


编辑

看在我的文本编辑器,我意识到近,你在你的代码中的特殊音符字符。

当您从记事本++编辑器看起来我的屏幕上,也有在小于<nav>的字符(<)和<li>标签,我标记为红色小“挂钩”。

不要只是删除空格,删除小于(<)字符,并使用键盘重新输入。

enter image description here

+0

好的。我自己也经历过这个问题,这是一个难以发现的问题。 – Wex

+0

+1,鹰的眼睛:) – Jon

+0

非常感谢你指出。我无法使用选择器来定位div,并想知道为什么它不起作用。隐藏的勉强可见的字符是问题。很好的帮助! – Systembolaget

1

源HTML中有空白:在<body><nav>之间。只有这样,才能使这是走通过运行两个标签一起,在

<body><nav class="..."> ... </nav></body> 

HTML决定了空白的属性值之外运行作为一个单一的空间处理,因此它并不真正的问题是如何有很多空白,如果是换行符等等。即使您的HTML中只有一个空格字符,符合标准的浏览器也必须将其视为文本节点。这是Chrome浏览器通过显示引号提示的文本节点。

+0

完全有可能你可以在那里删除一些看不见的空白,但是如果这样做不起作用,那么是的,试着将标签直接贴在对方旁边。 – Kzqai

+1

空格不应该做任何事情,因为''是'display:block'和'

3

<body><nav>元件之间的字符是换行和BOM - 字节顺序标记(又名零宽度不间断空格)U + FEFF(EF BB BF在UTF-8)。请参见下面的十六进制编辑器新

enter image description here

这是你需要删除BOM拍摄的图像。

+0

用于十六进制编辑器 – HerrSerker