- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个包含最多三个 div 的包含行。每个子 div 要么有一个背景图像,要么只有一些文本。由于图像 div 使用 background-image
并且没有定义宽度/高度,因此它们使用 aspect ratio padding method 设置纵横比。 (在此实例中使用伪元素)。
这似乎在 Firefox 中完美运行,但在 Chrome 中,包含的 div 似乎不尊重最高 div 的高度,如下所示:
作为引用,我使用的是 flex-direction
设置为 column
的 Flexbox,这样,给定一个 max-height
div,元素应该换行。已经戳戳了几个小时,我无法确定罪魁祸首是 flexbox 的问题,还是 padding-bottom
宽高比方法的问题(尽管我怀疑不是,因为右侧的列集似乎工作得很好)。
关于为什么这会打破它在 Chrome/Webkit 中的容器有什么想法吗?
作为引用,这里有一个 jsFiddle with kittens .
最佳答案
这是一个 Chrome 错误。请看这个简化的片段:
.flex {
display: flex;
flex-flow: column wrap;
max-height: 200px;
background: red;
justify-content: space-between;
margin: 10px 0;
}
.big, .small {
background: blue;
margin: 10px;
}
.big {
height: 75px;
}
.small {
height: 50px;
}
<div class="flex">
<div class="small"></div>
<div class="small"></div>
<div class="big"></div>
<div class="big"></div>
</div>
<div class="flex">
<div class="big"></div>
<div class="big"></div>
<div class="small"></div>
<div class="small"></div>
</div>
在 flex 容器上使用 max-height
,flex 元素被强制包装成两列。
在 Chrome 上,每一列都有不同的高度,flex 容器的高度是最后一列的高度。
这与规范相矛盾,因为所有 flex 行(在本例中为列)必须具有相同的主要尺寸(在本例中为高度):
6. Flex Lines
The main size of a line is always the same as the main size of the flex container’s content box.
这个bug可能是因为先确定了flex容器的主要尺寸,然后将flex项排列成flex行
- Determine the main size of the flex container using the rules of the formatting context in which it participates.
- Collect flex items into flex lines
但是,根据 block 布局,自动高度depends on the content .所以在安排内容之前确定它似乎不太明确。
要修复它,我建议将每一列包装在行 flex 容器的 flex 元素中。
.flex {
display: flex;
flex-direction: row;
background: red;
margin: 10px 0;
}
.col {
flex: 1;
display: flex;
flex-flow: column wrap;
justify-content: space-between;
}
.big, .small {
background: blue;
margin: 10px;
}
.big {
height: 75px;
}
.small {
height: 50px;
}
<div class="flex">
<div class="col">
<div class="small"></div>
<div class="small"></div>
</div>
<div class="col">
<div class="big"></div>
<div class="big"></div>
</div>
</div>
<div class="flex">
<div class="col">
<div class="big"></div>
<div class="big"></div>
</div>
<div class="col">
<div class="small"></div>
<div class="small"></div>
</div>
</div>
关于css - Chrome 中的 Flexbox 似乎不遵守 'aspect ratio' 填充;在 Firefox 中很好,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30849662/
根据 PEP 257命令行脚本的文档字符串应该是它的用法信息: The docstring of a script (a stand-alone program) should be usable a
我有一个使用 exit 的批处理文件命令返回退出代码。 在某些情况下,该批处理文件可以从命令行以交互方式调用,或者在其他情况下,可以使用 Exec 作为 MSBuild 项目的一部分运行。任务。 如果
以下内容使 nginx 不传递到 PHP-FPM fastcgi 服务器,因为我创建了一个位置 block : location = /test.php { auth_basic "Nope.
java bean 命名标准是否有可能有助于实现封装? 访问修饰符不是有助于封装吗? 最佳答案 没有。命名标准不会做、开放或限制任何事情。对于封装,您当然需要访问修饰符。最好是两者都使用。即使您有一段
在 mysql Ver 14.14 Distrib 5.1.66 上,对于未知的 linux-gnu (x86_64),存在未遵守/遵守 MySQL 外键约束的问题。 数据库/表结构从未被修改过,又名
收到一封来自 Apple 的关于应用更新截止日期的电子邮件 更多信息 - link 作为开发人员需要在 iOS13 SDK 的代码库中进行哪些更改我已经更改了目标并构建了应用程序,除此之外我们还必须实
我有一个生成 IAsyncEnumerable 的异步迭代器方法(数字流),每 200 毫秒一个数字。此方法的调用者使用流,但希望在 1000 毫秒后停止枚举。所以一个CancellationToke
我是 Swift 开发的新手,在尝试做一些教程时遇到了困难(我知道,它们是一步一步的,但显然我一定在某个地方搞砸了,现在我无法弄清楚为什么它不起作用。我不太擅长调试,并且对该语言的基础缺乏扎实的理解。
有点愚蠢的问题。例如我读过,在 C11 中添加了对线程的支持。然后,例如我的STM32F4的GCC编译器说,它支持C11标准。那么,这是否意味着现在没有操作系统我将获得线程支持???但这怎么可能呢?
我的网站使用 zurb Foundation。它已经得到了自己的验证。这是a link到文档。 我使用以下代码来验证并提交我的表单数据。 $('#myForm').on('valid', functi
我知道 ansible 支持这种形式的模板中的循环: {% for host in groups['all'] %} "{{ host }}"{% if not loop.last %},{% e
我很困惑 time-based cache policies使用 HttpWebRequest 时工作。 我正在调用 WebAPI 的 GET 方法,该方法返回 JSON 内容以及类似于以下内容的 C
我正在使用 zurb foundation 5 和 abide js 检查我的表单。我必须检查 DATE1 是否早于或等于 DATE2 如何使用 abidejs 检查它是否有效? 最佳答案 简短的回答
我有一个非常简单的 javascript 构造函数,如下所示: function DisplayedTableData() { this.rowData = []; } SonarQube 提
我有一个 div 嵌套在两个 div 中。最外层和最内层的 div 都有固定的宽度。我想将最外层的 div's width 设置为 0,这样它的所有子项也都将为 0,或者至少不可见。 但是当我将最外面
我们使用 GSLB 进行地理分布和负载平衡。每个服务都分配了一个固定的域名。通过一些 DNS 魔术,域名被解析为最接近负载最少的服务器的 IP。为了使负载均衡发挥作用,应用服务器需要遵守来自 DNS
我正在编写一个向 REST API 服务发出频繁请求的 Android 应用程序。此服务的硬请求限制为每秒 2 个请求,之后它将返回 HTTP 503,没有其他信息。我想成为一名优秀的开发人员并限制我
ScalaTest 的输出是彩色的以区分不同的状态,但这些最终作为控制代码和 [34m Annoying garbage 有没有办法说服 Eclipse 控制台尊重或忽略这些序列,或者插入一个 Vie
我对 Node.js 比较陌生,我试图通过编写一个简单的模块来更熟悉它。该模块的目的是获取 ID、抓取网站并返回包含数据的字典数组。 网站上的数据分散在各个页面上,而每个页面都通过 URI 中的不同索
我正在通过 gradle/maven 使用 slf4j-android 1.6.1-RC1,当我在模拟器中运行应用程序时,当我在 Android Studio 0.3.5 下调用 Log.debug
我是一名优秀的程序员,十分优秀!