2013-07-04 4 views
0

Кажется, у меня есть какая-то проблема с прозрачностью в моем последнем проекте.Фоновая прозрачность не работает в IE9 и ниже

Я использую вариант CSS

background: transparent; 

сделать фон элемента прозрачным.

К сожалению, кажется, не работать и порывает с коробкой тенью или границей или что-то, так что мой уль выглядит странно ...

Проект Я говорю о temporarly доступен на

Project

Я говорю о

<ul id="nav"> 

элемент. Такое поведение появляется только в IE9 и ниже.

Для последующего использования, вот изображение описанной проблемы.

Navigation <ul>

Вот текст соответствующего HTML кода

<ul id="nav"> 
     <li class="active"><a href="https://ggb2.zzinternet.de/homepage.html" target="_self">Startseite</a></li> 
     <li><a href="https://ggb2.zzinternet.de/leistungen.html" target="_self">Leistungen</a></li> 
     <li><a href="https://ggb2.zzinternet.de/seminare.html" target="_self">Seminare</a></li> 
     <li><a href="https://ggb2.zzinternet.de/ueber-uns.html" target="_self">Über Uns</a></li> 
     <li><a href="https://ggb2.zzinternet.de/kontakt---service.html" target="_self">Kontakt</a></li> 
     <li><a href="https://ggb2.zzinternet.de/karriere.html" target="_self">Karriere</a></li> 
</ul> 

и вот соответствующий CSS

#nav { 
    margin: 0; 
    list-style: none; 
    background: transparent;  
    margin-left: 35%; 
    height: 31px; 
    width: 625px; 
    display: block; 
    border: 0; 
} 
    #nav li { 
    border: 0; 
    float: left; 
    margin: 0; 
    position: relative; 
    line-height: 30px; 
    background: url('individual/menu/middle-el_bg.png'); 
    display: inline; 
    border: 0; 
    width: 15%; 
} 


#nav { 
box-shadow: 0px 5px 8px rgba(0,0,0,0.2); 
} 

#nav li.active:after { 
    box-shadow: -2px 5px 8px rgba(0,0,0,0.2); 
} 

#nav li.active:before { 
    box-shadow: 2px 5px 8px rgba(0,0,0,0.2); 
} 

Спасибо за вашу помощь!

+0

это может помочь http://stackoverflow.com/questions/3997065/ie-css-bug-background-color- transparent-behaves-differently-to-background-colo – urbanlemur

+1

Это очень мало подходит для более поздних пользователей StackOverflow, чтобы вы могли опубликовать только ссылку, которая «доступна во временном [i] ly». Что вам нужно сделать, это опубликовать меньший тестовый пример на сайте, например [jsFiddle] (http://jsfiddle.net/), с соответствующим кодом для воспроизведения проблемы, а затем опубликовать здесь код html и css. – ScottS

+0

@ScottS Спасибо за советы, я уже добавил изображение своей проблемы и в настоящее время пытаюсь создать jsFiddle – Evils

ответ

1

Почему вы не удалите следующую строку из т-fixes9.css

#nav box-shadow: 0px 5px 8px rgba(0,0,0,0.2) 
Смежные вопросы