Guten Tag,CSS Aussehen ändert sich zwischen Seitenaktualisierungen, auf Firefox
ich ein kleines bisschen CSS haben, die eine dekorative „Band“ baut das Datum für Blog-Posts zu halten. es funktioniert gut, manchmal.
zwischen den Aktualisierungen scheint es, dass die Ränder und die Positionierung, die ich in der CSS gesetzt habe, gelegentlich übersprungen werden.
Dies passiert, während die Schaltfläche "Aktualisieren" im selben Browserfenster von Firefox angeklickt wird. scheinbar zufällig, ob Shift-Reload oder Regular verwendet wird.
picture to show working/broken appearance
body {
padding-left: 1em;
padding-right: 1em;
color: #cfcfcf;
background-color: #3b85a9;
margin: auto;
font-family: sans-serif; }
.ribbon1 {display:inline-block;width:100%;}
.ribbon2 {
\t /* */
\t /* original from Ian Yates - http://tutsplus.com/authors/ian-yates */
\t /* */
position: relative;
float: left;
clear: left;
display:block;
height: 60px; /* width of the ribbon */
width:25px; /* length of the ribbon */
margin-right: 150px;
margin-bottom: 10px;
margin-left: -25px;
margin-top: 1px;
background-color: #c94700; }
.ribbon2:after { /* builds the folded edge */
content: "";
display: block;
width: 25px;
height: 0px;
position: absolute;
right: 0;
bottom: -1px;
z-index: 4;
border-bottom: 60px solid #de6625;
border-right: 60px solid transparent;
-webkit-transform: rotate(90deg);
-webkit-transform-origin: right bottom;
-moz-transform: rotate(90deg);
-moz-transform-origin: right bottom;
-o-transform: rotate(90deg);
-o-transform-origin: right bottom;
-ms-transform: rotate(90deg);
-ms-transform-origin: right bottom;
transform: rotate(90deg);
transform-origin: right bottom; }
.ribbon2:before { /* the shadow effect for the folded edge */
content: "";
display: block;
width: 15px;
height: 0px;
position: absolute;
right: 0;
bottom: 0px;
z-index: 3;
border-bottom: 60px solid rgba(0, 0, 0, 0.3);
border-right: 60px solid transparent;
-webkit-transform: rotate(85deg);
-webkit-transform-origin: right bottom;
-moz-transform: rotate(85deg);
-moz-transform-origin: right bottom;
-o-transform: rotate(85deg);
-o-transform-origin: right bottom;
-ms-transform: rotate(85deg);
-ms-transform-origin: right bottom;
transform: rotate(85deg);
transform-origin: right bottom; }
.blog_year {
\t position: absolute;
\t top:4;
\t left:6;
width: 0;
\t
\t word-wrap: break-word;
\t color: white;
\t font-size: 0.85em;
\t line-height: 0.95em; }
.blog_month {
\t position: absolute;
\t top:-20;
\t left:24;
\t width: 60px;
\t z-index: 5;
\t \t
\t text-align: center;
\t color: white;
\t font-size: 0.85em;
\t line-height: 1em; }
.blog_day {
\t position: absolute;
\t top:-5;
\t left:24;
\t width: 60px;
\t z-index: 5;
\t
\t text-align: center;
\t color: white;
\t font-weight: bold;
\t font-size: 2em;
\t line-height: 1em;
text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3); }
.blog_title {
\t width: 700px;
\t margin-left: 80px;
\t margin-top: 5;
\t clear:right;
\t
\t text-align: left;
\t font-size: 2.5em;
\t line-height: 1.5em;
\t font-weight: bold;
\t text-shadow: -2px 2px 0 rgba(0, 0, 0, 0.25); }<body>
<div id="container"
style="width:500px; margin:50px; padding:10px; background:#444;">
\t <div class="ribbon1">
\t \t <div class="ribbon2">
\t \t \t <span class="blog_year"> 2016 </span>
\t \t \t <span class="blog_month"> march </span>
\t \t \t <span class="blog_day"> 15 </span>
\t \t \t <div class="blog_title"> Here's your words. </div>
\t \t </div> <!-- div "ribbon2" -->
\t </div> <!-- div "ribbon1" -->
</div>
</body>i andere Threads mit ähnlichen Problemen hier gesehen haben, und der Vorschlag war, dass es eine chached Version des CSS war. Leider wurde die CSS-Positionierung selbst beim ersten Betrachten einer Testseite scheinbar ignoriert, bis ich auf "Refresh" klickte. Es gibt also kein Cache-Problem.
irgendwelche Vorschläge wäre toll :)
Sie müssen festlegen Einheiten auf Eigenschaften, dh 'px', wie @Marvin in seiner Antwort zeigt – LGSon