我正在尝试使用此处的代码示例：Position icons into circle
与wordpress的视频灯箱插件结合使用。 这两者似乎互相否定。
我需要将图像放在中央徽标周围的粗糙椭圆形中，并让每个视频成为打开带有灯箱效果的YouTube视频的链接。
我似乎无法弄清楚为什么这两件事互相打破。
非常感谢有关如何实现这一目标的建议。
代码如下......
HTML：
<!--[if lt IE 9]><div class="circle-container lt-ie9"><![endif]-->
<!--[if gte IE 9]><!--><div class="circle-container"><!--<![endif]-->
<a href="http://americanindustrialinc.com/wp/wp-content/uploads/2015/04/placeholder.jpg" class="center"><img src="http://americanindustrialinc.com/wp/wp-content/uploads/2015/04/ProcessVideoThumb-e1428063665849.png"></a>
<a href="https://www.youtube.com/watch?v=A1imGeNf8r0"
rel="wp-video-lightbox" class="deg0"><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg"></a>
<a href="https://www.youtube.com/watch?v=DbZR9o29kI8"
rel="wp-video-lightbox" class="deg45"><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg"></a>
<a href="https://www.youtube.com/watch?v=rDsZ2iWfYME"
rel="wp-video-lightbox" class="deg135"><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2010-26-a-thumb.jpg"></a>
<a href="https://www.youtube.com/watch?v=x_9Me6z2CZQ"
rel="wp-video-lightbox" class="deg180"><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2004-27-a-thumb.jpg"></a>
<a href="https://www.youtube.com/watch?v=Xn8uK-T0Fmg"
rel="wp-video-lightbox" class="deg225"><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-1992-17-a-thumb.jpg"></a>
<a href="https://www.youtube.com/watch?v=torOo6h1_jM"
rel="wp-video-lightbox" class="deg315"><img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg"></a>
</div>
CSS：
/*images in a circle*/
.circle-container {
position: relative !important;
width: 24em !important;
height: 24em !important;
padding: 2.8em !important; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
border: dashed 0px !important;
border-radius: 50% !important;
margin: 1.75em auto 0 !important;
}
.circle-container a {
display: block !important;
overflow: hidden !important;
position: absolute !important;
top: 50%; left: 50% !important;
width: 4em; height: 4em !important;
margin: -2em !important; /* 2em = 4em/2 */ /* half the width */
}
.circle-container img { display: block !important; width: 100% !important; }
.deg0 {
-webkit-transform: rotate(20deg) translate(12em) rotate(-85deg) !important
-moz-transform: rotate(20deg) translate(12em) rotate(-85deg) !important;
-ms-transform: rotate(20deg) translate(12em) rotate(-85deg) !important;
-o-transform: rotate(20deg) translate(12em) rotate(-85deg) !important;
transform: rotate(20deg) translate(12em) rotate(-85deg) !important;
} /* 12em = half the width of the wrapper */
.lt-ie9 .deg0 {
margin-left: 10em; !important
}
.deg45 {
-webkit-transform: rotate(90deg) translate(12em) rotate(-90deg) !important;
-moz-transform: rotate(90deg) translate(12em) rotate(-90deg) !important;
-ms-transform: rotate(90deg) translate(12em) rotate(-90deg) !important;
-o-transform: rotate(90deg) translate(12em) rotate(-90deg) !important;
transform: rotate(90deg) translate(12em) rotate(-90deg) !important;
}
.lt-ie9 .deg45 {
margin: 6.485em !important;
}
.deg135 {
-webkit-transform: rotate(160deg) translate(12em) rotate(-160deg) !important;
-moz-transform: rotate(160deg) translate(12em) rotate(-160deg) !important;
-ms-transform: rotate(160deg) translate(12em) rotate(-160deg) !important;
-o-transform: rotate(160deg) translate(12em) rotate(-160deg) !important;
transform: rotate(160deg) translate(12em) rotate(-160deg) !important;
}
.lt-ie9 .deg135 {
margin: 6.485em -10.485em !important;
}
.deg180 {
-webkit-transform: rotate(380deg) translate(-12em); rotate(-45deg) !important;
-moz-transform: rotate(380deg) translate(-12em); rotate(-45deg) !important;
-ms-transform: rotate(380deg) translate(-12em); rotate(-45deg) !important;
-o-transform: rotate(380deg) translate(-12em); rotate(-45deg) !important;
transform: rotate(380deg) translate(-12em); rotate(-45deg) !important;
}
.lt-ie9 .deg180 {
margin-left: -14em !important;
}
.deg225 {
-webkit-transform: rotate(270deg) translate(5em) rotate(-90deg) !important;
-moz-transform: rotate(270deg) translate(5em) rotate(-90deg) !important;
-ms-transform: rotate(270deg) translate(5em) rotate(-90deg) !important;
-o-transform: rotate(270deg) translate(5em) rotate(-90deg) !important;
transform: rotate(270deg) translate(5em) rotate(-90deg) !important;
}
.lt-ie9 .deg225 {
margin: -10.485em !important;
}
.deg315 {
-webkit-transform: rotate(343deg) translate(12em) rotate(-315deg) !important;
-moz-transform: rotate(343deg) translate(12em) rotate(-315deg) !important;
-ms-transform: rotate(343deg) translate(12em) rotate(-315deg) !important;
-o-transform: rotate(343deg) translate(12em) rotate(-315deg) !important;
transform: rotate(343deg) translate(12em) rotate(-315deg) !important;
}
.lt-ie9 .deg315 {
margin: -10.485em 6.485em !important;
}
/* this is just for showing the angle on hover */
.circle-container a:not(.center):before {
position: absolute;
width: 4em;
color: white;
opacity: 0;
background: rgba(0,0,0,.5);
font: 1.25em/3.45 Courier, monospace;
letter-spacing: 2px;
text-decoration: none;
text-indent: -2em;
text-shadow: 0 0 .1em deeppink;
transition: .7s; /* only works in Firefox */
content: attr(class)'°';
}
.circle-container a:hover:before { opacity: 1; }
/* this is for showing the circle on which the images are placed */
.circle-container:after {
position: absolute;
top: 2.8em; left: 2.8em;
width: 24em; height: 24em;
border: dashed 0px deeppink;
border-radius: 50%;
opacity: .3;
pointer-events: none;
content: '';
}
.circle-container:hover:after { opacity: 1; }
.circle-container a:not(.center):after {
position: absolute;
top: 50%; left: 50%;
width: 4px; height: 4px;
border-radius: 50%;
box-shadow: 0 0 .5em .5em white;
margin: -2px;
background: deeppink;
opacity: .3;
content: '';
}
.circle-container:hover a:after { opacity: 1; }
.circle-container a:hover:after { opacity: .3; }
/*end circle of images*/
我有限的经验并没有找到解决方案。 请帮忙。
我尝试了很多东西（包括用引号线程中使用的单一刻度（＆＃39;）替换引号（＆＃34;）。我尝试删除对旧IE版本的支持。
我正在测试的浏览器是chrome。也在FF测试。答案 0 :(得分：0)