中国设计联盟
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
网站建设 域名注册 网站建设 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计  虚拟主机 域名注册 acg王国 ACG玩家
求创科技
网站建设
中国福网
中国互联
艺魂宝库网
时代网
招聘求职
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> 解决英文字体和中文字体不能对齐

解决英文字体和中文字体不能对齐

来源:中国设计秀    作者:佚名    点击:327     加入收藏
  先描述一下问题:

  如图所示,当一行文字同时有英文跟中文的时候,链接下划线就会发生折行,也就表示这个时候中英文是没有对齐的!

  但是经过测试,默认的直接在页面里设置链接的时候是不会出现这个情况的!

  那么疑惑又来了,是什么导致了中英文偏差呢?!解决办法又是什么呢?!于是经过我测试发现两种情况(当然有可能有更多导致的情况。你们可以自己去尝试),当中英文对象的相邻元素拥有vertical-align属性设置(比如前面一张小图片,或者文本框,我们需要把他们垂直对齐,一般都会给图片,文本框(其他任意内联块元素)设置vertical-align:middle;来实现)的时候,那么就会影响到中英文的不对齐。还有一种情况就是父元素(表格除外)拥有vertical-align属性设置的时候,里面的子元素中英文也会对不齐。
 
  怎么解决这个问题呢?!
 
  第一种,就是临近元素的vertical-middle导致的无法对齐的偏差问题解决方案:给中英文对象加一个zoom:1触发它的haslayout,通过研究发现一旦它有了haslayout之后,中英文就不会对不齐。
 
  第二种情况就是父元素的vertical-middle导致的无法对齐的偏差问题解决方案:给中英文对象加句vertical-align:baseline就可以解决了!
 
  如果您碰到其他情况的中英文对不齐的情况,那么也可以尝试使用上述两种方法来解决。当然最保险最有效的莫过于就是直接中英文都统一使用宋体。

0
顶一下
2008-06-21 00:36:00    出处:中国设计秀cnwebshow.com
Google
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口