如何让图像的流体高度条纹在 Firefox 中正常工作?
我注意到在某些情况下 firefox 将图像的实际宽度提供给包含它的元素而不是 css 创建的宽度。 Chrome 运行正常。
我试图将图像放在彼此相邻的条纹上,一旦容器的高度是流动的并且不是以像素为单位设置的,就会发生这种奇怪的行为。因此,我们通过 css 将两个相邻的图像设置为相同的宽度,但都为其外部元素提供了不同的宽度。下面我放置了高度不流畅但以像素为单位的条纹,一切都恢复正常。请注意,这不会发生在 Chrome 中。
<div style="height: 20%; position: relative; white-space: nowrap">
<div style="background: blue; display: inline-block; height: 100%">
<img src="http://lorempixel.com/200/200/" style="height: 100%;">
</div>
<div style="background: blue; display: inline-block; height: 100%">
<img src="http://lorempixel.com/400/400/" style="height: 100%;">
</div>
</div>
<div style="height: 200px; position: relative; white-space: nowrap">
<div style="background: blue; display: inline-block; height: 100%">
<img src="http://lorempixel.com/600/600/" style="height: 100%;">
</div>
<div style="background: blue; display: inline-block; height: 100%">
<img src="http://lorempixel.com/400/400/" style="height: 100%;">
</div>
</div>
最佳答案
试试这个来解决你的问题
<div style="height: 20%; position: relative; white-space: nowrap">
<div style="background: blue; display: inline-block; height: 100%; float: left;">
<img src="http://lorempixel.com/200/200/" style="height: 100%;">
</div>
<div style="background: blue; display: inline-block; height: 100%; float: left;">
<img src="http://lorempixel.com/400/400/" style="height: 100%;">
</div>
</div>
<div style="height: 200px; position: relative; white-space: nowrap">
<div style="background: blue; display: inline-block; height: 100%">
<img src="http://lorempixel.com/600/600/" style="height: 100%;">
</div>
<div style="background: blue; display: inline-block; height: 100%">
<img src="http://lorempixel.com/400/400/" style="height: 100%;">
</div>
</div>
关于html - 为什么 firefox 根据实际图像大小而不是 css 给出外部元素宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39957125/