html - 为什么我的图标在 firefox 上变得模糊,而在 chrome 和其他浏览器上却很清晰?
问题描述
我的 Firefox 浏览器有问题,在 chrome 中我的图像很清晰,而在 Firefox 上它变得有点模糊,好像图像被扭曲了,而它的大小与 chrome 相同。
我以为是缩放但不是它我做了 ctrl + 0 并没有改变
希望能够找到解决方案,这是我无休止地搜索的一周。
谢谢大家,祝大家有个愉快的一天。
body{
background-image: url('../img/bg.jpg');
background-size: cover;
background-repeat: no-repeat;
font-family:Arial,Helvetica,sans-serif;
margin: 0px;
}
.verso{
width: 370px;
height:950px ;
margin-bottom: 0px;
}
.carteModeRecto{
text-align: -ms-center;
text-align: -moz-center;
-webkit-box-align: center;
width: 370px;
height: 1200px;
text-align: left;
margin:auto;
text-align: -webkit-center;
}
.recto,.verso{
text-align: -webkit-center;
text-align: -moz-center;
text-align: -ms-center;
margin-bottom: 50px;
overflow: hidden;
margin-top: 50px;
background-color: white;
box-shadow: 1px 1px 5px 1px black;
}
#photoprofil{
background-image: url("../img/photo_roger.jpg");
width: 238px;
height: 240px;
border-radius: 150px;
margin-top: 11px;
text-align: left;
margin: auto;
margin-top: 11px;
text-align: left;
margin: auto;
}
#photoprofil2{
border: 3px solid #e5e5e5;
width: 260px;
height: 250px;
border-radius: 150px 150px;
text-align: left;
margin: auto;
padding-top: 10px;
text-align: left;
margin: auto;
padding-top: 10px;
height: 250px;
}
.ligneinfo{
display: flex;
margin-top: 7px;
}
.buton,.buton2{
display: flex;
cursor: pointer;
background-color: #ca3439;
text-align: center;
border-radius: 10px;
color: white;
text-align: left;
margin:0 auto;
outline: none;
border: none;
border: 2px solid #cb353b;
width: 280px;
height: 52px
}
.vcf{
display: flex;
}
.buton{
margin-bottom: 30px;
width: 280px;
height: 50px;
}
.buton2{
background-color: white;
color: #2e4158;
text-align: left;
margin:0 auto;
margin-bottom: 30px;
}
.down{
margin-top: 8px;
}
.partag{
margin-top: 4px;
width: 42px;
height: 43px;
}
.qrcode{
border: 2px solid #cb353b;
border-radius: 10px;
margin-top: 50px;
}
.buttontext2,.buttontext{
color: #2e4158;
margin-top: 15px;
font-size: 1em;
}
.buttontext{
color: white;
}
.imgbutton,.imgbutton2{
margin-left: 20px;
height: 42px;
width: 58px;
margin-right: 20px;
margin-top: 8px;
}
.imgbutton2{
height: 42px;
width: 42px;
margin-top: 4px;
}
.info{
margin-left: 35px;
}
.nom,.statu{
font-size: 1.6em;
color: #2e4158;
margin-top: 40px;
text-align: center
}
.statu{
margin-bottom: 30px;
margin-top: 0px;
}
.texte{
margin-top: 3px;
margin-left: 10px;
color: #2e4158;
font-size: 1.2em;
}
.carte{
text-align: -moz-center;
-webkit-box-align: center;
width: 370px;
text-align: left;
margin:auto;
text-align: -webkit-center;
}
.carte_visite_recto_verso {
-webkit-perspective: 740px;
perspective: 740px;
margin-top: 50px;
}
.carte_visite_recto_verso .carte {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.carte_visite_recto_verso .carte .couche {
margin:0px !important;
-webkit-transition: 1s;
transition: 1s;
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
}
.carte_visite_recto_verso .carte .recto {
position: absolute;
z-index: 1;
}
.carte_visite_recto_verso .carteModeRecto .recto {
-webkit-transform: rotatey(-0deg);
transform: rotatey(-0deg);
}
.carte_visite_recto_verso .carteModeRecto .verso {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.carte_visite_recto_verso .carteModeVerso .recto {
-webkit-transform: rotatey(+180deg);
transform: rotatey(+180deg);
}
.carte_visite_recto_verso .carteModeVerso .verso {
-webkit-transform: rotatey(0deg);
transform: rotatey(0deg);
max-width: 370px;
}
a{
text-decoration: none;
color: #2e4158;
}
.iconinfo{
height: 25px;
width: 25px;
}
.logo{
width: 370px;
padding-top: 30px;
margin-bottom: 20px;
text-align: -webkit-center;
text-align: -moz-center;
text-align: -ms-center;
text-align: center;
}
.reseaux{
text-align: left;
margin:0 auto;
margin-left:35px;
margin-top: 60px;
padding-bottom: 70px;
}
.qrcode{
text-align: left;
margin:0 auto;
width: 280px;
height: 330px;
}
.imgqr{
text-align: left;
margin:0 auto;
margin-left: 40px;
padding-top: 60px;
}
.imglogo{
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="shortcut icon" href="img/logo2.jpg" type="image/jpg"/>
<link rel="icon" href="img/logo2.jpg" type="image/jpg"/>
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css">
</head>
<body>
<div class="carte_visite_recto_verso" >
<div class="carte carteModeRecto" >
<div class="couche recto" > <!--DEBUT DU MODE RECTO-->
<div class="logo">
<img src="img/logo.jpg" alt="" class="imglogo" >
</div>
<div> <!--PHOTO DU CLIENT-->
<div id="photoprofil2">
<div id="photoprofil"></div>
</div>
</div>
<div class="nom" >
</div>
<div class="statu" >
</div>
<div class="buton2">
<a href="download/vcard_roger.vcf" download class="vcf">
<img src="http://chatnoir-beats.xyz/ax/img/ico_copier.jpg" alt="" class="imgbutton">
<div class="buttontext2" > Télécharger le contact</div></a>
</div>
<div class="buton"
onclick="$(document).find('.carte').toggleClass('carteModeVerso');
$(document).find('.carte').toggleClass('carteModeRecto');">
<img src="http://chatnoir-beats.xyz/ax/img/ico_copier.jpg" alt="" class="imgbutton2" >
<div class="buttontext" >Partager</div>
</div>
<div class="info">
<div class="ligneinfo" >
<img src="http://chatnoir-beats.xyz/ax/img/ico_copier.jpg" alt="" class="iconinfo">
<a href=""><div class="texte"></div></a>
</div>
<div class="ligneinfo" >
<img src="http://chatnoir-beats.xyz/ax/img/ico_copier.jpg" alt="" class="iconinfo">
<a href=""><div class="texte"></div></a> <!--ZONE INFORMATION-->
</div>
<div class="ligneinfo" >
<img src="http://chatnoir-beats.xyz/ax/img/ico_copier.jpg" alt="" class="iconinfo">
<a href=""><div class="texte">SMS</div></a>
</div>
<div class="ligneinfo" >
<img src="http://chatnoir-beats.xyz/ax/img/ico_copier.jpg" alt="" class="iconinfo">
<a href=""><div class="texte" ></div></a>
</div>
<div class="ligneinfo" >
<img src="http://chatnoir-beats.xyz/ax/img/ico_copier.jpg" alt="" class="iconinfo">
<a href="http://www.axiumsolutions.fr"><div class="texte">www.axiumsolutions.fr</div></a>
</div>
<div class="ligneinfo" >
<img src="http://chatnoir-beats.xyz/ax/img/ico_copier.jpg" alt="" class="iconinfo" >
<a href="https://goo.gl/maps/HdY48H9MVqRsX3KR9"><div class="texte" style="text-align: left;" > </a>
</div>
</div>
</div>
<div class="reseaux" >
<div class="ligneinfo" >
<img src="img/ico_linkedin.jpg" alt="" class="iconinfo">
<a href=""><div class="texte">Linkedin</div></a>
</div>
<div class="ligneinfo" > <!--ZONE RESEAUX SOCIAUX-->
<img src="img/ico_fb.jpg" alt="" class="iconinfo">
<a href=""><div class="texte">Facebook</div></a>
</div>
</div> <!--FIN MODE RECTO-->
</div>
<div class="couche verso" style="width: 370px;"> <!--DEBUT MODE VERSO-->
<div class="logo" >
<img src="img/logo.jpg" alt="" class="imglogo" >
</div>
<div class="buton2" >
<a href="vcard_roger.vcf" download class="vcf">
<img src="http://chatnoir-beats.xyz/ax/img/ico_copier.jpg" alt="" class="imgbutton" >
<div class="buttontext2" >Télécharger le contact</div></a>
</div>
<div class="buton2">
<img src="http://chatnoir-beats.xyz/ax/img/ico_copier.jpg" alt="" class="imgbutton">
<div class="buttontext2" >Partager Par Mail</div> <!--ZONE DE PARTAGE-->
</div>
<div class="buton2" >
<img src="http://chatnoir-beats.xyz/ax/img/ico_copier.jpg" alt="" class="imgbutton" >
<div class="buttontext2">Partager par Whatsapp</div>
</div>
<div class="buton2" >
<img src="http://chatnoir-beats.xyz/ax/img/ico_copier.jpg" alt="" class="imgbutton">
<div class="buttontext2" >Copier le lien</div>
</div>
<div class="buton"
onclick="$(document).find('.carte').toggleClass('carteModeVerso');
$(document).find('.carte').toggleClass('carteModeRecto');">
<img src="img/ico_retour.jpg" alt="" class="imgbutton2">
<div class="buttontext" >Retour</div>
</div>
<div class="qrcode" >
<img src="img/qr_code.jpg" alt="" class="imgqr" >
</div> <!--FIN DU MODE VERSO-->
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</html>