IE6 背景位置（？）问题

Posted 2023-05-08

技术标签:

【中文标题】IE6 背景位置（？）问题【英文标题】：IE6 background-position(?) issue 【发布时间】：2010-10-20 07:22:29 【问题描述】：

我申请 *** 作为我最后的手段。我在链接背景使用图像时遇到了这个 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;

任何提示如何避免这种情况？

【问题讨论】：

类似问题：***.com/questions/594870/… 尝试在元素的样式中添加“zoom: 1” - IE 中的 hasLayout 会导致一些奇怪的错误satzansatz.de/cssd/onhavinglayout.html。我还没有尝试过，但这是我在调试这类东西时首先尝试的事情之一，因为它经常改变背景的渲染方式 【参考方案1】：

我自己也遇到了这个问题，我发现在带有背景图像的元素上使用overflow:hidden 解决了我的很多 IE6 问题（尽管不是全部）。

【讨论】：

【参考方案2】：

我会找到一个适用于 IE6 的解决方案并使用 Conditional Comments 过滤掉其他适用于 IE7、FF 等的正确版本。我还将避免在 IE6 (reference) 的 background-position 中使用百分比。

【讨论】：

我尝试使用 background-position:center left; 代替。它显示相同。那么我应该有条件地评论什么...... 尝试使用像素值，因为您处理的所有内容都是像素。我会继续破解。一旦你获得了正确的样式组合，将它们打包并使用条件 cmets 覆盖任何内容。【参考方案3】：

按照this answer 到a somewhat related question 中的建议，我建议在IE（IE8 之前）中使用background-position-x 和background-position-y 而不是background-position。

【讨论】：

【参考方案4】：

您不能将背景位置与任何* ie6 .png 一起使用。解决方案是使图像成为 gif 或 8 位 png。

*我没有使用/尝试过

【讨论】：

dillerdesign.com/experiment/DD_belatedPNG - 保留背景位置。这是最好的 PNG 修复 IMO。但我会冒险猜测 PNG 修复也会杀死背景位置。 @MiG 我使用了 htc 文件修复 link，它没有保留背景位置。 DD_belatedPNG 保留。我能够按照上面的建议使用 overflow:hidden 让我的 32 位 PNG 完美排列。【参考方案5】：

如果您的元素中有 padding-top 或 padding-bottom 带有背景图像和 background-positioning - 在 IE6 中，您可以将 padding-top: 16px; 更改为 margin-top: 16px; 并解决问题。

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

【讨论】：

【参考方案6】：

改变