内联块跨度导致绝对定位的图像移动

Question

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

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

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

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

页面从数据库动态生成大量内容，因此 Dreamweaver 的预览效果不佳。我决定将代码放入 fiddler 和硬编码中，这样我就可以使用布局了……它在 fiddler 中运行良好，即使添加了跨度。
http://jsfiddle.net/wrX8g/

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

谢谢，
道格

Answer 1

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

解决方法是简单地删除有问题的字符，您可以通过将插入符号放在其中包含 } 的行的发送并退格来完成。插入符号不应该移动，这告诉您它删除了一个不可见的字符。如果删除它不起作用，您也可以在十六进制编辑器中进行。