0
我有一个计算的定义:媒体查询不重写WebKit的钙
#navigation-panel {
a, i.navEmptyBlock {
// ...
width: -webkit-calc(12% - 2px);
width: -moz-calc(12% - 2px);
width: -o-calc(12% - 2px);
width: -ms-calc(12% - 2px);
width: calc(12% - 2px);
@media (max-width: 640px) {
width: -webkit-calc(20% - 2px);
width: -moz-calc(20% - 2px);
width: -o-calc(20% - 2px);
width: -ms-calc(20% - 2px);
width: calc(20% - 2px);
}
// ...
}
}
当640像素,大小应适用新的计算,但事实并非如此。
我检查与谷歌开发者工具和新的计算DOES适用,但它没有覆盖旧的任何奇怪的原因。
开发者工具显示划掉旧的,但它仍然应用它!。如果我禁用交叉的工作。
尝试在Firefox中,它的工作原理。
这似乎铬不覆盖-webkit-calc
调用?
生成的代码从COMPASS:
#navigation-panel a, #navigation-panel i.navEmptyBlock {
float: left;
margin: 0 auto;
text-decoration: none;
color: #080808;
text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
position: relative;
width: -webkit-calc(12% - 2px);
width: -moz-calc(12% - 2px);
width: -o-calc(12% - 2px);
width: -ms-calc(12% - 2px);
width: calc(12% - 2px);
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
display: inline-block;
border: 1px solid #3284b6;
text-align: center;
padding-top: 6px;
height: 25px;
font-family: Tahoma;
font-size: 11px;
/* Windows */
background: rgba(255, 255, 255, 0);
-webkit-transition: background 80ms;
font-weight: 800;
box-shadow: inset 0px 0px 6px rgba(255, 255, 255, 0.9); }
@media (max-width: 640px) {
#navigation-panel a, #navigation-panel i.navEmptyBlock {
width: -webkit-calc(20% - 2px);
width: -moz-calc(20% - 2px);
width: -o-calc(20% - 2px);
width: -ms-calc(20% - 2px);
width: calc(20% - 2px); } }
编辑:平原宽度不覆盖第一钙,但第二CALD覆盖新平宽度,但并不适用!
这是使用LESS还是Sass? – cimmanon
@cimmanon它是一个指南针应用程序。 – jviotti
你可以发布相关的生成的CSS而不是makros? – feeela