在IE浏览器中截取的盒子影子的顶部部分只有

在我的网站上，我有链接时出现悬停时出现的盒子阴影。你可以在http://www.lorteau.fr上看到它。这在Chrome，Opera和Firefox上运行得很好。然而，IE浏览了它的顶部。在IE浏览器中截取的盒子影子的顶部部分只有

铬，歌剧，火狐：

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 2014-11-14 18:59:52

感谢您的回答。 IE11，但我已经固定它，见下文。我不能将我的答案标记为2天前的解决方案。 – NorthernLights 2014-11-14 19:03:33

Pff没关系。删除了“margin-top：5px;”来自#menu并添加了“padding-top：15px;”并做到了。

明确地说明问题始终有帮助！

来源

2014-11-14 18:57:21 NorthernLights

在IE浏览器中截取的盒子影子的顶部部分只有

回答

相关问题