IE6 background-position (?) Issue

Question

Tôi áp dụng cho stackoverflow làm phương sách cuối cùng của mình. Tôi đã nhận lỗi ie6 này trong khi sử dụng hình ảnh ở nền của liên kết. Dường như ie6 cuộn nền. Làm thế nào tôi có thể tránh nó?

Tại một số chiều rộng nó cho thấy như thế này:
alt text http://img135.imageshack.us/img135/8849/badie1.png

Và tại một số khác nó cho thấy như thế:
alt text http://img522.imageshack.us/img522/8180/badie2.png

IE7 & FF chương trình này giống như tôi mong đợi:
alt text http://img142.imageshack.us/img142/2296/goodie.png
Các liên kết được đặt bên trong div đang trôi nổi ở bên phải.

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

Mọi gợi ý làm cách nào để tránh điều này?

Answer 1

Tôi sẽ tìm một giải pháp hoạt động cho IE6 và sử dụng Conditional Comments để lọc ra các phiên bản thích hợp khác cho IE7, FF, v.v. Tôi cũng sẽ tránh sử dụng phần trăm trong background-position cho IE6 (reference).

Answer 2

Thay đổi

background-position:0% 50%; 

để

background-position:50% 50%; 

và thêm

background-repeat: no-repeat; 

này sẽ tập trung hình ảnh horizontially cũng như theo chiều dọc và ngăn chặn các hình ảnh từ ốp lát.

Answer 3

Tôi chỉ gặp sự cố này và tôi thấy rằng sử dụng overflow:hidden trên phần tử có hình nền giải quyết được nhiều sự cố IE6 của tôi (mặc dù không phải tất cả).

Answer 4

Như khuyên trong this answer-a somewhat related question, tôi khuyên bạn nên sử dụng background-position-x và background-position-y thay vì background-position cho IE (pre-IE8).

Answer 5

Bạn không thể sử dụng vị trí nền với bất kỳ * ie6 .png sửa chữa giải pháp là tạo hình ảnh gif hoặc 8 bit.

* Không mà tôi sử dụng/thử

Answer 6

Nếu bạn có padding-top hoặc padding-bottom trong phần tử của bạn với những hình ảnh nền và background-positioning - trong IE6, bạn có thể thay đổi bạn padding-top: 16px; để margin-top: 16px; và nó sửa chữa vấn đề.

Nó không đẩy các yếu tố khác đi và tăng gấp đôi padding nữa.
Nếu không, trong IE7 và IE8 thuộc tính padding hoạt động.