我有一个奇怪的问题:我构建的网站使用的是flexbox和LESSHAT。我遇到的奇怪的事情是它没有正确渲染,即似乎省略了flexbox的东西。
但是,如果我点击F12并重新加载页面,它就会被渲染。
有什么问题?
更新 - 这是代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=0, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="c header">
<div class="box">Title</div>
</div>
<div class="box content">
<div class="cv flex page">
<div class="cl item">
<div class="cvl flex item-title">
<div class="cl">Item 1</div>
<div class="cl">
<div class="c button">1</div>
<div class="c button">2</div>
<div class="c button">3</div>
</div>
</div>
<div class="cl item-more">
>>
</div>
</div>
<div class="cl item">
<div class="cl flex item-title">
Item 2
</div>
<div class="cl item-more">
>>
</div>
</div>
<div class="cl item">
<div class="cl flex item-title">
Item 3
</div>
<div class="cl item-more">
>>
</div>
</div>
</div>
</div>
<footer>
</footer>
</body>
</html>
样式CSS是从这个LESS文件编译的:
@import "lesshat";
* {
margin: 0;
padding: 0;
}
.header {
width:100%;
height: 48px;
background: #0000ff;
color: #fff;
}
.content {
width:100%;
background: #00ff00;
}
.page {
width:100%;
background: #00ffff;
}
.item {
background: #ffff00;
margin: 5px;
}
.button {
width: 30px;
border: 1px solid #efefef;
}
.box {
.display(flex);
}
.c {
.display(flex);
.justify-content(center);
.align-items(center);
}
.cl {
.display(flex);
.align-items(center);
}
.cv {
.display(flex);
.flex-direction(column);
}
.flex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}