当我使用PC时，我无法看到模糊过滤器在Firefox上工作，即 但对我来说，它完美无缺。如果你想尝试，这是我的代码或jsfiddle链接： [JSFILLE] [1]
[1]: http://jsfiddle.net/kodjoe/3avv3v5L/3/
这是我的HTML代码：
<div class="remodalshare-bg"><a href="#follow">FOLLOW</a></div>
<div style="height:auto;" class="remodalshare" data-remodalshare-id="follow">
<div style="position: absolute; top:5px; right:10px; border:0px;z-index:9999999;" class="remodalshare-closeposition">
<a href="#" data-remodalshare-action="close" class="remodalshare-close" aria-label="Close">
<img src="http://www.500milligrammes.com/facticemagazine/final/addon/modal/x.png" alt="close"/>
</a>
</div>
TEST
</div>
这是我的CSS代码：
*, *:after, *:before { padding: 0;margin: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
.clearfix:before, .clearfix:after {content: " "; display: table;}
.clearfix:after { clear: both;}
.clearfix { *zoom: 1; }
html, body { height: 100%;}
.identifiant {text-align:center;}
img, object, embed { max-width: 100%; border: 0px none; }
body {padding: 0px; margin: 0px auto; font-weight:400; font-family:"open_sansregular", "Arial", sans-serif; background: url(http://www.500milligrammes.com/facticemagazine/final/addon/menupage/background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; border:0px solid #fff; line-height:1.5em}
.remodalshare-is-active .remodalshare-bg { background: url(http://www.500milligrammes.com/facticemagazine/final/addon/menupage/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-filter: blur(8px);
-ms-filter: blur(8px);
-moz-filter: blur(8px);
-o-filter: blur(8px);
filter: blur(8px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='8');
}
/* ----- Modal with share button ----- */
.sharepositionabout { margin:20px 0px 20px 0px; width:100%; text-align:left; }
html.remodalshare-is-locked { overflow: hidden; }
.page, .remodalshare { -webkit-text-size-adjust:100% }
/* Anti FOUC */
.remodalshare,[data-remodalshare-id] { display:none }
/* Necessary styles of the overlay */
.remodalshare-overlay { position: fixed; z-index: 9999; top: -5000px; right: -5000px; bottom: -5000px; left: -5000px; display: none; background: #fff; background:rgba(255,255,255,1) }
/* Necessary styles of the wrapper */
.remodalshare-wrapper { position:fixed; z-index:10000; top:0; right:0; bottom:0; left:0; display:none; overflow:auto; text-align:center; -webkit-overflow-scrolling:touch; padding:0px }
.remodalshare-wrapper:after { display:inline-block; height:100%; margin-left:-.05em; content:"" }
/* Fix iPad, iPhone glitches */
.remodalshare-overlay,.remodalshare-wrapper { -webkit-backface-visibility:hidden;backface-visibility:hidden }
/* Necessary styles of the modal dialog */
.remodalshare { position:relative; display: inline-block; -moz-text-size-adjust:100%;-ms-text-size-adjust:100%; text-size-adjust:100%; -webkit-box-sizing:border-box; box-sizing:border-box; width:100%; padding:0px; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); color:#2b2e38; background:#fff }
/* Background for effects */
.remodalshare-bg { -webkit-transition: -webkit-filter 0.2s ease-out; -moz-transition: -moz-filter 0.2s ease-out; -o-transition: -o-filter 0.2s ease-out; transition: filter 0.2s ease-out; height:100%;}
/* Default theme styles of the overlay */
.remodalshare-overlay {
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
opacity: 0;
background: rgba(255, 255, 255, 0);
}
body.remodalshare-is-active .remodalshare-overlay { opacity: 1; }
/* Default theme styles of the modal dialog */
.remodalshare {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
min-height: 100%;
padding: 40px 35px 20px 35px;
-webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out, opacity 0.2s ease-out;
-o-transition: -o-transform 0.2s ease-out, opacity 0.2s ease-out;
transition: transform 0.2s ease-out, opacity 0.2s ease-out;
-webkit-transform: scale(0.95);
-moz-transform: scale(0.95);
-ms-transform: scale(0.95);
-o-transform: scale(0.95);
transform: scale(0.95);
opacity: 0;
color: #000;
background: rgba(255, 255, 255, 1);
background-clip: padding-box;
}
body.remodalshare-is-active .remodalshare {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
/* Vertical align of the modal dialog */
.remodalshare, .remodalshare-wrapper:after { vertical-align: middle; }
/* Media queries
========================================================================== */
@media only screen and (min-width: 480px) {
.remodalshare {
max-width: 480px;
min-height: 0;
margin: 20px auto 0px auto;
-webkit-border-radius: 6px;
border-radius: 6px;
}
}
/* IE8
========================================================================== */
.lt-ie9 .remodalshare-overlay { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F021242E, endColorstr=#F021242E); }
.lt-ie9 .remodalshare { width: 480px; min-height: 0; margin: 20px auto 0px auto; }