当转换为CSS- IE前缀时，SCSS正在破坏我的网格。
我的电网出了问题。对于上下文，我有一个单一的页面应用程序，我试图把它变成一个大屏幕上的网格布局。我的HTML有一个“主网格”的div，它包装了整个页面：
<body>
<div class="main-grid">
...
</div>
<script ... > </script>
</body>在此媒体查询之前，我没有向此元素添加任何属性：
@include media-md {
.main-grid {
display:grid;
grid-template-columns: minmax(1em,1fr) repeat(3, minmax(10rem,30rem)) minmax(1em,fr);
gap: 2em;
}我现在面临的问题有两个:这个scss编译成这样：
.main-grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: minmax(1em, 1fr) (minmax(10rem, 30rem))[3] minmax(1em, fr);
grid-template-columns: minmax(1em, 1fr) repeat(3, minmax(10rem, 30rem)) minmax(1em, fr);
gap: 2em;
}我从研究中了解到IE使用括号内的语法而不是重复，但是VSCode似乎不理解这一点。它在3上抛出一个错误，并导致chrome和FF对我的常规网格选项进行灰色化。
我已经删除了这些之前，并键入了每一列，仍然Chrome和FF不认识这段代码。有人知道怎么回事吗？以防万一我还不够清楚：这是我的devtools在摇摇欲坠的网格和灰色的造型上的实时照片。；
回答 1
Stack Overflow用户
发布于 2021-02-19 04:55:18
如果在browser dev工具中悬停黄色警告标志，则会显示灰色代码的原因。
在我看来，这似乎是两个不同的问题：
(1) -ms-grid-columns是灰色的，因为属性的名称=‘-ms-网格-列’(而不是值)在浏览器中是未知的，这在FF、Chrome中是正确的。(方括号[3]似乎不是原因)。
(2) grid-template-columns: minmax(1em, 1fr) repeat(3, minmax(10rem, 30rem)) minmax(1em, fr);是灰色的，原因是早熟值是错误的。因此，代码在浏览器中根本不起作用。
第二个问题的原因似乎是没有价值的单位fr的使用。尝试将其更改，即改为1fr应该有效。
因为兼容，我不太确定现在使用这个单元是否是个好主意。该单元似乎不受浏览器的支持，canIuse.com将其标记为试验性的.也许你想看看自己：
https://stackoverflow.com/questions/66264527
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号