Firefox中忽略的最大高度适用于Chrome和Safari
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Firefox中忽略的最大高度适用于Chrome和Safari相关的知识,希望对你有一定的参考价值。
我正在用display
类幻灯片制作图像。我想将图像的高度和宽度限制为窗口的最大值的80%,这样就不需要任何正常大小的滚动条。这是我使用的CSS:
.display {
max-width: 80%;
max-height: 80%;
}
它完全符合我希望它在Chrome和Safari中运行的方式,Firefox也承认最大宽度。但Firefox忽略了最大高度,因此大型垂直图像会脱离屏幕。
非常感谢您的帮助。
您需要告诉浏览器有关html高度和身高的信息。然后根据这些尺寸计算高度。以下适用于所有的保龄球。
html { height: 100%; }
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.display {
max-width: 80%;
max-height: 80%;
overflow: hidden;
}
这里有一个有效的例子:http://jsfiddle.net/P7wfm/
如果您不希望图像裁剪超过80%高度或宽度设置为img height to
.display img {
min-height: 100%;
min-width: 100%;
}
我同意@Uds,你需要指定body
和html
元素的高度和宽度
其他要记住的事情:
此外,您还需要在CSS代码中定义浏览器,您可以通过以下方式定义它:
.display{
/* For general browser */
max-width: 80%;
max-height: 80%;
/* For Firefox browser */
-moz-width: 80%;
-moz-height:80%;
/* For Chrome and Safari browser */
-webkit-width: 80%;
-webkit-height:80%;
/* For Opera browser */
-o-width: 80%;
-o-height:80%;
}
这将指定哪个浏览器应具有哪种高度或宽度。
您需要为容器元素或正文设置高度:
body {
height:100%;
min-height:100%;
}
尝试提出的解决方案没有成功,在Firefox 62.0上,忽略了最大高度动画。
当max-height属性更改与动画的持续时间相匹配时,也会有延迟。
我今天遇到了同样的问题,但是我不能将所有的父母元素设置为100%的高度。 我在这里找到了解决这个问题的另一个解决方案的线索:
https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
您不仅可以指定%到max-height,还可以指定“em”,因此如果将html和body设置为100%的字体大小,则其工作方式与百分比宽度相似。
<div>
<p>
<img src="" alt="">
</p>
</div>
html,body{
font-size: 100%;
}
img{
max-width: 100%;
max-height: 50em;
}
以上是关于Firefox中忽略的最大高度适用于Chrome和Safari的主要内容,如果未能解决你的问题,请参考以下文章
ScrollTop 适用于 Chrome 和 Edge,但不适用于 Firefox
使用 Javascript 切换的导航栏汉堡的响应式下拉菜单适用于 Chrome、Firefox,但不适用于 Safari