css - 内联 block 跨度导致绝对定位图像移动

Question

我按照我想要的方式设置了一个页面， Logo 绝对位于右下角: http://testing.wizbury.com/onlinegamepage2.php?id=6

然后我在 css 中添加了以下条目，这样当框中的一行文本运行得太长时，它就不会添加太多额外的空间:

.ogfeatures li span {  
    vertical-align:middle;   
    display:inline-block;   
    line-height:1em;  
}​

该添加导致 Logo 位于内容区域的左上角(在 Flash 游戏下方)。我只能发布到链接，但它是与上面相同的链接，使用 onlinegamepage.php

该页面从数据库动态生成大量内容，因此 Dreamweaver 的预览效果不佳。我决定将代码放入 fiddler 中并进行硬编码，这样我就可以玩布局......即使添加了跨度，它在 fiddler 中也能正常工作。
http://jsfiddle.net/wrX8g/

所以现在我完全糊涂了。我确定我缺少一些简单的事情，但我无法弄清楚。如果有任何见解，我将不胜感激。

谢谢，
道格

Answer 1

我不确定 StackOverflow 是否正在这样做，或者它是否在您的原始代码中，但是当我将您的 CSS 复制到另一个文件时，在关闭 } 之后，有一个 Zero-Width Space字符，这在 CSS 中是无效的，我相信，这会导致声明被浏览器抛出。我推测无论 ytou 使用哪个浏览器，它也会丢弃所有后续声明，并且您已将那段 CSS 代码放在定位 Logo 的 CSS 声明的正上方，从而防止该声明生效并将 Logo 在没有应用任何 CSS 的情况下。

解决方法是简单地删除有问题的字符，您可以通过将插入符放在带有 } 的行的发送端并退格来实现。插入符号不应移动，这告诉您它删除了一个不可见的字符。如果无法删除它，您也可以在十六进制编辑器中执行此操作。