小熊猫写前端 2024-03-05 09:41 采纳率: 60%
浏览 7
已结题

关于#css3#的问题:就是我使用谷歌浏览器能够正常的解析代码但是使用edge浏览器却多了几个div且每个div都是一样的(相关搜索:span标签)

同志们我现在学习grid布局遇到了一个麻烦这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid网格</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width:500px;
            height: 500px;
            border:10px solid gray
        }
    </style>
</head>
<body>
    <span>我是一个span标签</span>
    <div style="display: inline-grid; width: 500px; height: 500px;">
    </div>
    <span>我是一个span标签</span>
</body>
</html>

就是我使用谷歌浏览器能够正常的解析代码但是使用edge浏览器却多了几个div且每个div都是一样的。这是为什么呢?

  • 写回答

4条回答 默认 最新

  • 关注

    小熊猫写前端 上午好☀️☀️☀️️
    本答案参考ChatGPT-3.5

    这个问题可能是因为不同的浏览器对于CSS Grid布局的实现略有差异。下面是一些解决方案:

    1. 检查浏览器版本:首先,确保你使用的是最新版本的Edge浏览器。有些旧版本的浏览器可能对CSS Grid的支持不完善,无法正确解析代码。

    2. 使用CSS Grid的兼容性前缀:在使用CSS Grid时,你可以尝试添加浏览器厂商前缀以增强兼容性。在CSS属性前加上适当的前缀(如-ms-、-moz-、-webkit-等),以确保不同浏览器都能正确解析和渲染网格布局。

    3. 调整Grid项的尺寸:有时候不同浏览器对于网格项的自动布局会有不同的处理方式。你可以尝试调整网格项的尺寸,例如设置固定的宽度和高度,或者使用网格行列的单位(如fr、auto等)来定义大小。

    4. 使用其他布局方式:如果以上方法仍然无法解决问题,你可以考虑使用其他的布局方式来达到相同的效果。例如,使用Flexbox布局或传统的块级布局(如float和positioning)来创建你所需的布局。

    以上是一些可能的解决方案,根据你的具体情况选择适合的方法进行尝试。如果问题仍然存在,请提供更多细节和代码,以便更精确地定位问题。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 3月13日
  • 已采纳回答 3月5日
  • 创建了问题 3月5日

悬赏问题

  • ¥200 csgo2的viewmatrix值是否还有别的获取方式
  • ¥15 Stable Diffusion,用Ebsynth utility在视频选帧图重绘,第一步报错,蒙版和帧图没法生成,怎么处理啊
  • ¥15 请把下列每一行代码完整地读懂并注释出来
  • ¥15 pycharm运行main文件,显示没有conda环境
  • ¥15 易优eyoucms关于二级栏目调用的问题
  • ¥15 寻找公式识别开发,自动识别整页文档、图像公式的软件
  • ¥15 为什么eclipse不能再下载了?
  • ¥15 编辑cmake lists 明明写了project项目名,但是还是报错怎么回事
  • ¥15 关于#计算机视觉#的问题:求一份高质量桥梁多病害数据集
  • ¥15 特定网页无法访问,已排除网页问题