html - 我希望文本不重新调整大小或移动 css-6ren

html - 我希望文本不重新调整大小或移动 css

转载作者：行者123 更新时间：2023-11-28 05:46:47

我想让它在使用 CTRL + 或 - 时，文本不会像下面的图像那样受到影响。我试过 webkit，使用百分比而不是像素值，但它不起作用。

.header {
        background-color: #FFFFFF;
        height: 7%;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        box-shadow: 0px 5px 10px #424242;
    }
    
    .body {
        margin: 0;
        -webkit-text-size-adjust: 0;
    }
    
    .main {
    }
    
    .hub {
        margin-left: 10%;
        margin-right: 10%;
    }
    @font-face {
        font-family: coolvetica;
        src: url("font/coolvetica rg.ttf");
    }
    
    .title {
        font-family: coolvetica;
        font-size: x-large;
        line-height: 180%;
        margin-top: 0.35%;
        margin-bottom: 0.35%;
        height: 80%;
        left: 1%;
        position: absolute;
        display: inline-block;
        vertical-align: top;
        overflow: hidden;
    }
    
    .navbar {
        position: fixed;
        top: 2%;
        left: 14%;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    .item {
        display: inline;
        float: left;
    }
    
    .label {
        color: black;
        text-decoration: none;
        padding: 8px;
    }
    
    .title-box {
        height: 100%;
        line-height: 100%;
    }

<html>
    <head>
        <title>TheShieldNetwork</title>
        <link href="style.css" rel="stylesheet">
    </head>
    <body class="body">
        <div class="header">
            <p class="title">TheShieldNetwork</p>
            <ul class="navbar">
                <li class="item"><a class="label" href="default.asp">Home</a></li>
                <li class="item"><a class="label" href="news.asp">News</a></li>
                <li class="item"><a class="label" href="contact.asp">Contact</a></li>
                <li class="item"><a class="label" href="about.asp">About</a></li>
            </ul>
        </div>
        <div class="main">
            <img class="hub" width="80%" height="80%" src="img/background.png" alt="Hub">
        </div>
    </body>
</html>

您可以在 www.theshieldnetwork.com 查看该网站。你知道我将如何修复它吗？

最佳答案

Ctrl- 或 + 是浏览器放大/缩小的方式，它特别适合帮助人们……(老年人等等……)。

Chrome (webkit) 支持它直到版本:28.0.1500.11

-webkit-text-size-adjust: none;
-webkit-text-size-adjust: 100%

但据我所知，目前只有 iOS 支持此功能，因此 Chrome 会简单地忽略它并继续使用名为 font boosting 的东西。

有一个解决方案，即使它是一个困惑的解决方案。在父元素之一上设置大于元素高度的最大高度似乎可以解决此问题。例如:

<div class="outer">
    <ul>    
        <li>This is a simple list</li>
        <li>With list items that get scaled</li>
        <li>How annoying!</li>
    </ul>
</div>

CSS:

.outer {
        max-height: 5000em;
    }

这似乎解决了这个问题。尽管它并不理想。

或者您总是可以用图像替换所有文本 - 也不理想。

关于html - 我希望文本不重新调整大小或移动 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37559466/

文章推荐： javascript - 使用 "slideToggle"查看

[ jQuery ]

文章推荐： c++ - Visual C++ 给我 400 多个错误？

文章推荐： swift - NSSavePanel 名称不是用户可编辑的

文章推荐： javascript - 子 ASP.net 页面关闭后刷新父 CRM 页面

c - (希望)我的刽子手游戏的最后一个循环，
对于我不断地用刽子手问题来打扰这个论坛，我深表歉意。我希望很快就能完成这件事。确实在这方面一直在努力。这是到目前为止我的代码: #include #include #include #defin
.net - 希望 .NET 泛型可以继承其中一种泛型参数类型的充分理由是什么？
这篇文章是 this one 的延续. 我试图了解我是否是唯一一个错过并需要 .NET 泛型类型继承其泛型参数类型之一的能力的人。面临的挑战是收集支持此功能的令人信服的理由，或者，要知道没有。我给
javascript - 希望 javascript 倒计时即使在刷新后也能从原来的位置继续
我正在使用下面的代码设计一个 3 小时的 JavaScript 倒计时 var count = 10800; var counter = setInterval(timer, 1000); //1
javascript - 希望 html 模式属性在不点击提交按钮的情况下工作
我正在处理验证并放置一个 html 模式属性，并希望在不点击保存/提交按钮的情况下查看错误消息。当我在字段外单击时，它应该根据我的模式条件进行验证。这是我的代码: Extra Credit Da
mysql - 希望 SELECT 在一行中返回多个值
我有一个像这样的 mysql 表结构: id int primary key name varchar start_time float 数据可能是这样的: id name
html - 希望 DIV 在桌面上堆叠但在移动设备上彼此相邻
我试图在桌面上保留一张带有描述的图片，然后在移动设备上希望图片在左边，描述在右边……更多的是尽可能让所有内容都在首屏。我希望桌面上的 DIV 是: 一个一个 BBB 但是在手机上: A B A B
css - 希望 CSS 列重叠
我通过 Stackoverflow 进行了搜索，发现很多人试图避免 CSS 列中的重叠，但实际上我被要求让文本和图像重叠。更新: 更好的图像解释了我被要求做的事情，以及指向我正在使用的代码的链接。谢
swift - 为什么这不像我期望(希望)的那样表现？
我在我的框架中设置了几个协议(protocol)来处理资源。在其中一个协议(protocol)中，我设置了一个扩展来为 decode 函数提供默认实现。显示代码和发生的情况更简单(请参阅对 fatal
javascript - 希望 div 在加载上面的图像后立即加载
我想同时加载，或者在上面的图像之后立即加载。它会在图像和标题 div 在预加载器内旋转之前不断加载 - 不好!这是 HTML: ✕ Various inv
Java - 希望 getKeyCode 仅注册一次
我目前正在开发一个小游戏。我使用 getKeyCode 来移动我的角色，但问题是我不希望你在按住按钮的情况下能够继续移动。无论如何，我是否可以使用 getKeyCode 仅在第一次单击时注册，然后在释
css 希望 p 在设置时的宽度小于最大宽度
我需要设置 width 或 max-width 才能让 margin:auto 工作，对吗？ Like in this jsFiddle . 问题是，段落宽度等于 max-width，因此文本 blo
php - 希望 Paypal 订阅按钮在重定向付款之前向我提交页面中的表单
您好，我在同一页面上有一个表单和一个 Paypal 订阅按钮。在重定向到 Paypal 付款之前，我想在单击提交表单(通过电子邮件发送给我)时订阅按钮。 > >
android - 希望 textview 像单击按钮一样通过单击更改颜色
我想让用户在点击一个文本字段时感觉就像我们点击一个按钮，在释放按钮后它会在很短的时间内变成橙色，然后闪烁并再次变成它的第一种颜色。当我点击它时它运行良好但没有出现颜色闪烁。布局文件主要 Ac
android - 希望 MediaPlayer 在屏幕锁定时继续运行
我怎样才能让我的 MediaPlayer 继续播放，即使在手机锁定和屏幕关闭的情况下，我认为它可能必须做一些使其成为服务但不确定的事情。如果是这样，我该如何将其更改为服务，或者是否有更快更简单的修复方
c - 内存泄漏......解释(希望)
有人可以帮助我理解内存泄漏的概念以及特定数据结构如何促进/防止它(例如链表、数组等)。前段时间我被两个不同的人教过两次——由于教学方法的不同，这让我有点困惑。最佳答案维基百科有一个 good de
javascript - 希望 HTML 表单提交什么也不做
我希望 HTML 表单在提交后不执行任何操作。 action="" 不好，因为它会导致页面重新加载。基本上，我希望在按下按钮或有人在输入数据后点击 Enter 时调用 Ajax 函数。是的，我可以删
c - 希望 execve() 运行的可执行文件使用我预加载的库
我正在执行一个程序 say A from another，首先是 fork-ing，然后是 execve()。现在的问题是我希望 A 使用我通常使用 LD_PRELOAD 来完成的库。我如何在 exe
c# - 希望 Autofac 不注册任何具有多个实现的接口(interface)
我目前正在为我们公司测试 Autofac。我们希望有以下规则: 如果接口(interface)只实现了一次，则使用 builder.RegisterAssemblyTypes 自动添加它(见下文)。
c++ - 对此(希望)100% 安全的双重检查锁定替代单例的任何评论
正如 Scott Meyers 和 Andrei Alexandrescu 在 this 中概述的那样文章简单尝试实现双重检查锁定实现在 C++ 中特别是不安全的，并且通常在不使用内存屏障的多处理器
php - 希望 Javascript Button 的图像相互独立交换
目前我有一些代码可以在点击时改变图像，但这段代码是在一个 php HTML 循环中所以事情变得棘手，点击一个开关会使每个故事的开关都激活，因为它是基于 CSS 运行的.如何让它们独立交换？ $("

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 我希望文本不重新调整大小或移动 css