不知道大家在使用IE浏览器进行css测试时，是否遇到这样一个问题：当进行中英文混合排版时，设置好的内边距属性出现偏差，导致英文和中文的行高不一样。小编就遇到过，那么为什么会出现这种情况呢？下面小编为大家简单分析一下其产生的原因。

对于产生行高不一样的原因，小编觉得关键在于中英文混合编排，所以我们不妨先分别看看全中文和全英文排版时行高的情况。

首先我们看一下全中文排版的情况，如果对文字选中，我们从背景上看上去，下面多了一部分，由此可知文本中的汉字是上对齐的。即用css术语讲就是产生了padding-bottom属性。

全中文是上对齐，那么全英文又是什么情况呢？全英文和全中文刚刚相反，是下对齐。即会出现类似padding-top的属性。

所以，这时不管是全中文还是全英文排版，行高都能保持一致。

了解了全中文和全英文排版的对齐方式后，可能你也猜到为什么把它们混合在一起会出现了行高不一样的原因了。就是因为中文与英文的对齐方式不一样，混合之后，整行文字的内边距就变为padding=padding-top+padding-bottom,相当于无形中多了一个padding-top或者padding-bottom。这样行高又怎么会一样呢？

知道产生的原因之后，我们就可以研究其解决的方法了。本来小编想使用line-height属性进行固定的，但是实践证明因为汉字的基线和英文字母不一样，所以起不到作用。那该怎么办呢？小编想到的办法是，从字体上下手，修改font-family属性。小编设置的字体是“simsun”，即我们耳熟能详的宋体，只是改用英文名字而已。

由于能力有限，改变字体是目前小编想到的唯一解决办法，但这个办法也不是太完善，它在一定程度会丢失一些效果。所以如果大家有什么更好的方法千万要记得留言给小编喔！

css中英文混排 标点,浅析css中英文混排时行高不一样的原因及其解决方法相关推荐

  1. html行高设置失效,科技常识：关于css中line-height(行高)设置无效的问题的解决方法...

    今天小编跟大家讲解下有关关于css中line-height(行高)设置无效的问题的解决方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关关于css中line-height(行高)设置无效 ...

  2. html行高设置失效,关于css中line-height(行高)设置无效的问题的解决方法

    关于css中line-height(行高)设置无效的问题 我们先写下这一串代码: Document .head{ height: 100px; text-align: center; line-hei ...

  3. html中英文混排,EndNote中英文混排时et al和等的3种解决方法 | 科研动力

    EndNote对于英文文献的处理很出色,但是对于中文文献的处理就有点别扭,尤其是中英文文献混排时更是不爽.木有关系,EndNote的强大这处之一就是可以驯服和调教.下面介绍3种如何处理中英文混排时et ...

  4. [css] 父元素下有子元素，子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法

    [css] 父元素下有子元素,子元素也有高度但父元素的高度为何为0呢?分析下可能出现的原因及解决方法 父元素塌陷父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流以后,将无法撑起父元素的高度 ...

  5. php垂直对齐,CSS垂直对齐不起作用的原因及解决方法

    verticla-align用于调整内联元素的垂直位置,但是有时候它不起作用,本篇文章将来给大家分享关于CSS垂直对齐不起作用的原因和解决方法. 我们先来分析一下导致垂直对齐无效的原因 我想很多人都会 ...

  6. html设置margin无效,CSS中margin不起作用的原因及解决方法

    margin是一个属性,指定元素和元素之间的间距,但不能为内联元素指定边距,本篇文章将给大家介绍关于CSS中margin不起作用的原因及解决方法. margin不起作用的原因 对于初学者来说,可能会经 ...

  7. html打印预览首行缩进样式无效,css首行缩进没有效果的原因及解决办法

    css首行缩进没有效果的原因及解决办法 发布时间:2020-12-23 09:52:37 来源:亿速云 阅读:69 作者:小新 这篇文章将为大家详细讲解有关css首行缩进没有效果的原因及解决办法,小编 ...

  8. ci框架中引入css,php ci框架中加载css和js文件失败的原因和解决方法

    php ci框架中加载css和js文件失败的原因和解决方法 发布时间:2021-07-01 12:08:38 来源:亿速云 阅读:50 作者:chen 本篇内容介绍了"php ci框架中加载 ...

  9. 炉石服务器不稳定,炉石传说服务器炸了什么问题 一直排不到人原因和解决方法...

    炉石传说服务器炸了什么问题呢?每次新的版本带给玩家众多新的问题,那么具体服务器因为什么问题呢?小编今天给大家全面介绍这个问题,下文就是具体解决方法,详细看看下文了解. 炉石传说一直排不到人原因和解决方 ...

最新文章

  1. FTP与TFTP的区别
  2. 荣发护肤护甲增强配方 Hair, Skin and Nails Plus 100 tablets
  3. JAVA Roman to Integer 罗马数转换为int型方法
  4. 电子产品设计流程_指纹锁生产的八大工序流程
  5. My github blog
  6. 数据库的设计与连接、站点的搭建
  7. flask blueprint
  8. Sentinel流控规则_预热_分布式系统集群限流_线程数隔离_削峰填谷_流量控制_速率控制_服务熔断_服务降级---微服务升级_SpringCloud Alibaba工作笔记0036
  9. Beetl模板 [记录]
  10. CocoaPods pod install的时候报错：invalid byte sequence in UTF-8 (ArgumentError)解决办法
  11. Car2go 的前端框架选择
  12. mui的实例项目源码_Spring Boot 2.x 启动全过程源码分析
  13. html 实现商品添加减少,jq实现点击增加或者减少商品数量并且自动计算总价格...
  14. 2022 年面试工具篇 Jmeter 接口面试题及答案
  15. 生命游戏(康威的生命游戏) Game Of Life - Conway Cocos Creator 3.x版实现
  16. 初中计算机 课题研究,初中信息技术的教研课题题目
  17. 两台电脑使用一根网线直连传输文件
  18. React实现递归组件
  19. 【STM32】标准库-以太网外设-LAN8720A-LWIP-无操作系统
  20. Elasticsearch 索引模板

热门文章

  1. android视频压缩框架,GitHub - tangpeng/VideoCompressor: Android 使用自带的MediaCodec 框架进行本地视频压缩，速度嗖嗖的，亲测有效！！！...
  2. w3cc离线版手册_web前端入门必备手册，离线w3school参考手册
  3. git 撤销merge_相见恨晚的 Git 命令动画演示，一看就懂！
  4. mysql utf8mb4 php_MySQL设置utf8mb4编码_MySQL
  5. java 读取数据库输出_java 读取数据库数据转化输出XML输出在jsp页面
  6. 曹讯 计算机摄像学,计算摄像学： 全光视觉信息的计算采集
  7. oracle中定义表类型数据,oracle 定义表字段域的数据类型
  8. go sqlite mysql_Go实战--go语言操作sqlite数据库(The way to go)
  9. cpu开机就是60℃_注意，制冷机组开机前这些检查很重要
  10. 缩略图修复_如何解决SOLIDWORKS不显示缩略图预览的方法?