Question

在我的网站上，我放置了一些社交图标，这些图标在悬停时会变换，并且还包含自定义字体。它们在我的主站点上工作正常，包括IE在内的所有浏览器。但是在我使用相同代码的论坛上，使用IE无法正常工作。

您可以在此处查看实际网站：

主要网站：http://mydivision.net/ - 包括IE在内的所有浏览器都很好论坛：http://mydivision.net/forum/ - 在排除IE的所有浏览器中都很好

CSS代码：

<style type='text/css'>
@font-face {font-family: 'icomoon'; src:url('http://mydivision.net/wp-content/themes/v1/font/icomoon_x1.eot'); src:url('http://mydivision.net/wp-content/themes/v1/font/icomoon_x1.eot?#iefix') format('embedded-opentype'), url('http://mydivision.net/wp-content/themes/v1/font/icomoon_x1.ttf') format('truetype'), url('http://mydivision.net/wp-content/themes/v1/font/icomoon_x1.woff') format('woff'), url('http://mydivision.net/wp-content/themes/v1/font/icomoon_x1.svg#icomoon') format('svg'); font-weight: normal; font-style: normal;}
#social_container {float: right; height: 40px; width: 230px; margin: 90px 0 0 0;}
.so_link {width: 32px; height: 32px; border-radius: 50%;}
.so_fb, .so_gp , .so_tw, .so_yt, .so_st, .so_fe {width: 32px; height: 32px; float: left; margin-right: 4px; border: 1px solid #fff; border-radius: 50%; -webkit-transition:all 0.4s ease; transition:all 0.4s ease;}
.so_fb:hover {background: #3b5998; border: 1px solid #3b5998;}
.so_gp:hover {background: #d34836; border: 1px solid #d34836;}
.so_tw:hover {background: #00aced; border: 1px solid #00aced;}
.so_yt:hover {background: #cd201f; border: 1px solid #cd201f;}
.so_st:hover {background: #000; border: 1px solid #000;}
.so_fe:hover {background: #ffbb33; border: 1px solid #ffbb33;}
.so_fb:hover, .so_tw:hover, .so_yt:hover, .so_st:hover, .so_gp:hover , .so_fe:hover {transform: rotate(-360deg); -webkit-transform: rotate(-360deg); transition-duration: 0.5s; -webkit-transition-duration: 0.5s;}
.so_fb:before, .so_tw:before, .so_yt:before, .so_st:before, .so_gp:before , .so_fe:before {font-family: 'icomoon'; font-size: 24px; color: #fff; position: relative;}
.so_fb:before {content: '\f09a'; top: 4px; left: 9px;}
.so_tw:before {content: '\f099'; top: 4px; left: 6px;}
.so_yt:before {content: '\f167'; top: 3px; left: 6px;}
.so_st:before {content: '\f1b6'; top: 3px; left: 3px;}
.so_gp:before {content: '\f0d5'; top: 4px; left: 6px;}
.so_fe:before {content: '\f09e'; top: 4px; left: 8px;}
</style>

HTML code：

    <div id="social_container">
        <a class="so_link" href="https://www.facebook.com/mydivision.net" title="Werde Fan auf Facebook!" target="_blank"><span class="so_fb"></span></a>
        <a class="so_link" href="https://twitter.com/MYDIVISIONNET" title="Folge uns auf Twitter!" target="_blank"><span class="so_tw"></span></a>
        <a class="so_link" href="http://www.youtube.com/DIVISIONNET" title="Abonniere uns auf YouTube!" target="_blank"><span class="so_yt"></span></a>
        <a class="so_link" href="http://steamcommunity.com/groups/MYDIVISIONNET/" title="Trete unserer STEAM-Gruppe bei!" target="_blank"><span class="so_st"></span></a>
        <a class="so_link" href="https://plus.google.com/+MyDivisionNetPlus" title="Finde uns auf Google+!" target="_blank"><span class="so_gp"></span></a>
        <a class="so_link" href="http://mydivision.net/feed/" title="Abonniere unser RSS-Feed!" target="_blank"><span class="so_fe"></span></a>
    </div>

这是相同的代码，所以我不知道为什么它不起作用。
有人可以帮忙吗？

Answer 1

我猜想这与设置为在IE7模式下显示论坛的元http-equiv标签有关？

CSS不在IE中工作，但在所有其他浏览器中工作

1 个答案: