Firefox设置最小字体比页面指定字体还大，导致页面变形

最新推荐文章于 2023-05-04 18:27:14 发布

intergameover

最新推荐文章于 2023-05-04 18:27:14 发布

阅读量1.1k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/intergameover/article/details/41693001

版权

下面代码直接拷贝，存为html就可以打开验证，页面指定字体12px，FireFox中设置最小字体13。导致页面变形。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        body{font-size:13px;}
        .comWidth {width: 1000px; margin-left: auto; margin-right: auto; border: solid blueviolet;}
        .leftArea {float: left;}
        .rightArea {float: right;}

        .topBar {height: 31px; background-color: #F7F7F7; line-height: 31px;}
        .bookmark { padding-left: 19px; font-weight: bold;}


    </style>
    <title></title>
</head>
<body>

<div class="topBar">
    <div class="comWidth">
        <div class="leftArea">
            <a href="#" class="bookmark">收藏网站</a>
        </div>
        <div class="rightArea">
            欢迎来到电子商城! <a href="#">登录</a><a href="#">免费注册</a>
        </div>
    </div>
</div>
<div class="topBar">
    <div class="comWidth">
        <div class="leftArea">
            <a href="#" class="bookmark">收藏网站</a>
        </div>
        <div class="rightArea">
            欢迎来到电子商城! <a href="#">登录</a><a href="#">免费注册</a>
        </div>
    </div>
</div>
<div class="topBar">
    <div class="comWidth">
        <div class="leftArea">
            <a href="#" class="bookmark">收藏网站</a>
        </div>
        <div class="rightArea">
            欢迎来到电子商城! <a href="#">登录</a><a href="#">免费注册</a>
        </div>
    </div>
</div>
</body>
</html>