Question

我正在尝试在我的博客标题中添加一个包含bg图像和链接的div。我在Chrome中看起来不错，但在Safari和Firefox中看错了。我怀疑它不是AP div本身，而是导致转变的其他元素，虽然我无法弄清楚是什么，我正在使用重置。

以下链接指向屏幕截图显示我正在谈论的内容：

以下是该网站的链接：

这是我正在使用的CSS：

#trex-blog {
margin-left: 435px;
position: absolute;
top: 50px;
z-index: 50000;

}

#trex-blog a, #trex-blog a:visited, #trex-blog a:hover {
background: url(../img/blog-trex.png) no-repeat scroll 0 0 transparent;
display: block;
height: 121px;
width: 356px;
font-size: 0;
line-height: 0;
overflow: hidden;    
text-indent: -9999px;
}

这是html

<div id="trex-blog"><a href="http://www.artyst-tyrant.com" title="Artyst Tyrant - Victor Beazzo Designer for Hire">Artyst Tyrant - Victor Beazzo Designer for Hire</a></div>

贸易设计师正在努力学习编码，但我绝不是专业人士，所以请轻松一点。

提前感谢您的帮助，非常感谢。

Answer 1

Win7上的Chrome v18将图像渲染到与其他浏览器相同的位置 - 也许您只是在Chrome上浏览缓存版本？

对绝对定位元素的唯一警告是，如果它们被包裹在相对定位的元素中 - 那么绝对位置相对于父元素 - http://css-tricks.com/absolute-positioning-inside-relative-positioning/

我查看了您的源代码，并没有注意到父元素上的任何位置相对属性。

我将css top属性值调整为20px，并且它在所有当前浏览器中都与我对齐。

AP div位置在chrome，firefox，safari中略有不同

1 个答案: