1
öffnen
Meine codepen sieht aus, wie ich meine Ansicht aussehen möchte, aber wenn ich den Code in meiner Umgebung ausführen, tut es nicht schau richtig. Ich kann nicht herausfinden, was anders ist, da ich den gleichen genauen Code kopiert und eingefügt habe. Ich führe es in Chrome und auch mit dem Codepen in Chrome. Könnte es sich dabei um eine Art Browser-Kompatibilitätsproblem handeln, wie wenn CodePen zum Rendern der Ansichten eine andere Browser-Engine verwendet. Ich legte die Ansichten innerhalb einer Angular Vorlage für eine Direktive im Einsatz. Ich kompiliere meine Seite mit Grunt.Mein html css funktioniert gut in Codepen aber sieht nicht richtig aus, wenn ich in meiner Umgebung auf Chrome
Meine Umwelt
Codepen
HTML
<section id="ribbon">
<ul class="tabs">
<li class="v-zigzag active">Mode 1</li>
<li class="v-zigzag">Mode 2</li>
<li class="v-zigzag">Mode 3</li>
<li>Mode 4</li>
</ul>
</section>
CSS
@import url(https://fonts.googleapis.com/css?family=Roboto:400);
body {
margin: 0;
padding: 0;
}
#ribbon {
background: whitesmoke;
}
#ribbon ul {
margin: 0;
padding: 0;
height: 100px;
display: flex;
list-style-type: none;
}
#ribbon ul li {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: center;
cursor: pointer;
color: #757575;
font-family: 'Roboto', sans-serif;
font-size: 24px;
}
#ribbon .v-zigzag {
position: relative;
background: linear-gradient(45deg, #757575 5px, transparent 0) 0 5px, linear-gradient(135deg, #757575 5px, whitesmoke 0) 0 5px;
background-position: right top;
background-repeat: repeat-y;
background-size: 10px 10px;
}
#ribbon .v-zigzag:before {
content: "";
position: absolute;
background: linear-gradient(45deg, whitesmoke 5px, transparent 0) 0 5px, linear-gradient(135deg, whitesmoke 5px, transparent 0) 0 5px;
background-color: transparent;
background-position: right top;
background-repeat: repeat-y;
background-size: 10px 10px;
width: 10px;
right: 3px;
top: 0;
bottom: 0;
}
#ribbon .v-zigzag.active:before {
content: "";
position: absolute;
background: linear-gradient(45deg, #03A9F4 5px, transparent 0) 0 5px, linear-gradient(135deg, #03A9F4 5px, transparent 0) 0 5px;
background-color: transparent;
background-position: right top;
background-repeat: repeat-y;
background-size: 10px 10px;
width: 10px;
right: 3px;
top: 0;
bottom: 0;
}
#ribbon .tabs .active {
background-color: #03A9F4;
color: white;
}
Haben Sie versucht, die Erweiterungen zu deaktivieren oder im InCognito-Modus zu laufen? Was ist mit anderen Browsern? – Spidey
Ich habe gerade versucht, Chrom Inkognito, Safari und Firefox, das gleiche Problem. Ich habe das Gefühl, dass es ein Override sein könnte, da die meisten Stile korrekt angewendet werden. Ich habe versucht, meinem Codepen Bootstrap hinzuzufügen, aber das hat nichts kaputt gemacht. –
möglich duplizieren: http://stackoverflow.com/q/26922098 –