IE6背景位置问题

Question

我最后选择向stackoverflow求助。 在使用链接背景图片时，我遇到了ie6的问题。看起来ie6会滚动背景。我该如何避免呢？

在某些宽度下，它显示为这样：
alt text http://img135.imageshack.us/img135/8849/badie1.png 而在其他一些宽度下，它则显示为：
alt text http://img522.imageshack.us/img522/8180/badie2.png IE7和FF的效果与我预期的完全相同：
alt text http://img142.imageshack.us/img142/2296/goodie.png
这些链接放置在向右浮动的div中。

<a href="/tr" class="menuLink" style="background-image:url(/img/tr.png);">TR</a>
<a href="/eng" class="menuLink" style="background-image:url(/img/eng.png); margin-right:30px;">ENG</a>
<a href="/logout" class="menuLink" style="background-image:url(/img/logout.png);"><?=$ui["exit"];?></a>

   .menuLink {
     font-family:"Tahoma";
     font-size:11px;
     color:#003300;
     text-decoration:underline;
     font-weight: bold;
     background-position:0% 50%;
     background-repeat:no-repeat;
    }
     .menuLink:hover {
     font-size:11px;
     color:#047307;
     text-decoration:underline;
     font-weight: bold;
     }

有什么提示可以避免这种情况吗？

- turezky

---

类似问题：https://dev59.com/2nRB5IYBdhLWcg3wiHpl - system PAUSE

尝试将"zoom: 1"添加到元素的样式中 - 在IE中具有Layout可能会导致一些奇怪的bug。我没有尝试过，但这是我在调试这种问题时尝试的第一件事情之一，因为它经常会改变背景渲染的方式。参考链接：http://www.satzansatz.de/cssd/onhavinglayout.html - cryo

Answer 1

我刚刚遇到了这个问题，我发现在具有背景图像的元素上使用overflow:hidden解决了我的许多IE6问题（虽然不是全部）。

- VirtuosiMedia

Answer 2

在任何*ie6 .png修复程序中，您不能使用background-position。解决方案是将图像制作为gif或8位png。

*我使用/尝试的都没有

- Scott

---

http://www.dillerdesign.com/experiment/DD_belatedPNG/ - 保留背景位置。在我看来，这是最好的PNG修复工具。但我猜测PNG修复工具也会影响背景位置。 - Hux

@MiG 我之前使用了 htc 文件修复 链接，但是它无法保留背景位置。而 DD_belatedPNG 可以做到。 - Harish

我能够按照上面的建议使用overflow:hidden完美地对齐我的32位PNG。 - strongriley

Answer 3

如果您的元素中有背景图像和背景定位的padding-top或padding-bottom，在IE6中，您可以将padding-top: 16px;更改为margin-top: 16px;，这样就可以解决问题了。

这不会再推开其他元素并使填充加倍。
否则，在IE7和IE8中，填充属性有效。

- Steve

Answer 4

我会寻找适用于IE6的解决方案，并使用条件注释来过滤其他适用于IE7、FF等版本的正确版本。我还会避免在IE6中使用百分比作为background-position（参考）。

- Daniel A. White

---

我尝试使用<code>background-position:center left;</code>代替。它显示相同的结果。那么我应该有什么条件性的评论呢？ - turezky

尝试使用像素值，因为你所处理的一切都是像素。 - Daniel A. White

我会继续不停地hack。一旦你找到了正确的样式组合，请将它们打包并使用条件注释来覆盖任何内容。 - Daniel A. White

Answer 5

如此答案中所建议的，针对一个相关问题，我建议在IE（IE8之前）中使用background-position-x和background-position-y代替background-position。

- system PAUSE

Answer 6

更改

background-position:0% 50%;

返回

background-position:50% 50%;

并添加

background-repeat: no-repeat;

这将使图像水平和垂直居中，并防止图像平铺。

- Shaun Humphries

---

如果我这么做，我的图片会被放在文本后面 :( 并且居中显示，我需要把图片放在文本前面... - turezky