Почему мой браузер не устанавливает размер шрифта px в соответствии с тем, что я установил в CSS - PullRequest
Новая
       16

Почему мой браузер не устанавливает размер шрифта px в соответствии с тем, что я установил в CSS

0 голосов
/ 17 апреля 2019

Я установил размер пикселя в своем CSS на 50 пикселей, но в браузере, когда раскрываю мое меню навигации, он устанавливает размер пикселя на 55,15 и т. Д. Эта же проблема касается страниц Log Action, View Action и Keysystem. Это не влияет на страницу информации об объектах. Также есть пробел под первой ссылкой в ​​выпадающем меню. Я представляю, что размер текста в пикселях вызывает это, потому что, опять же, это не происходит на моей главной странице индекса.

Я попытался изменить значение px на значение rem, которое увеличит его до 50px по умолчанию для страницы 38px. Это также не решает проблему.

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, который я установил на странице индекса. Другие страницы почему-то не следуют примеру.

...