html字体整体偏移,网页的中英文字体对齐问题的解决
如果不是因为总监审查严格,一定要求这个细节解决掉,也许我也不会去深究根源性的解决办法,再此感谢MTIME负责而严格的同事。
首先描述一下问题:
如果所示,在IE下当一行文字同时有英文跟中文的时候,链接下划线就会发生折行,也就表示这个时候中英文是没有对齐的!(FIREFOX不受此问题影响)
但是经过测试,默认的直接在页面里设置链接的时候是不会出现这个情况的!
代码拷贝框
Mtime时光网
* { margin:0; padding:0; }
html { background:#fff; }
body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; color:#333; }
为什么我老是对不齐呢?why??
[Ctrl A 全部选择 然后拷贝]
那么疑惑又来了,是什么导致了中英文偏差呢?!解决办法又是什么呢?!于是经过我测试发现两种情况(当然有可能有更多导致的情况。你们可以自己去尝试),当中英文对象的相邻元素拥有vertical-align属性设置(比如前面一张小图片,或者文本框,我们需要把他们垂直对齐,一般都会给图片,文本框(其他任意内联块元素)设置vertical-align:middle;来实现)的时候,那么就会影响到中英文的不对齐。
还有一种情况就是父元素(表格除外)拥有vertical-align属性设置的时候,里面的子元素中英文也会对不齐。
代码拷贝框
Mtime时光网
* { margin:0; padding:0; }
html { background:#fff; }
body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; color:#333; }
为什么我老是对不齐呢?why??
[Ctrl A 全部选择 然后拷贝]
怎么解决这个问题呢?!
先说第一种,就是临近元素的vertical-middle导致的无法对齐的偏差问题解决方案:
给中英文对象加一个zoom:1触发它的haslayout,通过研究发现一旦它有了haslayout之后,中英文就不会对不齐。
代码拷贝框
Mtime时光网
* { margin:0; padding:0; }
html { background:#fff; }
body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; color:#333; }
为什么我老是对不齐呢?why??
[Ctrl A 全部选择 然后拷贝]
第二种情况就是父元素的vertical-middle导致的无法对齐的偏差问题解决方案:
给中英文对象加句vertical-align:baseline就可以解决!
代码拷贝框
Mtime时光网
* { margin:0; padding:0; }
html { background:#fff; }
body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; color:#333; }
为什么我老是对不齐呢?why??
[Ctrl A 全部选择 然后拷贝]
但是我们可以看到,下划线好像贴的过紧,这个时候我们依然还需要给它加句zoom:1;触发它的hasLayout来避免过紧贴合!。
代码拷贝框
Mtime时光网
* { margin:0; padding:0; }
html { background:#fff; }
body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; color:#333; }
为什么我老是对不齐呢?why??
[Ctrl A 全部选择 然后拷贝]
如果您碰到其他情况的中英文对不齐的情况,那么也可以尝试使用上述两种方法来解决。当然最保险最有效的莫过于就是直接中英文都统一使用宋体。
html字体整体偏移,网页的中英文字体对齐问题的解决相关推荐
- html字体整体偏移,CSS自定义字体垂直偏移(错误?)
ScottS.. 5 你可能没有做错任何事情.以下是一些可能适用的要点,有些可以由您控制,有些则不可以. 只是为了确定,明确设置vertical-align: baseline. 不同的文件(.eof ...
- html 中英文字体自动,用ASP实现中英文字体的自动选择-ASP教程,ASP应用
用asp实现中英文字体的自动选择 在windows系统中,每一种语言的字符的显示都有对应的默认字体,例如在大部分的应用程序中,简体中文(gb2312)字符默认的显示字体是"宋体", ...
- Java设置中文字体大小_eclipse中文字体大小修改,让中英文字体协调
貌似有不少人苦恼eclipse中文字体大小修改问题,默认的eclipse中文字体很小,和英文字体大小完全不在一个调子上,因为默认的eclipse juno中英文字体是Consolas,字体大小是10, ...
- html字体整体偏移,html/css:在悬停鼠标时增加字体大小的链接时的位置偏移
我发现这是一个完美的简单解决方案上win7为我工作的Chrome,IE和Firefox. 我把一个表,一个小区具有相同width和height作为(其是图像的尺寸)的链路()的内部. 也提出了表格:t ...
- ttc转换ttf字体在线_R 语言画图中英文字体解决方案
在某些时候,需要在 R 画图中添加中文,但是默认情况下,R 对中文的支持不好.这里推荐一个showtext的 R 包.如果需要将含有中文字体的图形保存为 pdf 文件,可以使用下面讲到的方案,最新版的 ...
- idea修改回默认字体,设置 IntelliJ Idea 的中英文字体
这是一篇2013年09月份的草稿,一直没有发布,今天翻出来,好好整理下. Eclipse 还没有用熟练的时候,我就开始投入到 IntelliJ Idea 的怀抱了,习惯后真的很方便,界面看着也舒服. ...
- 16个使用精美字体的欧美网页设计欣赏
16个使用精美字体的欧美网页设计欣赏 原文 http://www.shejidaren.com/16-websites-typography.html 字体漂亮或者整体不错的网站我们已经展示了很多. ...
- 网页设计师的字体替换方法指南
写在这篇文章之前:中文网页字体的窘境 在国外的设计师幸福地讨论着如何不用图片进行字体替换时,当Google Proudly地提供越来越多的web fonts时,使用中文的网页设计师只能发出一声叹息.中 ...
- Py之Matplotlib:python包之Matplotlib库图表绘制经验总结(中英文字体修改、横坐标文字进行横/纵向显示、控制坐标轴范围等)之详细攻略
Py之Matplotlib:python包之Matplotlib库图表绘制经验总结(中英文字体修改.横坐标文字进行横/纵向显示.控制坐标轴范围等)之详细攻略 目录 1.Matplotlib库图表绘制包 ...
最新文章
- python【数据结构与算法】最大上升子序列(简单dp)
- Java 向上类型转换与向下类型转换的理解【复习】
- MySQL—不相关子查询(单行子查询)
- LSMW批处理使用方法(06)_步骤4、5
- Codeforces Round #163 (Div. 2) C. Below the Diagonal 分治
- VS中C++ 项目重命名
- ubuntu tomcat安装环境变量配置
- php知识点_php中一些重要的php知识点分享
- 帆软报表在已经搭载服务器上开发_史上最全企业数据产品选型对比(含数仓、报表、BI、中台、数据治理)...
- 移动的宽带真的很垃圾
- 不同域名指向静态图片文件
- 《最后的风之子/神风终极战士》1024*576分辨率 BD中英双字无水印
- echart制作环形图
- Delphi 编译的程序在win10中怎样默认以管理员身份运行
- 我们学校一牛老师的语录
- 微信小程序:block制作动态商品列表
- 狼羽网络:创建病毒产品的5种方法
- PLC模拟量数据的处理
- 旋转编码器的原理和使用方法
- screentogif 录屏
热门文章
- java el 表达式_Javaweb之EL表达式
- 一个按年季度查询数据的SQL语句
- 滴滴C2C模式隐忧暴露,神州专车却仍无力逆风翻盘?
- vscode网页显示_vscode怎么打开浏览器
- sql语句实现行转列的3种方法
- Linux聊天室项目知识整理(一)
- matlab运算5 10,我用matlab计算 10^(-5) 减去 0.00001为什么不是0 呢?
- pythonic词源_python的意思在线翻译,解释python中文英文含义,短语词组,音标读音,词源【澳典网ODict.Net】...
- 常用WebServices 天气,IP,邮编,Email,火车时刻表,股票 web接口服务
- 逗号算命系统 v1.02