栅格子高度= 100%在Safari和Chrome中的行为不同
是因为两个浏览器对于百分比高度的计算方式不同。
在Safari中，栅格子的高度= 100%会相对于其父元素的高度进行计算。如果父元素没有设置固定的高度，而是根据内容自适应高度，那么栅格子的高度也会随之自适应。
在Chrome中，栅格子的高度= 100%会相对于其父元素的高度进行计算，但是父元素的高度需要有一个明确的值，不能是自适应的。如果父元素的高度没有设置或者设置为auto，那么栅格子的高度将无法正常显示。
这种行为差异可能会导致在使用栅格布局时出现显示问题。为了解决这个问题，可以考虑使用其他的布局方式，如flexbox或者CSS Grid，这些布局方式对于百分比高度的计算更加灵活。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，满足各种业务需求。产品介绍链接
- 腾讯云云数据库MySQL版：提供高性能、高可用的MySQL数据库服务。产品介绍链接
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。产品介绍链接
- 腾讯云人工智能平台（AI Lab）：提供丰富的人工智能算法和工具，帮助开发者快速构建智能应用。产品介绍链接
- 腾讯云物联网平台（IoT Hub）：提供全面的物联网解决方案，支持海量设备接入和数据管理。产品介绍链接
- 腾讯云移动推送（TPNS）：提供高效、稳定的移动消息推送服务，帮助开发者实现消息推送功能。产品介绍链接
请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估和决策。
相关·内容
尝试做一些理论上非常简单的事情--使用display: grid拥有一个固定的标题行和一个可滚动的内容行--但是在Chrome和Safari中得到了完全不同的结果。</div> </div></html> Chrome
浏览 18提问于2021-07-04得票数 0
回答已采纳
下面这个简单的在Chrome和Safari中产生了不同的行为。d-flex{}
margin-top: auto; width: 100%; margin-top: auto; background-col
浏览 0提问于2017-08-29得票数 0
我正在尝试完成对高度的图像调整(我知道宽度:100%，高度:自动调整宽度大小)。下面的设置适用于Safari (~8.02)，但Chrome和Firefox (最新版本)根本不在乎。有什么想法吗？body, html { height:100%; background: lightgreen; width:100%background:
浏览 2提问于2015-02-05得票数 1
回答已采纳
1回答
自动缩放元素以适应视口/设备方向
、、、、
class="content"> (absolutely positioned stuff) </div></body>.wrapper { background-color: orange;在桌面上(屏幕大于640px x 640px)，我的正方形是顶部和中间，看起来很不错。在手机画像上，我的正方形是顶部和宽度，这也
浏览 0提问于2016-01-19得票数 2
我注意到Safari和Chrome在HTML和CSS方面的行为是一样的。然而，Firefox和Safari之间也有区别(因此，Chrome也是如此)。有时候火狐看起来很棒，但是CSS在Safari和Chrome中表现不佳。错误行为的原因可以归因于“任何事情”(与IE 6和7中
浏览 5提问于2010-09-20得票数 2
回答已采纳
Safari使child块的高度比Chrome大。Chrome中的填充会影响child's height。使用height填充Safari sums。.body { justify-content: flex-start;
flex-di
浏览 4提问于2016-09-16得票数 4
我这里有这段代码，它在Safari中的表现与在Chrome和Firefox中的不同，为什么？ border: 2px solid black; background: red; background: grey;}
height: 100%;
background:
浏览 26提问于2019-12-19得票数 0
回答已采纳
使用display:table和display:table-row CSS属性，我希望我的内容填充一个div的剩余可用高度。如果内容超过可用高度，我希望显示一个滚动条。这是小提琴：为什么
浏览 3提问于2013-04-12得票数 2
回答已采纳
我试图将一个文本框居中，以获得下面的行为(文本大小不同)。如果浏览器的高度足够小，框中应该可以看到滚动条。这在Chrome、IE和FireFox上运行良好，但在Safari ( iOS和MacOS)中就不行了。你有什么办法让它在“苹果”的世界里工作吗？body {}
background: yellow;
display:
浏览 0提问于2015-12-07得票数 0
我试图使表中的列具有预定义的高度，并滚动以使其内容适合。我现在使用的是Chrome和Safari，而不是Firefox (至少在我的MacBook上)。在Firefox中，由于某种原因，表的高度会增长到适合其所有内容。table { height: 50vh;
border: 1px solid
浏览 4提问于2017-06-30得票数 0
回答已采纳
下面的HTML和CSS在Firefox和Chrome中的行为完全不同。solid black;}
background-color: red; height: 100%<div class="content"></div>&l
浏览 4提问于2014-01-06得票数 20
回答已采纳
1回答
这个元素在Chrome中的显示方式与Safari和Firefox不同，我对此感到非常困惑。
我有一个<a>，应该与它的父<div>的高度相匹配。在Safari和Firefox中是这样的，但Chrome没有。我无法手动设置高度，因为相同的代码用于页面上几
浏览 0提问于2014-04-29得票数 2
回答已采纳
2回答
我试图在css中并排显示两个div。
我成功地将div并排放置，这要感谢，当身体有固定的尺寸时，一切都很好。0
浏览 2提问于2014-08-11得票数 0
回答已采纳
2回答
<td> Hello World </td></table>
height:100%; margin:0; height:100%;}
border:1px; backgr
浏览 1提问于2016-04-15得票数 13
我做了一个，它在Chrome中工作得很好。
但是，它在Safari中不起作用。但是，如果我们将.handle-inner中的高度从100%更改为400px，我们将看到拆分器(从上到下到400px)变得可拖动。这意味着height:100%在Safari中不起作用。有谁知道如何修改代码使拆分器在Chrome和Safari<
浏览 3提问于2017-04-13得票数 15
回答已采纳
在软件测试中，如果一个字段的文本框的大小(高度)在不同的浏览器中不同，比如Chrome、Firefox、Safari，那么它是一个bug吗？或者这是浏览器特有的行为？
浏览 1提问于2013-09-02得票数 0
我刚刚在一个有点做作的挠性示例上观察到了一种奇怪的行为: Firefox和Safari显示了一件事情，而Chrome的行为却有所不同(可能区别在于flex算法)。我想触发一个bug，但我不知道应该期望哪一个结果--我理解为什么Firefox和Chrome会那样运行，但我忽略了预期的方式。下面是代码(请注意，flex项(即.col )没有任何显式高度，我们处于默认<
浏览 4提问于2022-11-09得票数 0
1回答
在Safari中使用box-sizing: border-box时，有一个bug影响img元素在使用height: 100%时的高度以及父元素上的填充。请查看此小提琴，并在Chrome/Firefox与Safari上进行测试，以了解不同之处：HTML： <img src="http://placeh
浏览 1提问于2016-07-05得票数 5
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
