- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这个问题在这里已经有了答案:
Why is percentage height not working on my div? [duplicate]
(2 个回答)
Chrome / Safari not filling 100% height of flex parent
(5 个回答)
4年前关闭。
我正在构建一种后网格 slider ,它将在 CSS 网格中显示 4 个框。我建立了一切,它按预期工作,但它在 Firefox 中不起作用。
Firefox 和 Safari 都存在显示网格高度的问题。它们导致 0 或 1px。为了解决这个问题,我使用了 display:flex 和 flex-flow 设置为换行。这在 Safari 中有效,但在 Firefox 中无效。当我从容器中删除 flex 时,它在 Firefox 中有效,但在 Safari 中无效。
Edge 和 Chrome 两种方式都很好。我迷失在寻找解决方案并尝试解决它,但结果仍然相同。
我正在使用 padding-top 和 position absolute 来“按比例”响应网格及其元素。
谢谢您的回复。
https://codepen.io/Mariopa/pen/ELjqYr
HTML
<div class="post-grid-slider">
<div class="post-grid-wrapper">
<div class="post-grid">
<div class="post-grid__item">
<a href="#" target="_self" rel="nofollow" class="post-grid__link">
<div class="post-grid__thumbnail" style="background-image:url(http://patlevic.sk/demopic/Inoutic-1024x683)"></div>
<div class="subcategory"><span >Category</span></div>
<h2 class="post-grid__title">Title</h2>
</a>
</div>
<div class="post-grid__item">
<a href="#" target="_self" rel="nofollow" class="post-grid__link">
<div class="post-grid__thumbnail" style="background-image:url(http://patlevic.sk/demopic/kinds-of-food-3320746_1920-1024x683)"></div>
<div class="subcategory"><span>Category</span></div>
<h2 class="post-grid__title">Title</h2>
</a>
</div>
<div class="post-grid__item">
<a href="#" target="_self" rel="nofollow" class="post-grid__link">
<div class="post-grid__thumbnail" style="background-image:url(http://patlevic.sk/demopic/leaf-397870_1920-1024x768)"></div>
<div class="subcategory"><span>Category</span></div>
<h2 class="post-grid__title">Title</h2>
</a>
</div>
<div class="post-grid__item">
<a href="#" target="_self" rel="nofollow" class="post-grid__link">
<div class="post-grid__thumbnail" style="background-image:url(http://patlevic.sk/demopic/grape-hyacinth-1024x679)"></div>
<div class="subcategory"><span>Category</span></div>
<h2 class="post-grid__title">Title</h2>
</a>
</div>
</div>
</div>
</div>
.post-grid-slider {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-ms-flex-flow:row nowrap;
flex-flow:row nowrap;
height:100%;
padding: 0 15px;
}
.post-grid-wrapper {
-webkit-box-flex: 1;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
position: relative;
width:100%;
padding-top: 25%;
}
.post-grid {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: -ms-grid;
display: grid;
-ms-grid-columns: auto;
grid-template-columns: auto;
-ms-grid-rows: 50% 50%;
grid-template-rows: 50% 50%;
grid-column-gap: 0.0625rem;
grid-row-gap: 0.0625rem;
width: 100%;
height: 100%;
}
.post-grid__item {
position: relative;
overflow: hidden;
}
.post-grid__item:nth-child(1) {
-ms-grid-column: 1;
-ms-grid-column-span: 6;
grid-column: 1/7;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
grid-row: 1/3;
}
.post-grid__item:nth-child(2) {
-ms-grid-column: 7;
-ms-grid-column-span: 4;
grid-column: 7/11;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
grid-row: 1/2;
}
.post-grid__item:nth-child(3) {
-ms-grid-column: 7;
-ms-grid-column-span: 2;
grid-column: 7/9;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
grid-row: 2/3;
}
.post-grid__item:nth-child(4) {
-ms-grid-column: 9;
-ms-grid-column-span: 2;
grid-column: 9/11;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
grid-row: 2/3;
}
.post-grid__link {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.post-grid__link:hover > .post-grid__thumbnail {
webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.post-grid__thumbnail {
width: 100%;
height: 100%;
margin: 0px;
position: absolute;
background-repeat: no-repeat;
background-position: left center;
background-size: cover;
-webkit-transition: All .7s ease;
-moz-transition: All .7s ease;
-o-transition: All .7s ease;
transition: All .5s ease;
-webkit-transform: scale(1.20);
-moz-transform: scale(1.20);
-o-transform: scale(1.20);
-ms-transform: scale(1.20);
transform: scale(1.20);
}
.post-grid__thumbnail::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50%;
-webkit-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.8)));
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.8));
background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.8));
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
}
.subcategory {
position: absolute;
top: 15px;
left: 15px;
display: inline-block;
padding: 0 0.5rem;
background: #A20315;
color: #fff;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
z-index: 1;
line-height: 24px;
}
.post-grid__title {
position: absolute;
left: 15px;
bottom: 15px;
text-shadow: 0 1px 5px rgba(0,0,0,0.4);
margin: 0;
font-weight: 500;
color: #fff;
}
最佳答案
我突然发现了一个解决方案。我从容器和包装器中删除了 flexbox。我添加了 height:0;包装。它似乎在所有浏览器中都按预期工作。
我已经更新了 codepen 演示。
.post-grid-slider {
height:100%;
padding: 0 15px;
}
.post-grid-wrapper {
position: relative;
width:100%;
height: 0;
padding-top: 25%;
}
.post-grid {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: -ms-grid;
display: grid;
-ms-grid-columns: auto;
grid-template-columns: auto;
-ms-grid-rows: 50% 50%;
grid-template-rows: 50% 50%;
grid-column-gap: 0.0625rem;
grid-row-gap: 0.0625rem;
width: 100%;
height: 100%;
}
.post-grid__item {
position: relative;
overflow: hidden;
}
.post-grid__item:nth-child(1) {
-ms-grid-column: 1;
-ms-grid-column-span: 6;
grid-column: 1/7;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
grid-row: 1/3;
}
.post-grid__item:nth-child(2) {
-ms-grid-column: 7;
-ms-grid-column-span: 4;
grid-column: 7/11;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
grid-row: 1/2;
}
.post-grid__item:nth-child(3) {
-ms-grid-column: 7;
-ms-grid-column-span: 2;
grid-column: 7/9;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
grid-row: 2/3;
}
.post-grid__item:nth-child(4) {
-ms-grid-column: 9;
-ms-grid-column-span: 2;
grid-column: 9/11;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
grid-row: 2/3;
}
.post-grid__link {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.post-grid__link:hover > .post-grid__thumbnail {
webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.post-grid__thumbnail {
width: 100%;
height: 100%;
margin: 0px;
position: absolute;
background-repeat: no-repeat;
background-position: left center;
background-size: cover;
-webkit-transition: All .7s ease;
-moz-transition: All .7s ease;
-o-transition: All .7s ease;
transition: All .5s ease;
-webkit-transform: scale(1.20);
-moz-transform: scale(1.20);
-o-transform: scale(1.20);
-ms-transform: scale(1.20);
transform: scale(1.20);
}
.post-grid__thumbnail::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50%;
-webkit-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.8)));
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.8));
background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.8));
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
}
.subcategory {
position: absolute;
top: 15px;
left: 15px;
display: inline-block;
padding: 0 0.5rem;
background: #A20315;
color: #fff;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
z-index: 1;
line-height: 24px;
}
.post-grid__title {
position: absolute;
left: 15px;
bottom: 15px;
text-shadow: 0 1px 5px rgba(0,0,0,0.4);
margin: 0;
font-family: 'Roboto';
font-weight: 500;
color: #fff;
}
关于CSS Grid 在 Firefox 和 Safari 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49954587/
Safari 和 Mobile Safari 在组合边框半径、填充和边框时似乎有问题。在 Chrome 和 Firefox 中运行良好。 CSS: img { width: 200px;
每次我在打开 Safari 开发工具的情况下加载页面(无论是哪个选项卡)时,都会触发一些断点,并且我会被重定向到“源代码”选项卡,并显示消息“调试器已暂停”。问题是我没有设置任何断点,至少是有意的,这
我有一个复合 div(它有 translate3d)和一个 opacity过渡: #bad { background-color: red; -webkit-transition: o
我想为我正在制作的工具添加一个类似的功能。我对它在代码方面的工作方式很感兴趣。我希望能够获得一个 html 页面并排除除文章之外的所有内容。 最佳答案 Readability 项目对 chrome 和
我们有一个重定向到另一台服务器的 API 端点。它是通过 XHR 调用的,似乎在大多数浏览器中都能正常工作,除了 Safari(特别是在 iOS 上)。 我在控制台中遇到的错误是:跨源重定向被跨源资源
如何在 Safari 中为网页添加 IE 等页面转换效果? 最佳答案 你可以看看这个例子:http://sachiniscool.blogspot.com/2006/01/implementing-p
所以我用拇指和周围的白色边框制作了这个圆圈。一切都在每个浏览器中都能找到,除了 safari,它不会按应有的方式呈现白色边框。那我怎样才能让它工作呢? 示例 http://jsfiddle.net/v
我找遍了这个问题的解决方案,但似乎没有任何效果,如果可以避免的话,我真的不想使用 hack。 当我将 line-height 设置为垂直居中时,我的导航栏在任何地方都居中,但在 safari 中,它的
在输入字段中输入时,safari 会创建一个基于下拉列表的联系人。我不知道如何隐藏这个下拉菜单。我可以隐藏联系人按钮。 我正在运行 Safari 版本 11.0.1 重现 fiddle : https
我需要一个苹果脚本来全屏打开 safari 并隐藏小牛上的工具栏。 这听起来很容易,但事实并非如此! 我需要打开 safari,然后以全屏模式打开谷歌,然后隐藏工具栏。 这将是以下示例的等效项,但对于
嗨, friend 们,我开发了一个 safari 扩展并且也能够构建它。 但是当我尝试安装它时,会出现以下错误: “Safari 无法安装此扩展程序。安装此扩展程序时出错” 我有一个有效的 Safa
我想将使用的扩展版本报告给服务。 有没有办法从扩展中读取扩展版本号? 最佳答案 您可以使用 displayVersion 访问该版本SafariExtension 的属性(property)类(cla
我有一个禁用模式的 Safari 浏览器扩展。我想做的是在用户进入禁用模式时以编程方式更改工具栏图标。 是否有一个 API 可以让我实现这一点,如果有,它是什么? 最佳答案 您的扩展程序拥有的任何工具
Safari 有一项“功能”,可以在您输入网址时预加载页面。 现在对于大多数用户来说,这确实是一项功能,可以加快页面加载速度。但是对于 Web 开发人员来说,它可能会带来麻烦 - 特别是当它自动加载您
我们有一个正在开发中的 PHP Web 应用程序,它不应该被公众访问(但),但我们不想实现自定义解决方案来防止这种情况发生,因此我们求助于 HTTP 基本身份验证,它通常工作正常但有是 iPhone
我正在尝试查看 Safari 本地存储中保存的单个值的全部内容(它是一个长 JSON 对象)。当我查看键/值对时,该值对于屏幕来说太长了,复制该行只会复制该值的可见部分。有没有办法看到整条线? 最佳答
出于开发目的,我需要在我的计算机上的 Safari(Windows 上)中禁用同源策略。 在 Chrome 中,这可以通过使用标志 --disable-web-security 启动来完成。 Safa
我正在开发网站并创建应用程序。我想知道如何通过 safari 等网络浏览器检查元素。 在普通的 Chrome、Firefox、Explorer 或任何其他浏览器中,我们将右键单击鼠标按钮或按功能键 F
我有兴趣针对 Safari 浏览器进行一些开发,但我不确定它是否是开源项目?我知道 webkit 是开源的,但这并不意味着浏览器是开源的。 我已经给苹果发了电子邮件,但他们的回复不是很及时,所以我想知
我有一个正确的/etc/hosts 文件,其中包含以下内容: 127.0.0.1 localhost 255.255.255.255 broadcasthost ::1 l
我是一名优秀的程序员,十分优秀!