好气啊,为什么我的display:grid在是否被应用的问题上表现得如此灵异?

阳光号
  • 126

就是这种最简单的代码:我的代码
问题如下:
放在jsrun这类实时网页编辑器上,在360极速浏览器极速模式下见不到grid样式,chrome和edge均成功。
本地静态网页,走ftp去访问,所有浏览器都看不到gird样式,明明代码都是一样的。
到底为什么啊 这种莫名其妙的错误真是好疯啊!!!!

另外本地网页的HTML and CSS(写在style里了)的内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrapper {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 50px 50px;
        grid-gap: 10px;
        }
        div {
        font-size: 30px;
        text-align: center;
        background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class=>A</div>
        <div class=>B</div>
        <div class=>C</div>
        <div class=>D</div>
        <div class=>E</div>
        <div class=>F</div>
    </div>
</body>
</html>

就那个jsrun里的代码,我在360极速浏览器中打开访问,看不到想要的那种2行3列的布局,在chrome和edge里访问,能看到。
chrome可行
360极速浏览器不可行

回复
阅读 3.3k
1 个回答

有可能是兼容性问题?


确实是兼容性问题:

clipboard.png

可能是360使用的Chrome内核版本比较低,不支持grid。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏