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

最新推荐文章于 2021-01-28 10:09:27 发布
最新推荐文章于 2021-01-28 10:09:27 发布
阅读量271 收藏
点赞数
分类专栏： # css 文章标签： 字体位移
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jameskaron/article/details/107671861
版权

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

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

line-height

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

 

 

jameskaron
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS+CSS阿拉伯语（阿语）格式转换
sunshineTing2的博客
05-23 1499
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 1067
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
为什么display:line-block的a标签会加上文字之后会向下移动呢？
littlebird_cl的博客
07-05 6672
1.那是因为第二个标签是inline-block,它的对齐方式是基线对齐，对齐的是第一个元素里面字的下划线，所以第二个元素的下边缘对齐的是1的下划线，只要在第二个元素里面加内容或者加个空格( )就可以了。个人认为inline-block和inline性质一样，只是一个可以设置宽高一个不可以。 2.inline-block的默认对齐方式的问题 inlin
中英文切换导航
qq_14886653的专栏
09-21 687
总结学到的一些新的特效使用css3 及jquery两种方法实现中英文切换导航。 css3版：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>中英文切换导航条</title> <style> *{ padding: 0;
SpringMVC实现中英文切换(通过a便签动态切换)
py1215的博客
08-24 1758
SpringMVC实现中英文切换(通过a便签动态切换) 这个是本人花了几小时解决的一个问题，老师要我们学习 “SpringMVC实现国际化”，我很快找到了清晰易懂的资料，但是自己运行时总是出现各种异常，下面总结以下我这次所遇到的问题（第一次发文，请轻喷） 主要参考这篇博文的代码 其中碰到一个问题，找了好久，然后参考另一篇博文的代码终于可以完美运行 下面先看一下我的工程截图(在下面没有代码的文...
div CSS样式表实现中英文双语切换导航条
11-21
div CSS样式表实现中英文双语切换导航条 div CSS样式表实现中英文双语切换导航条 div CSS样式表实现中英文双语切换导航条 div CSS样式表实现中英文双语切换导航条
CSS3鼠标悬停中英文切换导航
04-06
在“CSS3鼠标悬停中英文切换导航”这个主题中，我们将深入探讨如何利用CSS3的特性来创建一个既美观又实用的导航菜单，特别是在鼠标悬停时实现中英文切换的效果。 首先，CSS3（Cascading Style Sheets Level 3）是...
完全用CSS实现的中英文双语导航菜单
06-06
在这个项目中，我们将利用CSS的伪类选择器、过渡效果和相对定位来实现导航菜单的动态显示。 1. 结构设计： 创建HTML结构，一般使用`<ul>`和`<li>`元素来组织导航菜单，每个链接（`<a>`）包含两个子元素，分别代表...
js 虚拟键盘 支持中英文切换 高灵敏度
08-22
在中英文切换功能上，通常会有一个切换按钮，用户点击后可以改变键盘上的字符集，从英文字符切换到中文拼音或直接显示中文字符。 虚拟键盘的实现可能涉及以下技术点： 1. **事件监听**：使用JavaScript的`...
CSS中文字体对应的英文写法(常用整理)
09-25
在css文件中使用中文字体时在IE6下可能会导致部分样式无法识别，最好的方法就是不要出现中文，包括注释，下面与大家分享下中文字体对应的英文写法
a标签文字下移
qq_38101304的博客
01-28 1994
正常的行内块不会出现位置的变动，但一旦加上文字后，会出现下移现象 1.那是因为第二个标签是inline-block,它的对齐方式是基线对齐，对齐的是第一个元素里面字的下划线，所以第二个元素的下边缘对齐的是1的下划线，只要在第二个元素里面加内容或者加个空格( )就可以了。个人认为inline-block和inline性质一样，只是一个可以设置宽高一个不可以。 2.inline-block的默认对齐方式的问题 inline-block默认对齐方式是底部对齐 加一个vertical-align:top;
CSS中英文换行问题
jokren的博客
12-19 1594
word-break:break-all;只对英文起作用，以字母作为换行依据 word-wrap:break-word; 只对英文起作用，以单词作为换行依据 white-space:pre-wrap; 只对中文起作用，强制换行 white-space:nowrap; 强制不换行，都起作用 white-space:nowrap; overflow:hidden; text-overflow:ell...
Vue ＜a＞标签实现弹窗
sinat_33940108的博客
08-18 2113
前端代码： <template> <a @click="handleAddAssert" >盘点资产</a> <check-task-item-modal ref="CheckTaskItemModal" @ok="modalFormOk"></check-task-item-modal> </template> js代码： import CheckTaskItemModal from './modules/CheckTaskIte
输入文本框内容a标签中的链接自动改变
不求前途凶吉，但求落幕无悔！
11-28 1755
代码<!DOCTYPE html> <html> <head> <title></title> <link href="__STATIC__/layui/css/layui.css" rel="stylesheet" media="all"/> <link href="__STATIC__/base/css/myself.css" rel="stylesheet"/> </h
a标签超出部分隐藏以及设置inline-block后，不在同一水平线上的问题
liaoyingtai的博客
01-03 4352
今天在编写前端代码时，因为需求，需要将标签超出部分隐藏。 在隐藏过程中遇到了一点小问题，顺便记录一下。 原样式： 1.隐藏标签超出部分内容，并显示省略号 代码如下： display:inline-block; width: 500px; overflow: hidden; word-break: keep-all; white-space: nowrap; text-ov
网页中文转英文（国际化）
a510750的专栏
02-08 7536
背景：我的项目是已经完成的项目，因为要拓展海外市场，需要支持英文。采用的方式是添加配置文件，见下文详细步骤。本文基本转自：http://blog.csdn.net/wuhawang/article/details/52228589在他的基础上给大家一点提示补充：1.将需要的js文件与其他公共js一起加载；2.js中部分中文需要改写代码根据按钮取值来显示；3.注意全局方法中的中文名不要忘记替换；4....
css中英文切换动画
最新发布
03-20
在CSS中实现中英文切换动画可以通过以下步骤来实现： 1. 首先，为需要切换的文本元素添加一个类名，例如"language-switch"。 2. 使用CSS的伪类选择器`:lang`来选择不同语言的文本。例如，`:lang(en)`表示选择英文...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值