5

I apply to stackoverflow as my last resort. I got this ie6 bug while using the image at the background of the link. It seems that ie6 scrolls the background. How can I avoid it?

At some width it shows like this:
alt text http://img135.imageshack.us/img135/8849/badie1.png

And at some other it shows like that:
alt text http://img522.imageshack.us/img522/8180/badie2.png

IE7 & FF show this just like I expect:
alt text http://img142.imageshack.us/img142/2296/goodie.png
The links are placed inside the div which is floating to the right.

<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;
     }

Any hints how can I avoid this?

4

6 回答 6

3

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

于 2009-05-04T07:51:10.890 回答
1

I would find a solution that works for IE6 and use Conditional Comments to filter out the other proper versions for IE7, FF, etc. I would also avoid using percents in the background-position for IE6 (reference).

于 2009-04-18T16:35:15.240 回答
1

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

*我没有使用/尝试过

于 2010-04-14T11:20:31.833 回答
1

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

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

于 2010-10-17T11:51:18.550 回答
1

正如这个对某个相关问题的回答所建议的那样，我建议使用and而不是IE (pre-IE8)。background-position-xbackground-position-ybackground-position

于 2009-05-14T17:47:41.937 回答
0

改变

background-position:0% 50%;

至

background-position:50% 50%;

并添加

background-repeat: no-repeat;

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

于 2009-04-21T12:38:45.767 回答