IE11/edge中使用vh/vw作为单位会使line-height失效?

发布于 2022-09-04 20:05:46 字数 832 浏览 40 评论 0

如题,有如下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test: line-height</title>
    <style>
        .wrap{
            height: 80vh;
            line-height: 80vh;
            text-align: center;
            background: #abc123;
        }
    </style>
</head>
<body>
    <div class="wrap">
        HELLO WORLD
    </div>
</body>
</html>

在IE11和edge当中,line-height仿佛无效化(其实文本冒出了一半到.wrap元素外,与完全没有line-height又不同),当打开F12开发人员工具,在.wrap的样式、line-height一行上反复取消/勾选几次,又能按照需求显示了。
另外,使用vh/vw以外的一些单位,比如px、em之类都没问题。
不知道这是什么问题?有什么办法可以规避吗?
test: line-height

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文