我这里有一个小困境。当我在 chrome 中刷新页面时，我可以看到通过图像和网页底部按钮上的过渡持续时间进行的过渡操作。奇怪的是，它不会发生在Firefox.在Mozilla上，当您刷新页面时，它可以在没有过渡的情况下工作。仅当您将鼠标悬停时，它才能正常工作。如何为铬修复它???
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Ending of resets */
.container
{
width:1200px;
height:1630px;
background-color:grey;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}
.topmenu
{
width:1200px;
height:30px;
background-color:skyblue;
margin-left:auto;
margin-right:auto;
}
.topmenu ul
{
margin-left:100px;
}
.topmenu li
{
float:left;
margin-left:30px;
margin-top:4px;
font-size:17px;
color:black;
}
.topmenu a
{
color:black;
}
.logo2
{
position:relative;
font-size:35px;
margin-top:20px;
margin-left:150px;
}
.logo2 a
{
text-decoration:none;
color:black;
}
.content
{
width:950px;
height:350px;
margin:30px auto;
}
.square1
{
float:left;
width:300px;
height:300px;
border-bottom:40px solid darkgrey;
}
.square1 img
{
-webkit-filter:blur(5px);
filter:blur(5px);
transition-duration:1s;
cursor:pointer;
}
.square1 img:hover
{
-webkit-filter:blur(0);
filter:blur(0);
}
.square2
{
float:left;
width:300px;
height:300px;
margin-left:25px;
border-bottom:40px solid darkgrey;
}
.square2 img
{
-webkit-filter:brightness(200%);
filter:brightness(200%);
transition-duration:1s;
cursor:pointer;
}
.square2 img:hover
{
-webkit-filter:brightness(100%);
filter:brightness(100%);
}
.square3
{
float:left;
width:300px;
height:300px;
margin-left:25px;
border-bottom:40px solid darkgrey;
}
.square3 img
{
-webkit-filter:contrast(200%);
filter:contrast(200%);
transition-duration:1s;
cursor:pointer;
}
.square3 img:hover
{
-webkit-filter:contrast(100%);
filter:contrast(100%);
}
.square4
{
float:left;
width:300px;
height:300px;
border-bottom:40px solid darkgrey;
}
.square4 img
{
-webkit-filter:drop-shadow(8px 8px 10px orange);
filter:drop-shadow(8px 8px 10px orange);
transition-duration:1s;
cursor:pointer;
}
.square4 img:hover
{
-webkit-filter:drop-shadow(12px 12px 14px green);
filter:drop-shadow(12px 12px 14px green);
}
.square5
{
float:left;
width:300px;
height:300px;
margin-left:25px;
border-bottom:40px solid darkgrey;
}
.square5 img
{
-webkit-filter:grayscale(100%);
filter:grayscale(100%);
transition-duration:1s;
cursor:pointer;
}
.square5 img:hover
{
-webkit-filter:grayscale(0);
filter:grayscale(0);
}
.square6
{
float:left;
width:300px;
height:300px;
margin-left:25px;
border-bottom:40px solid darkgrey;
}
.square6 img
{
-webkit-filter:hue-rotate(90deg);
filter:hue-rotate(90deg);
transition-duration:1s;
cursor:pointer;
}
.square6 img:hover
{
-webkit-filter:hue-rotate(360deg);
filter:hue-rotate(360deg);
}
.square7
{
float:left;
width:300px;
height:300px;
border-bottom:40px solid darkgrey;
}
.square7 img
{
-webkit-filter:invert(100%);
filter:invert(100%);
transition-duration:1s;
cursor:pointer;
}
.square7 img:hover
{
-webkit-filter:invert(0);
filter:invert(0);
}
.square8
{
float:left;
width:300px;
height:300px;
margin-left:25px;
border-bottom:40px solid darkgrey;
}
.square8 img
{
-webkit-filter:saturate(8);
filter:saturate(8);
transition-duration:1s;
cursor:pointer;
}
.square8 img:hover
{
-webkit-filter:saturate(2);
filter:saturate(2);
}
.square9
{
float:left;
width:300px;
height:300px;
margin-left:25px;
border-bottom:40px solid darkgrey;
}
.square9 img
{
-webkit-filter:sepia(100%);
filter:sepia(100%);
transition-duration:1s;
cursor:pointer;
}
.square9 img:hover
{
-webkit-filter:sepia(0);
filter:sepia(0);
}
.square10
{
float:left;
width:300px;
height:300px;
border-bottom:40px solid darkgrey;
}
.square10 img
{
-webkit-filter:opacity(30%);
filter:opacity(30%);
transition-duration:1s;
cursor:pointer;
}
.square10 img:hover
{
-webkit-filter:opacity(100%);
filter:opacity(100%);
}
.square11
{
float:left;
width:300px;
height:300px;
margin-left:25px;
border-bottom:40px solid darkgrey;
}
.square11 img
{
-webkit-filter:contrast(150%) brightness(200%);
filter:contrast(150%) brightness(200%);
transition-duration:1s;
cursor:pointer;
}
.square11 img:hover
{
-webkit-filter:contrast(100%) brightness(100%);
filter:contrast(100%) brightness(100%);
}
.square12
{
float:left;
width:300px;
height:300px;
margin-left:25px;
border-bottom:40px solid darkgrey;
}
.loadmore
{
position:relative;
margin:50px auto;
width:100px;
height:100px;
border-radius:30px;
background-color:orange;
text-align:center;
transition-duration:1s;
}
.loadmore:hover
{
background-color:skyblue;
}
.loadmore a
{
color:black;
text-decoration:none;
}
.loadmore h1
{
padding-top:37px;
font-size:20px;
font-weight:bold;
}
.footermenu
{
width:600px;
height:30px;
background-color:yellow;
margin:10px auto;
}
.footermenu li
{
width:150px;
height:30px;
float:left;
text-align:center;
margin-top:5px;
font-size:18px;
}
.footermenu a
{
color:black;
text-decoration:none;
}
form
{
float:right;
margin-right:140px;
margin-top:-25px;
z-index:999;
}
label
{
z-index:999;
}
input
{
width:150px;
z-index:999;
}<!doctype html>
<html>
<head>
<title>Just Web</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; scale=1" />
<link href="tristastyle.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="images/favicon.ico">
</head>
<body>
<div class="container">
<div class="header">
<div class="topmenu">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Project</a></li>
<li><a href="#">menu</a></li>
</ul>
</nav>
</div>
<div class="logo2"><a href="index.html">protosite</a></div>
<form>
<label for="fname">search</label>
<input type="text" id="fname" name="fname">
</form>
</div>
<div class="content">
<div class="square1"><img src="images/girls/image1.png"></div>
<div class="square2"><img src="images/girls/image2.png"></div>
<div class="square3"><img src="images/girls/image3.png"></div>
</div>
<div class="content">
<div class="square4"><img src="images/girls/image4.png"></div>
<div class="square5"><img src="images/girls/image5.png"></div>
<div class="square6"><img src="images/girls/image6.png"></div>
</div>
<div class="content">
<div class="square7"><img src="images/girls/image7.png"></div>
<div class="square8"><img src="images/girls/image8.png"></div>
<div class="square9"><img src="images/girls/image9.png"></div>
</div>
<div class="content">
<div class="square10"><img src="images/girls/image1.png"></div>
<div class="square11"><img src="images/girls/image2.png"></div>
<div class="square12"><img src="images/girls/image3.png"></div>
</div>
<div class="loadmore">
<a href="#"><h1>Load more</h1></a>
</div>
<div class="footermenu">
<nav class="navig">
<ul>
<li><a href="#">Policy</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
</body>
</html>尝试将其添加到您的类中：
-MOZ 过滤器：不透明度（随心所欲）
如果这让 Firefox 像 chrome 一样过渡，而你不希望这样，那么删除 -webkit-filter：