Question

下午好，

我有一小部分CSS可以构建一个装饰性的“功能区”来保存博客文章的日期。它工作得很好，有时候。

刷新之间，似乎偶尔会跳过我在CSS中设置的边距和定位。

在点击Firefox的同一浏览器窗口上的“刷新”按钮时会发生这种情况。看似随意，是否使用了shift-reload或regular。

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 {
	/*                                                                 */
	/* original from Ian Yates - http://tutsplus.com/authors/ian-yates */
	/*                                                                 */

    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 {
	position: absolute;
	top:4;
	left:6;
    width: 0; 
	
	word-wrap: break-word;
	color: white;
	font-size: 0.85em;
	line-height: 0.95em; }

.blog_month {
	position: absolute;
	top:-20;
	left:24;
	width: 60px;
	z-index: 5;
		
	text-align: center;
	color: white;
	font-size: 0.85em;
	line-height: 1em; }

.blog_day {
	position: absolute;
	top:-5;
	left:24;
	width: 60px;
	z-index: 5;
	
	text-align: center;
	color: white;
	font-weight: bold;
	font-size: 2em;
	line-height: 1em;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3); }

.blog_title {
	width: 700px;
	margin-left: 80px;
	margin-top: 5;
	clear:right;
	
	text-align: left;
	font-size: 2.5em;
	line-height: 1.5em;
	font-weight: bold;
	text-shadow: -2px 2px 0 rgba(0, 0, 0, 0.25); }

<body>

<div id="container" 
 style="width:500px; margin:50px; padding:10px; background:#444;">

	<div class="ribbon1">
		<div class="ribbon2"> 
			<span class="blog_year"> 2016 </span> 
			<span class="blog_month"> march </span> 
			<span class="blog_day"> 15 </span> 
			<div class="blog_title"> Here's your words. </div> 
		</div> <!-- div "ribbon2" -->
	</div> <!-- div "ribbon1" -->

</div>

</body>

我在这里看到过类似问题的其他线程，并且建议是有一个CSS的chached版本。不幸的是，即使在第一次观看测试页面时，CSS定位显然也被忽略了，直到我点击“刷新”。所以这不是一个缓存问题。

任何建议都会很棒：）

Answer 1

不知道为什么它在刷新后适合你。对我而言，只有在修复css并添加缺少的px单位时才有效：

.blog_year {
    top:4px;
    left:6px;
}
.blog_month {
    top:-20px;
    left:24px;
}
.blog_day {
    top:-5px;
    left:24px;
}
.blog_title {
    margin-top: 5px;
}

在Firefox上，页面刷新之间的CSS外观会发生变化

1 个答案: