微信浏览器大字体模式 按钮文字居中用line-height 显示异常

最新推荐文章于 2025-08-15 10:51:23 发布
最新推荐文章于 2025-08-15 10:51:23 发布
阅读量369 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43073383/article/details/133828221
本文讨论了在微信浏览器的大字体模式下，使用line-height实现按钮文字居中可能导致显示错误。作者推荐采用flex布局来解决这个问题，确保文本正确居中显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

按钮文字居中用line-height 的css 在微信浏览器大字体模式，会导致显示错误。改成flex 居中就好了
在这里插入图片描述

微信小程序云开发入门教程-全局文件介绍
低代码布道师的博客
06-17 1651
我们前边两篇介绍了账号的申请、注册，工具的安装，云服务的开通。本篇我们介绍一下基础语法。介绍的方法呢我们会结合上微搭低代码的工具一起做个对比。因为低代码工具也产生了非常多的技术概念，但最终在发布成小程序的时候也是按照微信的规范去生成的，把微信开发者工具学会了也可以更深入的了解低代码的相关概念。小程序中是分为全局和页面级两部分。全局是在小程序的所有页面都有效，页面级是只在当前页面中生效。小程序根目录有三个文件app.js、app.json、app.wxss这三个就是全局的。 在低代码中我们是在低码编辑器里看全
【C#进阶3-4】C#设计模式
优快云博客专家，Unity3D高级软件工程师，《Unity 3D从入门到实战》作者。
05-19 7130
一、目录 文章目录一、目录二、设计原则三、创建型模式3.1、单例模式（Singleton Pattern）3.2、工厂方法模式（Factory Pattern）3.3、抽象工厂模式（Abstract Pattern）3.4、建造者模式（Builder Pattern）3.5、原型模式（Prototype Pattern）四、结构性模式4.1、适配器模式（Adapter Pattern）4.2、桥接模式（Bridge Pattern）4.3、装饰者模式（Decorator Pattern）4.4、组合模式（C
line-height 对a标签在有些浏览器中不支持
weixin_30697239的博客
03-25 457
同标题 在chrome中对a标签设置了line-height:50px;却发现a的高度并没有如愿的成为50px;网上有说line-height 对a标签在有些浏览器中不支持； 同时回忆到在项目中的meizu Note2手机中也出现此情况，应该也是这个原因； 建议将a标签设置为display:block;同时设置height:50px;避免将样式直接写给a标签时，出现样式问题，或点击到不在文字...
浏览器和手机line-height
weixin_43860489的博客
05-21 166
浏览器模拟手机和真机样式不一样（line-height） // An highlighted block <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>line-height</title> <style> *{ margin: 0; padding: 0; list-styl
微信H5页面前端开发，大多数人都会遇到的几个兼容性坑(转载)
weixin_30399055的博客
08-20 1435
1、ios端兼容input光标高度 问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上 当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。 出现原因分析：通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离（行高），当点击输入的时候，光标的高度就自动...
微信 H5 页面前端开发，大多数人都会遇到的兼容性“坑”
李水灵的博客
10-19 567
转载自：前端大全 作者：codercao https://segmentfault.com/a/1190000019986963 最近给公司写了微信 h5 业务页面，总结分享一下前端开发过程中的几个兼容性问题，项目直接拿的公司的页面，所以下文涉及图片都模糊处理了。 IOS 端兼容 input 光标高度 **问题详情描述：**input 输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是 ios 的 input
微信小程序插件--wxml-to-canvas(生成图片)
热门推荐
别告诉我有Bug
07-26 1万+
小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分享图等场景
【微信小程序实战教程】之微信小程序核心组件详解
柯晓楠
08-06 2433
组件化开发并不是小程序所特有的，一些其他编程语言中都有组件化的概念，准确来讲，只有视图层的展示，就必定要用到组件化。组件是视图层的最基本组成单元，组件中包含了一些基础功能和基础样式，一个组件就类似于一个自定义的标签。小程序框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发，那么微信小程序提供的基础组件肯定是要完成小程序开发的基础功能与微信风格保持一致的样式。视图容器组件主要用于控制页面的内容，与HTML中的标签功能类似，可以把小程序的容器组件理解为一个盒子容器，可以将其他组件填充在
微信小程序view中用flex实现文字的垂直居中
厦门在乎科技
06-10 1474
视图容器view上设置 view{ display: flex; justify-content: center;align-items: center;} view相当于div是一个视图容器，传统的方法实现div中文字的水平垂直居中是设置div的两个属性：text-align：center；和line-height：100%；即可实现div容器中内容的水平垂直居中，那么今天我们来用flex弹性盒子来实现小程序中view视图容器里面内容的水平垂直居中，话不多说，直接上代码： //wxml <v
五 uniapp的微信小程序中正确使用阿里巴巴字体元素iconfont
无
07-14 779
上一章节的认识 上一章节我们一起了解了微信小程序的定位，调用第三方导航等功能，传送门 遇到的问题 当我们将微信小程序进行上传的时候，也许你会收到微信的反馈，XXX文件未被上传，这是因为微信在服务器内设置了只可以上传它定义的名称类型 下面是微信上传的文件类型 可上传文件类型 因此我们的字体样式iconfont.eot等是不能上传的，若上传则显示未上传成功，如图所示： 解决方式 打开网址https://www.iconfont.cn/，注册登录，新建一个项目，如图： 然后进入图标库中搜索我们想要的图标，
原生微信小程序开发-黑马优购（一）
peng109的博客
03-14 3253
接口文档地址： 轮播图--ShowDoc 视频地址： 黑马程序员微信小程序开发前端教程_零基础玩转微信小程序_哔哩哔哩_bilibili vs快捷键 wx-app wx-page 通过样式方式引入字体图标 微信小程序中不支持通配符“ * ” 页面初始化 主体颜色定义成变量 微信小程序单行注释没有用 单行注释没有用（//） 要 用多行注释（/* */） 写less文件，变成wxss文件？ 发送请求 ，要么记得把勾去掉，要么去开启请求合法域名 引入的路径要写...
微信小程序项目实录三——web-view上添加自定义内容
王等等csdn的博客
03-24 1771
web-view: 承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。 在项目中用它加载h5页面，因为他会占满整个页面，所以开始考虑使用cover-view来在容器之上覆盖一个图标按钮 <web-view src="{{url}}"> <cover-view class="btns"> <cover-image class="btn" src="/resources/view/btn.png" bindtap="handleTo"></c
Go语言实战案例:静态资源服务（CSS、JS、图片）
tenkofx的博客
08-15 540
• Gin 提供Static()方法一行就能完成静态文件托管。• 静态文件路径映射和 URL 前缀可以灵活配置。• 结合 HTML 模板，可以很方便地构建完整的前端页面服务。
CSS Houdini 与 React 19 调度器：打造极致流畅的网页体验
最新发布
chaosweet的博客
08-15 910
Hi，我是前端人类学！今天聊聊真东西：「用 CSS Houdini 和 React 19 新调度器提升网页性能」——这不是标题党，而是前沿技术。接下来 3 分钟，带你了解如何结合使用这两项技术，让你的网页如游戏般丝滑。
HTML第三次作业
2301_81538927的博客
08-13 1005
【代码】html第三次作业。
【web站点安全开发】任务4：JavaScript与HTML/CSS的完美协作指南
不羁的博客
08-14 916
本文介绍了JavaScript在前端开发中的核心作用及其与HTML、CSS的协作方式。主要内容包括：1. JavaScript语言特性，通过对比表格展示其与Java在类型系统、面向对象、执行方式等方面的本质区别；2. JavaScript在HTML中的使用方法，包括<script>标签的三种放置位置（head/body/外部文件）；3. 四种常用输出方式（alert/write/innerHTML/console.log）；4. 语法特性比较（变量声明、数据类型、函数定义等）等
CSS保持元素宽高比，固定元素宽高比
chinahcp2008的博客
08-13 274
CSS保持元素宽高比，固定元素宽高比。
CSS中的 :root 伪类
2401_87008233的博客
08-14 929
CSS中的:root伪类是文档根元素的选择器，主要用于定义全局CSS变量。该伪类具有以下特点：1）作为CSS变量的理想载体，支持动态主题切换；2）变量通过var()函数调用，可设置默认值；3）结合JavaScriptJavaScript可实现实时样式更新。典型应用包括主题管理、响应式设计和减少重复代码。示例展示了如何通过:root定义变量，并配合JavaScript实现深色/浅色主题切换，具有代码简洁、无需重载页面的优势。注意浏览器兼容性和变量作用域问题，现代项目推荐使用此方案提升开发效率。
Web前端小游戏轮盘。
2302_81651427的博客
08-12 1020
开始抽奖等待抽奖...
微信浏览器与外部浏览器交互新技巧
微信浏览器是微信内置的网页浏览功能，它主要利用微信内置的Webview组件加载和展示网页。由于Webview组件本身会限制与外部浏览器之间的交互，因此在某些情况下，我们可能需要将用户引导至外部浏览器以实现更完整的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

给钱，谢谢！

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值