gpt4 book ai didi

css - Gumby 列在 Chrome 中显示为 block 元素

转载 作者:行者123 更新时间:2023-11-28 12:40:48 24 4
gpt4 key购买 nike

这是我使用 Gumby 构建的第一个网站,就一般的网页设计而言,我在某种程度上属于初学者。

为什么我的网站在 Firefox 和 Safari 中显示完美,但在 Chrome 中却一团糟,我已经摸不着头脑几个小时了。看起来每组列都显示为 block 元素,而导航栏根本没有显示......

我通过 W3C html 验证器运行它,它告诉我 hgroup 标签已被废除,但这不应该把页面弄得那么乱,不是吗?最重要的是,不仅在 Chrome 中?


可能的原因:

  1. 在我开发这方面的东西时,为了使网站无响应,我删除了断点并弄乱了 _var.scss 中的一些设置/可能是最可能的原因,但我没有知道是什么以这种方式影响它。

  2. 我将该行用作标题和部分的包装器。这会不会以某种方式扰乱列的显示方式?

  3. 在 header 部分,我使用@include columns(6) 将列包含在 html 中,而无需创建另一个 div。 Chrome 不喜欢这样吗?

这是我网站的链接:http://work-in-germany.eu/

如您所见,它在 Firefox 和 Safari 中看起来不错,但在 Chrome 中却不行。


非常感谢您的帮助!

汤姆

最佳答案

哇,Chrome 真是一团糟!但并非难以管理。

首先,您应该包装整个页面。这使内容居中。例如:

HTML:

<body>
<div id="page_wrap">
-- Your content (rows etc.)
</div>
</body>

CSS:

.page_wrap {
margin: auto;
width: 980px;
}

至于行数。将以下内容添加到 css 类:

CSS:

.index_section .row {
overflow: hidden;
padding: 15px 0;
}

.index_section .img_box img {
float: left;
margin: 0 15px;
max-width: 280px;
}

抱歉,由于时间不够,这就是我现在所能做的。祝你好运!

关于css - Gumby 列在 Chrome 中显示为 block 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17671208/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com