First off, the jsfiddle: http://jsfiddle.net/MhFk4/2/
In IE9 everything is working fine, but IE8 & below I'm running into issues.. on the development site, only one of the buttons shows up in IE8 at all (yet on the fiddle it shows up, but the border-radius isn't working properly?.)
Here's the actual development site to see what IE8 does there: http://tinyurl.com/bxy449e
.view-home-cta-view {
ul {
list-style: none;
margin: 40px 0 0;
padding: 0;
height: 380px;
li {
float:left;
margin: 0 25px 0 0;
position:relative;
.views-field-field-cta-image {
border: 10px solid #fff;
@include border-radius(150px);
width:270px;
box-shadow:0 0 25px rgba(0, 0, 0, 0.7);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
img {
max-width:100%;
height: auto;
@include border-radius(140px);
}
}
.views-field-field-regular-link {
font-family: $o;
font-size:22px;
width:100%;
position:absolute;
bottom:14px; // 60px up from bottom
left: 0;
z-index: 3000;
a {
color:#fff;
text-decoration: none;
background: $green;
display:block;
text-align:center;
line-height:22px;
padding: 13px 0 15px;
@include border-radius(5px);
box-shadow:0 0 10px rgba(0, 0, 0, 0.7);
@include transition(0.5s);
&:hover {
background: lighten($green,5%);
}
}
}
.views-field-field-attachment-link {
font-family: $o;
font-size:16px;
width:100%;
position:absolute;
bottom:-20px;
left:0;
a {
color:#fff;
text-decoration: none;
background: $brown;
display:block;
text-align:center;
@include border-radius(0 0 5px 5px);
margin: 0 20px;
padding: 8px 0 10px;
line-height:16px;
box-shadow:0 0 7px rgba(0, 0, 0, 0.6);
@include transition(0.5s);
&:hover {
background: lighten($brown,5%);
}
}
}
&.views-row-last {
margin-right: 0;
}
}
}}
All the SCSS code is in the JSfiddle (with mixins and variables for color). If anyone could shine some light on this I'd appreciate it, thanks!
这里的问题围绕z-index
,我设法通过对li
元素内部的每个容器div应用z-index
来解决它,并在li
本身上添加了一个额外的z-index
。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.