Верхняя часть тени теней обрезана только в IE

На моем сайте у меня есть ссылки с тенью, которая появляется при наведении курсора. Вы можете увидеть его на http://www.lorteau.fr. Это отлично работает в Chrome, Opera и Firefox. Однако IE зажимает верхнюю часть.Верхняя часть тени теней обрезана только в IE

Chrome, Opera, Firefox:

IE:

HTML определение ссылки и все контейнеры вокруг него:

<body> 
<div class="main m-scene" id="page"> 
    <div id="menu"> 
     <a class="menu_link" id="wphone_link" href="wphone.html">Windows Phone</a> 
     <a class="menu_link" id="wmetro_link" href="wmetro.html">Windows Metro</a> 
     <a class="menu_link" id="wdesktop_link" href="wdesktop.html">Windows Desktop</a> 
     <a class="menu_link" id="linux_link" href="linux.html">Linux</a> 
     <a class="menu_link" id="other_link" href="other.html">Other</a> 
    </div> 
</div> 
</body>

CSS3, определяющий эффект зависания и контейнеры вокруг его:

.html 
{ 
    background-color: #464646; 
} 

body 
{ 
    margin: 0; 
} 

#page 
{ 
    width: 900px; 
    min-width: 800px; 
    min-height: 100%; 
    -pie-box-shadow: 0px 0px 3px 1px #FFFFFF; 
    -moz-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5); 
    -webkit-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5); 
    box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5); 
    background-image: none; 
    border-width: 1px; 
    border-style: solid; 
    border-color: #000000; 
    background-color: #3C3C3C; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 0px; 
    margin-bottom: 0px; 
    padding: 7px 5px 6px 32px; 
} 
#menu 
{ 
    height: 57px; 
    display: block; 
    width: 85%; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 5px; 
    text-align: center; 
} 
.menu_link, .menu_link:hover 
{ 
    font-family: 'Electrolize', Arial, sans-serif; 
    font-size: 18px; 
    text-align: left; 
    color: white; 
    display: inline; 
    text-decoration: none; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #777777; 
    border-radius: 5px; 
    background-color: #777777; 
    padding: 5px; 
    margin-right: 5px; 
    -webkit-transition: 250ms linear 0s; 
    -moz-transition: 250ms linear 0s; 
    -o-transition: 250ms linear 0s; 
    transition: 250ms linear 0s; 
} 

.menu_link:hover 
{ 
    color: #FFBE5B; 
    box-shadow: 0px 0px 5px 5px rgba(255, 190, 91, 0.5); 
} 

.menu_link:active 
{ 
    color: #FFBE5B; 
} 

.m-scene .scene_element 
{ 
    animation-duration: 0.25s; 
    -webkit-animation-duration: 0.25s; 
    animation-fill-mode: both; 
    -webkit-animation-fill-mode: both; 
    transition-timing-function: ease-out; 
}

Я пробовал все комбинации дополнений, полей и высоты, о которых я мог думать, но это ничего не меняло. Будет ли у кого-нибудь представление о том, что я могу изменить, чтобы тень не была обрезана ни в одном браузере?

источник

2014-11-14 NorthernLights

Какую версию IE вы тоже имеете в виду? Когда я просматриваю ваш сайт в IE-эмуляторе (IE-9-11), все отображается правильно. – crazymatt

Спасибо за ответ. IE11, но я исправил его уже, см. Ниже. Я не могу отметить свой ответ как решение до 2 дней. – NorthernLights

Pff неважно. Удалено «margin-top: 5px;» из #menu и добавлен «padding-top: 15px;» и это было сделано.

Выделение вопроса ясно всегда помогает!

источник

2014-11-14 18:57:21 NorthernLights

Верхняя часть тени теней обрезана только в IE

ответ

Смежные вопросы