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

标签 css

我按照我想要的方式设置了一个页面, 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/

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

谢谢,
道格

最佳答案

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

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

关于css - 内联 block 跨度导致绝对定位图像移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12945448/

相关文章:

html - 使与列表关联的图片成为链接

CSS - 用于 100% 页面宽度设计的 css 框架(如蓝图)?

ios - 如何修复 iOS 11 和 macOS V10.12 Safari 上损坏的 transform-origin?

javascript - 带有一项的 Bootstrap 轮播

html - 如何为 IE7 修复站点

Javascript 将像素添加到 div 的当前位置

html - 浏览器缩小时 Bootstrap 菜单显示不正确

html - wordpress - 将相同的博客数据拉入多个站点

jQuery无响应点击事件

css - 如何在 windows 和 mac 上始终将 svg 与包含的文本元素重叠