Question

我已经将CSS中的像素大小设置为50px，但是在浏览器中，当展开导航菜单时，它将px大小设置为55.15 ..等。同样的问题会影响Log Action，View Action和Keysystem页面。它不会影响设施信息页面。在下拉菜单的第一个链接下方也有一个空白。我对文本的像素大小进行成像，这是因为，同样，在我的主索引页面上没有发生这种情况。

我尝试将px更改为rem值，该值将从页面默认值38px缩放到50px。它也不能解决问题。

CSS如下。 .nav_main a是我将px大小设置为50px的地方。

* {
  font-family: Arial;
  margin: 0px;
}

html,body
{
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-size: 38px;
    overflow: visible;
}

h1 {
  display: block;
}

.nav_main {
  display: block;
  position: relative;
  width: 100%;
  background-color: #282828;
  overflow: auto;
}

.nav_main a {
  width: 100%;
  text-decoration: none;
  padding-top: 32px;
  padding-bottom: 32px;
  margin: 0;
  text-align: center;
  font-size: 50px;
  color: #fff;
}

.nav_main .icon {
  display: inline;
  float: right;
  width: auto;
  padding: 27.5px;
}

.nav_main .icon_clicked {
  position: absolute;
  right: 0px;
  top: 0px;
  width: auto;
  padding: 27.5px
}

这是日志操作页面html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Facilities Portal - Log Action</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>

    <header>
        <h1>Facilities Portal</h1>

        <div id="navMain" class="nav_main">
                <a id="facInfoL" href="index.html" style="display: none">Facilities Info</a>
                <a id="logActionL" class="activeNav" href="logaction.html" style="display: none">Log Action</a>
                <a id="viewActionL" href="viewaction.html" style="display: none">View Actions</a>
                <a id="keySystemL" href="keysystem.html" style="display: none">Key System</a>
                <a id="burgerIcon" class="icon" onclick="expandMenu()">&#9776;</a>
        </div>

    </header>

    <main>
        <form action="#" id="logActionForm">
            <p>Your Name: </p><input type="text" name="FullName" placeholder="Type your name here...">
            <p>Email: </p><input type="email" name="EmailAddress" placeholder="Type your email here...">
            <p>Issue: </p>
                <select>
                    <option value"" disabled selected hidden>Please choose...</option>
                    <option value="hnf">Health and Safety</option>
                    <option value="comfort">Comfort</option>
                    <option value="other">Other</option>
                </select>

            <p>Description: </p><input type="text" name="Desc" placeholder="Brief description of issue...">
            <p>Details: </p><input type="text" name="Details" placeholder="Extra details here...">
            <p>Upload Picture</p><input type="file" name="pic" accept="image/*">
            <button type="submit" form="logActionForm" value="submit">Submit</button>
            <button type="reset" value="reset">Clear</button>
            <button type="button" value="viewPrevActions">View Previous Actions</button>
        </form>
    </main>

    <footer>
        <p>Author: Scott Law</p>
        <p>Copyright &copy; 2019</p>
    </footer>

    <script src="js/common.js"></script>

</body>
</html>

这是索引页面html

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Facilites Portal Main</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>

    <header>
        <h1>Facilities Portal</h1>
            <div id="navMain" class="nav_main">
                    <a id="facInfoL" class="activeNav" href="index.html" style="display: none">Facilities Info</a>
                    <a id="logActionL" href="logaction.html" style="display: none">Log Action</a>
                    <a id="viewActionL" href="viewaction.html" style="display: none">View Actions</a>
                    <a id="keySystemL" href="keysystem.html" style="display: none">Key System</a>
                    <a id="burgerIcon" class="icon" onclick="expandMenu()">&#9776;</a>
            </div>

    </header>

    <main>
        <a href="logaction.html"><img class="portal-img" src="images/spanners-tools.jpg" alt="Log Action Img"></a>
        <a href="viewaction.html"><img class="portal-img" src="images/clipboard.jpg" alt="View Actions Img"></a>
        <a href="#"><img class="portal-img" src="images/batch-books.jpg" alt="Facilities Infomation Img"></a>
        <a href="keysystem.html"><img class="portal-img" src="images/close-up-keys.jpg" alt="Key System Img"></a>
    </main>

    <footer>
        <p>Author: Scott Law</p>
        <p>Copyright &copy; 2019</p>
    </footer>

    <script type="text/javascript" src="js/common.js"></script>
</body>
</html>

日志操作页面的浏览器图片（此页面上有错误）。突出显示的黄色是问题所在。这发生在日志操作，查看操作和关键系统页面上。

https://imgur.com/qDvZj8T

索引页的浏览器图片（正常工作）

https://imgur.com/e9jVCSg

我希望浏览器遵循我在索引页面上设置的CSS。其他页面由于某些原因不适合。

为什么我的浏览器不将px字体文本大小设置为我在CSS中设置的大小

0 个答案: