我遇到了Firefox及其附带代码的问题。 IE浏览器。我不知道在哪里开始解决这个问题。如果你在Chrome中查看代码，一切都运行得很好，但它在Firefox中真的搞砸了。
非常感谢任何建议。
.empty_canvas_content {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
*{margin:0;padding:0;box-sizing:border-box;}
.containerclaims{margin:0 auto;max-width:1140px;}
[class*=bit-]{float:left;padding:.3em;}
/* Grids */
.bit-1{width:100%;}
.bit-2{width:50%;}
.bit-3{width:33.33333%;}
.bit-4{width:25%;}
.bit-5{width:20%;}
.bit-6{width:16.66667%;}
.bit-7{width:14.28571%;}
.bit-8{width:12.5%;}
.bit-9{width:11.11111%;}
.bit-10{width:10%;}
.bit-11{width:9.09091%;}
.bit-12{width:8.33333%;}
.bit-25{width:25%;}
.bit-40{width:40%;}
.bit-60{width:60%;}
.bit-75{width:75%;}
.bit-35{width:35%;}
.bit-65{width:65%;}
/* Hover Effect */
.hovereffect {
width: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #000;
}
.hovereffect .overlay {
width: 100%;
position: absolute;
overflow: hidden;
top: 45%;
left: 0;
text-align: center;
transform: translateY(-50%);
}
.hovereffect img {
display: block;
position: relative;
max-width: none;
width: calc(100% + 20px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px,0,0);
transform: translate3d(-10px,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.hovereffect:hover img {
opacity: 0.5;
filter: alpha(opacity=40);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.hovereffect h2 {
text-transform: uppercase;
text-shadow: 1px 1px 2px black, 0 0px 20px black, 0 0 0px black;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
overflow: hidden;
padding: 0.5em 0;
background-color: transparent;
}
/*.hovereffect h2:after {
position: absolute;
text-shadow: none;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
}*/
.hovereffect:hover h2:after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.hovereffect a, .hovereffect p {
color: #FFF;
opacity: 0;
margin-top:-30px;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
.hovereffect:hover a, .hovereffect:hover p {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* End Hover Effect */
/* Button */
.HomepageBtn {
text-align:center;
margin-top:15px;
width:200px;
font-family: 'Source Sans Pro', sans-serif;
font-weight:400;
color: #ffffff;
font-size: 12px;
background: #000;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.HomepageBtn:hover {
text-decoration: none;
}
.hideformobile {display:block;}
.showformobile {display:none;}
/* Responsive Goodness */
/* Defaults above are set Desktop resolution or higher */
/* Laptop */
@media (min-width:50em) and (max-width:68.75em){
.bit-7,.bit-35,.bit-65{width:100%;}
.bit-10,.bit-12,.bit-4,.bit-8{width:50%;}
}
/* Tablet */
@media (min-width:30em) and (max-width:50em){
.bit-10,.bit-12,.bit-4,.bit-6,.bit-8{width:50%;}
.bit-1,.bit-11,.bit-3,.bit-5,.bit-7,.bit-9{width:100%;}
}
/* Mobile */
@media (max-width:40em){
.bit-1,.bit-10,.bit-11,.bit-12,.bit-2,.bit-3,.bit-4,.bit-5,.bit-6,.bit-7,.bit-8,.bit-9{width:100%;}
.hideformobile {display:none;}
.showformobile {display:block;}
}
<p>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" />
<div class="containerclaims">
<div class="hideformobile">
<div class="bit-1">
<picture> <source media="(min-width: 50em)" srcset="//deichmann.scene7.com/is/image/deichmann/header?wid=1200&fmt=jpg" width="100%"></source> <source media="(min-width: 0em)" srcset="//deichmann.scene7.com/is/image/deichmann/header-mobile-3?wid=1219&fmt=jpg" width="100%"></source> <!-- img tag for browsers that do not support picture element --> <img src="//deichmann.scene7.com/is/image/deichmann/header?wid=1200&fmt=jpg" alt="Get More. Save More." width="100%" /> </picture>
<p style="margin-top:15px; margin-bottom:1px; text-align:center; font-size:12px; font-family: 'proxima_nova_rgregular'; color: #979797; text-decoration:none !important;"><a href="/women-shoes.cat?source=hpheaderwomens--desktop&icid=20161019_fall">SHOP MEN'S →</a> <a href="/girls-shoes.cat?source=hpheadergirls-desktop&icid=20161019_fall">SHOP GIRLS' →</a> <a href="/boys-shoes.cat?source=hpheaderboys-desktop&icid=20161019_fall">SHOP BOYS' →</a></p>
</div>
</div>
<div class="bit-1">
<div class="bit-2">
<div class="hideformobile">
<div class="hovereffect"><a href="/women-shoes/women-boots/women-boots-combatlaceup.cat?source=hpstory1desktop&icid=20161019_fall"><img class="img-responsive" src="http://deichmann.scene7.com/is/image/deichmann/story1?wid=588&fmt=jpg" alt="" width="100%" /></a>
<div class="overlay">
<h2 style="font-size:40px; font-family: 'Montserrat', sans-serif; text-decoration:none !important;">Lace Up</h2>
<p><a href="/women-shoes/women-boots/women-boots-combatlaceup.cat?filter-cat=%2Fhighlight%2Fwomen-shoes%2Fwomen-boots%2Fwomen-boots-combatlaceup&pp=40&orderby=price-asc?source=hpstory1pricepoint&icid=20161019_fall"><font style="font-size:14px; font-family: 'proxima_nova_rgregular'; font-weight:400; color:#fff; text-decoration:none !important;">STARTING AT $34.99</font></a></p>
</div>
</div>
</div>
<div class="showformobile"><a href="/women-shoes/women-boots/women-boots-combatlaceup.cat?source=hpstory1mobile&icid=20161019_fall"><img src="http://deichmann.scene7.com/is/image/deichmann/story1?wid=588&fmt=jpg" alt="" width="100%" /></a></div>
<div class="bit-1" style="margin-top:12px; padding:10px; margin-bottom:20px;">
<div class="showformobile"><center><font style="font-size:25px; font-family: 'proxima_nova_rgregular', sans-serif; font-weight:400; color:#000; text-decoration:none !important;">Women's Lace Up</font><br />
<p style="margin-bottom:10px; margin-top:-5px;"><font style="font-size:14px; font-family: 'proxima_nova_rgregular', sans-serif; font-weight:400; color:#000; letter-spacing:2px;">STARTING AT <font style="font-family: 'proxima_nova_rgbold', sans-serif;">$34.99</font></font></p>
</center></div>
<center><font style="font-size:14px; font-family: 'proxima_nova_rgregular', sans-serif; font-weight:400; color:#000; text-decoration:none !important;">A fall frontrunner, fit to be tied. Available in a variety of heights and styles, you're sure to find a pair for any occasion.</font> <a href="/women-shoes/women-boots/women-boots-combatlaceup.cat?source=hpstory1shopnow&icid=20161019_fall">
<div class="HomepageBtn">SHOP NOW →</div>
</a> </center></div>
</div>
<div class="bit-2">
<div class="hideformobile">
<div class="hovereffect"><a href="/women-shoes/women-boots/women-boots-bootiesankleboots.cat?source=hpstory2desktop&icid=20161019_fall"><img class="img-responsive" src="http://deichmann.scene7.com/is/image/deichmann/story2?wid=588&fmt=jpg" alt="" width="100%" /></a>
<div class="overlay">
<h2 style="font-size:40px; font-family: 'Montserrat', sans-serif; text-decoration:none !important;">Short Boots</h2>
<p><a href="/women-shoes/women-boots/women-boots-bootiesankleboots.cat?filter-cat=%2Fhighlight%2Fwomen-shoes%2Fwomen-boots%2Fwomen-boots-bootiesankleboots&pp=40&orderby=price-asc?source=hpstory2pricepoint&icid=20161019_fall"><font style="font-size:14px; font-family: 'proxima_nova_rgregular'; font-weight:400; color:#fff; text-decoration:none !important;">STARTING AT $29.99</font></a></p>
</div>
</div>
</div>
<div class="showformobile"><a href="/women-shoes/women-boots/women-boots-bootiesankleboots.cat?source=hpstory2mobile&icid=20161019_fall"><img src="http://deichmann.scene7.com/is/image/deichmann/story2?wid=588&fmt=jpg" alt="" width="100%" /></a></div>
<div class="bit-1" style="margin-top:12px; padding:10px; margin-bottom:20px;">
<div class="showformobile"><center><font style="font-size:25px; font-family: 'proxima_nova_rgregular', sans-serif; font-weight:400; color:#000; text-decoration:none !important;">Women's Short Boots</font><br />
<p style="margin-bottom:10px; margin-top:-5px;"><font style="font-size:14px; font-family: 'proxima_nova_rgregular', sans-serif; font-weight:400; color:#000; letter-spacing:2px;">STARTING AT <font style="font-family: 'proxima_nova_rgbold', sans-serif;">$29.99</font></font></p>
</center></div>
<center><font style="font-size:14px; font-family: 'proxima_nova_rgregular', sans-serif; font-weight:400; color:#000; text-decoration:none !important;">Keep it short and sweet with this season's go-to boot. Suitable for any wardrobe with an array of styles to choose from.</font> <a href="/women-shoes/women-boots/women-boots-bootiesankleboots.cat?source=hpstory2shopnow&icid=20161019_fall">
<div class="HomepageBtn">SHOP NOW →</div>
</a> </center></div>
</div>
</div>
<div class="bit-1" style="margin-bottom:8px;"><a href="#lightboxClickOpen">
<picture> <source media="(min-width: 50em)" srcset="//deichmann.scene7.com/is/image/deichmann/video?wid=1200&fmt=jpg" width="100%"></source> <source media="(min-width: 0em)" srcset="//deichmann.scene7.com/is/image/deichmann/video-mobile?wid=1219&fmt=jpg" width="100%"></source> <!-- img tag for browsers that do not support picture element --> <img src="//deichmann.scene7.com/is/image/deichmann/video?wid=1200&fmt=jpg" alt="Get More. Save More." width="100%" /> </picture>
</a></div>
<div class="bit-1" style="margin-top:25px;">
<div class="bit-2">
<div class="hideformobile">
<div class="hovereffect"><a href="/men-shoes/men-boots.cat?source=hpstory3desktop&icid=20161019_fall"><img class="img-responsive" src="http://deichmann.scene7.com/is/image/deichmann/story3?wid=588&fmt=jpg" alt="" width="100%" /></a>
<div class="overlay">
<h2 style="font-size:40px; font-family: 'Montserrat', sans-serif; text-decoration:none !important;">Men's Boots</h2>
<p><a href="/men-shoes/men-boots.cat?filter-cat=%2Fhighlight%2Fmen-shoes%2Fmen-boots&pp=40&orderby=price-asc?source=hpstory3pricepoint&icid=20161019_fall"><font style="font-size:14px; font-family: 'proxima_nova_rgregular'; font-weight:400; color:#fff; text-decoration:none !important;">STARTING AT $49.99</font></a></p>
</div>
</div>
</div>
<div class="showformobile"><a href="/men-shoes/men-boots.cat?source=hpstory3mobile&icid=20161019_fall"><img src="http://deichmann.scene7.com/is/image/deichmann/story3?wid=588&fmt=jpg" alt="" width="100%" /></a></div>
<div class="bit-1" style="margin-top:12px; padding:10px; margin-bottom:20px;">
<div class="showformobile"><center><font style="font-size:25px; font-family: 'proxima_nova_rgregular', sans-serif; font-weight:400; color:#000; text-decoration:none !important;">Men's Boots</font><br />
<p style="margin-bottom:10px; margin-top:-5px;"><font style="font-size:14px; font-family: 'proxima_nova_rgregular', sans-serif; font-weight:400; color:#000; letter-spacing:2px;">STARTING AT <font style="font-family: 'proxima_nova_rgbold', sans-serif;">$49.99</font></font></p>
</center></div>
<center><font style="font-size:14px; font-family: 'proxima_nova_rgregular', sans-serif; font-weight:400; color:#000; text-decoration:none !important;">Fashion forward style with a gentleman's touch. New styles, plus a dash of detail make these boots anything but ordinary.</font> <a href="/men-shoes/men-boots.cat?source=hpstory3shopnow&icid=20161019_fall">
<div class="HomepageBtn">SHOP NOW →</div>
</a> </center></div>
</div>
<div class="bit-2">
<div class="hideformobile">
<div class="hovereffect"><a href="/men-shoes/men-boots/men-boots-chukka.cat?source=hpstory4desktop&icid=20161019_fall"><img class="img-responsive" src="http://deichmann.scene7.com/is/image/deichmann/story4?wid=588&fmt=jpg" alt="" width="100%" /></a>
<div class="overlay">
<h2 style="font-size:40px; font-family: 'Montserrat', sans-serif; text-decoration:none !important;">Men's Chukka</h2>
<p><a href="/men-shoes/men-boots/men-boots-chukka.cat?filter-cat=%2Fhighlight%2Fmen-shoes%2Fmen-boots%2Fmen-boots-chukka&pp=40&orderby=price-asc?source=hpstory4pricepoint&icid=20161019_fall"><font style="font-size:14px; font-family: 'proxima_nova_rgregular'; font-weight:400; color:#fff; text-decoration:none !important;">STARTING AT $59.99</font></a></p>
</div>
</div>
</div>
<div class="showformobile"><a href="/men-shoes/men-boots/men-boots-chukka.cat?source=hpstory4mobile&icid=20161019_fall"><img src="http://deichmann.scene7.com/is/image/deichmann/story4?wid=588&fmt=jpg" alt="" width="100%" /></a></div>
<div class="bit-1" style="margin-top:12px; padding:10px; margin-bottom:20px;">
<div class="showformobile"><center><font style="font-size:25px; font-family: 'proxima_nova_rgregular', sans-serif; font-weight:400; color:#000; text-decoration:none !important;">Men's Chukka</font><br />
<p style="margin-bottom:10px; margin-top:-5px;"><font style="font-size:14px; font-family: 'proxima_nova_rgregular', sans-serif; font-weight:400; color:#000; letter-spacing:2px;">STARTING AT <font style="font-family: 'proxima_nova_rgbold', sans-serif;">$59.99</font></font></p>
</center></div>
<center><font style="font-size:14px; font-family: 'proxima_nova_rgregular', sans-serif; font-weight:400; color:#000; text-decoration:none !important;">Foundation of style. Perfect to take from workday to weekend. This updated classic is a versatile choice for anywhere you want to go.</font> <a href="/men-shoes/men-boots/men-boots-chukka.cat?source=hpstory4shopnow&icid=20161019_fall">
<div class="HomepageBtn">SHOP NOW →</div>
</a> </center></div>
</div>
</div>
</div>
谢谢！