Aligne les formes avec css: avant,: après

J'essaye de faire des formes dans: before /: after. Cela fonctionne bien en chrome mais dans Firefox. il y a un petit désalignement. et lors de l'impression cela provoque un petit espace blanc entre l'élément et le sélecteur: after.Aligne les formes avec css: avant,: après

Voici comment il ressemble aperçu avant impression avec Firefox

HTML

<div class="container"> 
    <div class="topbar"> 
     <div class="text">Text</div> 
    </div> 
</div>

Mon CSS

/* Styles go here */ 

.container .topbar { 
    height: 15px; 
    background-color: #91C34F !important; 
    width: 100%; 
    border-top-left-radius: 4px; 
    border-top-right-radius: 4px; 
} 

.container .topbar .text { 
    position: relative; 
    color: #fff !important; 
    float: right; 
    top: 3px; 
    background-color: #91C34F !important; 
    font-size: 16px; 
    padding: 8px 80px; 
} 

.container .topbar .text:after { 
    height: 0; 
    content: ""; 
    display: block; 
    position: absolute; 
    top: -0.5px; 
    left: -37px; 
    border-right: 38px solid #91C34F !important; 
    border-bottom: 34px solid transparent; 
}

Ceci est un Plunk pour le code ci-dessus https://plnkr.co/edit/oll1ooap2mKC1EQo0n84?p=preview.

Comment aligner correctement tous les navigateurs?

Source

2017-08-06 Sibi Raj

Essayez d'utiliser une réinitialisation CSS --- https://necolas.github.io/normalize.css/ –

va essayer ... –

utiliser la valeur égale pour left, border-right et border-bottom, aussi il n'y a rien comme .5px. utilisez line-height pour aligner le texte verticalement.

updated plunk

/* Styles go here */ 
 

 
.container .topbar { 
 
    height: 15px; 
 
    background-color: #91C34F !important; 
 
    width: 100%; 
 
    border-top-left-radius: 4px; 
 
    border-top-right-radius: 4px; 
 
} 
 

 
.container .topbar .text { 
 
    position: relative; 
 
    color: #fff !important; 
 
    float: right; 
 
    top: 3px; 
 
    background-color: #91C34F !important; 
 
    font-size: 16px; 
 
    padding: 0px 80px; 
 
    height:34px; 
 
    line-height:28px; 
 
} 
 

 
.container .topbar .text:after { 
 
    height: 0; 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: -34px; 
 
    border-right: 34px solid #91C34F !important; 
 
    border-bottom: 34px solid transparent; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="topbar"> 
 
     <div class="text">Text</div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Source

2017-08-06 07:14:35 aje

merci. mais il y a toujours un espace blanc lors de l'impression avec Firefox. peut être un rite de bug de navigateur. –

@SibiRaj vous pouvez essayer de le patcher avec une ombre sur '.text {box-shadow :: -2px 0 1px -1px # 91C34F' ou essayer une autre méthode: https://codepen.io/gc-nomade/pen/ LjriC (pseudo est en haut et cache des parties du conteneur au lieu de le rendre plus grand) –

va essayer ça aussi ... –

Prenez http://dowebsitesneedtolookexactlythesameineverybrowser.com/. Regarder bien est un objectif raisonnable, regarder la même chose ne l'est pas.
Comprenez les normes (nous ne savons jamais si la différence est due à un bogue ou si vous avez fourni des instructions qui n'ont de sens que pour une taille de fenêtre particulière)
Utilisez-les (n'oubliez pas de valider le code HTML et CSS et JS Lint la)
Assurez-vous livrez le mode standard
Renseignez-vous sur les bugs dans les navigateurs

Bien que votre code est bon, il fonctionne parfaitement sur le chrome. Ne pas vérifier ici,

https://jsfiddle.net/djmayank/q20e6u9m/

HTML:

<div class="container"> 
    <div class="topbar"> 
     <div class="text">Text</div> 
    </div> 
</div>

CSS:

.container .topbar { 
    height: 15px; 
    background-color: #91C34F !important; 
    width: 100%; 
    border-top-left-radius: 4px; 
    border-top-right-radius: 4px; 
} 

.container .topbar .text { 
    position: relative; 
    color: #fff !important; 
    float: right; 
    top: 3px; 
    background-color: #91C34F !important; 
    font-size: 16px; 
    padding: 8px 80px; 
} 

.container .topbar .text:after { 
    height: 0; 
    content: ""; 
    display: block; 
    position: absolute; 
    top: -0.5px; 
    left: -37px; 
    border-right: 38px solid #91C34F !important; 
    border-bottom: 34px solid transparent; 
}

espère que cela a aidé.

Source

2017-08-06 05:54:14 djmayank

Aligne les formes avec css: avant,: après

Répondre

Questions connexes