我正在为工作定制Squarespace博客的CSS。我需要添加的是悬停上的标题。我找到了一个CSS代码，它做了这一切，似乎一切正常，直到我尝试了Internet Explorer。 （我从这里获取代码：squarefront addon）
出于某种原因，在IE中，所有缩略图都会变得模糊。悬停工作正常。奇怪的是，如果我点击Inspect Element，它会立即锐化所有图像。但如果我刷新它们会再次模糊。
我尝试删除一些代码以查看导致此问题的原因，它看起来像“位置：绝对;”元素导致问题。有没有办法解决这个问题？在FF，Chrome和Safari中，它可以正常运行。
This is the code I have now:
//------------------------------------*\
/* CONTENT OVERLAYS - SUMMARY & GALLERY BLOCKS
--------------------------------------
// ADDON VARIABLES
// Background Opacity
@content-overlay-hover-effect-opacity-start: .0;
@content-overlay-hover-effect-opacity-stop: .55;
// Gradient Background
.summary-block-gradient-background {
background: #000000;
background: -moz-linear-gradient(top, #000000 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #000000 0%,#000000 100%);
background: -o-linear-gradient(top, #000000 0%,#000000 100%);
background: -ms-linear-gradient(top, #000000 0%,#000000 100%);
background: linear-gradient(to bottom, #000000 0%,#000000 100%);
}
// CSS Animation Speed
@transition-speed: 150ms;
// CSS Transition
.transition-all {
-webkit-transition: all @transition-speed ease !important;
-moz-transition: all @transition-speed ease !important;
-ms-transition: all @transition-speed ease !important;
-o-transition: all @transition-speed ease !important;
transition: all @transition-speed ease !important;
}
// Summary Block Code
.sqs-block-summary-v2 {
.summary-block-setting-design-autogrid,
.summary-block-setting-design-autocolumns {
// Wildcard Transition Animation for CSS Attributes
*, *:before, *:after {
.transition-all;
}
.summary-item {
.summary-thumbnail-container {
margin: 0;
.summary-thumbnail {
&:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
opacity: @content-overlay-hover-effect-opacity-start;
.summary-block-gradient-background;
}
}
}
//hover states van de tekst
&:hover {
.summary-title{ //wijziging
opacity: 1;
}
}
&:not(:hover) {
.summary-title{ //wijziging
opacity: 0;
}
}
//positionering van de titel top is hoogte, translate3d is out of frame afstand
.summary-content {
position: absolute;
top: 30%;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: column;
flex-direction: column;
padding: 25px;
pointer-events: none;
// -webkit-transform: translate3d(0,100%,0);
// transform: translate3d(0,0%,0);
opacity: 1;
//lettertype titel
.summary-title {
width: 100%;
font-size: 2.25rem;
font-weight: 200;
a {
color: #FFFFFF;
}
}
.summary-excerpt {
width: 100%;
max-width: 600px;
opacity: 0;
p, ol, ul {
color: #FFFFFF;
}
}
}
&:hover {
.summary-thumbnail-container {
.summary-thumbnail {
&:before {
opacity: @content-overlay-hover-effect-opacity-stop;
}
}
}
.summary-content {
//-webkit-transform: translate3d(0,0,0);
//transform: translate3d(0,0,0);
.summary-excerpt {
opacity: 1;
}
}
}
}
}
}
// Gallery Block Code
.sqs-block-gallery {
.sqs-gallery-block-grid {
// Wildcard Transition Animation for CSS Attributes
*, *:before, *:after {
.transition-all;
}
.slide {
position: relative;
.image-slide-anchor {
&:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
opacity: @content-overlay-hover-effect-opacity-start;
.summary-block-gradient-background;
}
}
.margin-wrapper {
.image-slide-title {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 25px;
z-index: 5;
text-align: left;
font-size: 2.25rem;
font-weight: 200;
color: #FFFFFF;
pointer-events: none;
// -webkit-transform: translate3d(0,100%,0);
// transform: translate3d(0,100%,0);
}
}
&:hover {
.image-slide-anchor {
&:before {
opacity: @content-overlay-hover-effect-opacity-stop;
}
}
.margin-wrapper {
.image-slide-title {
// -webkit-transform: translate3d(0,40%,0);
// transform: translate3d(0,40%,0);
}
}
}
}
}
}
非常感谢任何帮助。
威尔伯特