[css]a标签中切换中英文显示会导致位置改变

最新推荐文章于 2022-03-01 14:52:18 发布
原创 最新推荐文章于 2022-03-01 14:52:18 发布 · 342 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#字体位移

本文介绍了一个常见但少被提及的问题：在切换中英文等不同字体时，文本可能会发生位移。通过调整line-height属性，可以有效解决这一问题，确保文本排版的一致性和美观性。

入上图,明显看到切换中英文字体后,发生位移

查了很久都没有发现说这个问题的,后来发现只需要一个属性就可以解决:

line-height

这个属性固定了行高,不会因为字体变化而导致位移

 

 

用可演化的选择器写样式：为什么在 SAP UI5 里不要直接以 DOM 标签名写 CSS
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
09-25 144
在 SAP UI5 项目中，直接使用 HTML 标签选择器（如 div { width: 120px; }）存在严重风险，可能导致样式冲突和升级兼容性问题。SAP 官方明确建议避免这种做法，原因包括：1) 框架内部 DOM 结构不稳定；2) 共享运行时样式污染；3) 破坏主题适配性。正确做法是使用具名 CSS 类（如 .myApp-CardTight）并通过 addStyleClass 方法绑定到控件，同时优先使用主题参数和控件原生属性。迁移方案包括重构选择器为命名类、添加作用域隔离、验证跨应用影响等。该规
SpringMVC实现中英文切换(通过a便签动态切换)
py1215的博客
08-24 1871
SpringMVC实现中英文切换(通过a便签动态切换) 这个是本人花了几小时解决的一个问题，老师要我们学习 “SpringMVC实现国际化”，我很快找到了清晰易懂的资料，但是自己运行时总是出现各种异常，下面总结以下我这次所遇到的问题（第一次发文，请轻喷） 主要参考这篇博文的代码 其中碰到一个问题，找了好久，然后参考另一篇博文的代码终于可以完美运行 下面先看一下我的工程截图(在下面没有代码的文...
中英文切换导航
qq_14886653的专栏
09-21 777
总结学到的一些新的特效使用css3 及jquery两种方法实现中英文切换导航。 css3版：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>中英文切换导航条</title> <style> *{ padding: 0;
为什么display:line-block的a标签会加上文字之后会向下移动呢？
littlebird_cl的博客
07-05 6803
1.那是因为第二个标签是inline-block,它的对齐方式是基线对齐，对齐的是第一个元素里面字的下划线，所以第二个元素的下边缘对齐的是1的下划线，只要在第二个元素里面加内容或者加个空格( )就可以了。个人认为inline-block和inline性质一样，只是一个可以设置宽高一个不可以。 2.inline-block的默认对齐方式的问题 inlin
div CSS样式表实现中英文双语切换导航条
11-21
div CSS样式表实现中英文双语切换导航条 div CSS样式表实现中英文双语切换导航条 div CSS样式表实现中英文双语切换导航条 div CSS样式表实现中英文双语切换导航条
CSS中文黑体不显示解决办法
swort_177的专栏
11-06 2405
 调 用的CSS文件，代码中设为黑体，结果没有显示出效果请将把“黑体”改为“simhei”。  另外CSS文件中最好不要出现中文 呵呵 有可能显示不出预计的效果。排查起来也是很麻烦的。
jQuery实现Flash效果上下翻动的中英文导航菜单代码
10-23
本段内容主要涉及了使用jQuery技术实现了一个具有Flash效果的导航菜单，支持鼠标悬停触发的动画效果和中英文切换功能。以下是详细的知识点梳理： 1. jQuery基础：jQuery是一个快速、小巧且功能丰富的JavaScript库，...
CSS打造中英文双语导航菜单特效
本文件提供了一个中英文双语导航菜单的实现方法，该方法完全依赖于CSS技术，不涉及JavaScript脚本和图片资源。该菜单的特色在于实现语言的切换通过CSS样式控制，具体的切换机制依赖于鼠标悬停事件。尽管该技术提供了...
Spring Boot 2.1.5中英文对照API文档
为主入口页面，采用 HTML + CSS + JavaScript 构建，兼容主流浏览器（Chrome、Firefox、Edge 等），支持全文搜索、目录导航、标签跳转等功能，类似于 Javadoc 官方文档的浏览体验，但增加了语言切换或并排显示的优势...
实现中英文简繁自动切换的jquery-s2t-master插件
- **性能考虑**：虽然动态切换语言内容是一种方便的方法，但若没有合理优化，可能会导致性能问题。例如，缓存已转换内容以减少服务器负载。 - **用户体验**：确保在语言切换过程中，用户界面的其他元素（如按钮、...
JS+CSS阿拉伯语（阿语）格式转换
sunshineTing2的博客
05-23 1894
CSS .ar{ width: 100% !important; text-align: right; // 居右 direction: rtl; // 从右向左读 } JS 起止年份显示问题: 年份大的居左，年份小的居右; 使用正则表达式，找到两组年份，两组年份中间有“-”号，对调两组年份顺序。 /** ar format 2019-2021 -> 2021-2019 */ formatAr(name) { var str = n
中英文切换时英文的样式乱了怎么处理
Archer_joy的博客
04-20 1208
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
CSS中英文和中文高度不一样问题的解决办法 (实用)
chelen_jak的专栏
03-01 6119
现状： 一样的字体，一样的大小。中文行高要比数字的要高，如下图： 方法一： 改用等中、英文等高字体定例如宋体，如下图： font-family: "宋体",Simsun; 方法二： 使用line-height固定高度，如下图： line-height: 19px; 想进步了解可以参考资料： 1、css中英文字母和汉字行高不同解决方法 2、【css】探究font-size、文本实际高度、line-...
a标签超出部分隐藏以及设置inline-block后，不在同一水平线上的问题
liaoyingtai的博客
01-03 4578
今天在编写前端代码时，因为需求，需要将标签超出部分隐藏。 在隐藏过程中遇到了一点小问题，顺便记录一下。 原样式： 1.隐藏标签超出部分内容，并显示省略号 代码如下： display:inline-block; width: 500px; overflow: hidden; word-break: keep-all; white-space: nowrap; text-ov
a标签文字下移
qq_38101304的博客
01-28 2230
正常的行内块不会出现位置的变动，但一旦加上文字后，会出现下移现象 1.那是因为第二个标签是inline-block,它的对齐方式是基线对齐，对齐的是第一个元素里面字的下划线，所以第二个元素的下边缘对齐的是1的下划线，只要在第二个元素里面加内容或者加个空格( )就可以了。个人认为inline-block和inline性质一样，只是一个可以设置宽高一个不可以。 2.inline-block的默认对齐方式的问题 inline-block默认对齐方式是底部对齐 加一个vertical-align:top;
网页中文转英文（国际化）
a510750的专栏
02-08 7835
背景：我的项目是已经完成的项目，因为要拓展海外市场，需要支持英文。采用的方式是添加配置文件，见下文详细步骤。本文基本转自：http://blog.youkuaiyun.com/wuhawang/article/details/52228589在他的基础上给大家一点提示补充：1.将需要的js文件与其他公共js一起加载；2.js中部分中文需要改写代码根据按钮取值来显示；3.注意全局方法中的中文名不要忘记替换；4....
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值