網(wǎng)頁的中英文字體對(duì)齊問題的解決

2024-07-11 08:24:54

字體：大中小

供稿：網(wǎng)友

如果不是因?yàn)榭偙O(jiān)審查嚴(yán)格，一定要求這個(gè)細(xì)節(jié)解決掉，也許我也不會(huì)去深究根源性的解決辦法，再此感謝MTIME負(fù)責(zé)而嚴(yán)格的同事。
首先描述一下問題：

如果所示，在IE下當(dāng)一行文字同時(shí)有英文跟中文的時(shí)候，鏈接下劃線就會(huì)發(fā)生折行，也就表示這個(gè)時(shí)候中英文是沒有對(duì)齊的！（FIREFOX不受此問題影響）
但是經(jīng)過測試，默認(rèn)的直接在頁面里設(shè)置鏈接的時(shí)候是不會(huì)出現(xiàn)這個(gè)情況的！
代碼拷貝框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Mtime時(shí)光網(wǎng)</title><style type="text/css">* { margin:0; padding:0; }html { background:#fff; }body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; color:#333; }</style></head><body><div><a href="http://www.mtime.com" id="aa" title="Mtime時(shí)光網(wǎng)"><img src="http://i.mtime.cn/20080731114455/images/logo_main.png" style="vertical-align:middle;" alt="Mtime時(shí)光網(wǎng)" /></a><a href="">為什么我老是對(duì)不齊呢？why??</a></div></body></html>

[Ctrl A 全部選擇然后拷貝]

那么疑惑又來了，是什么導(dǎo)致了中英文偏差呢？！解決辦法又是什么呢？！于是經(jīng)過我測試發(fā)現(xiàn)兩種情況（當(dāng)然有可能有更多導(dǎo)致的情況。你們可以自己去嘗試），當(dāng)中英文對(duì)象的相鄰元素?fù)碛衯ertical-align屬性設(shè)置（比如前面一張小圖片，或者文本框，我們需要把他們垂直對(duì)齊，一般都會(huì)給圖片，文本框（其他任意內(nèi)聯(lián)塊元素）設(shè)置vertical-align:middle;來實(shí)現(xiàn)）的時(shí)候，那么就會(huì)影響到中英文的不對(duì)齊。
還有一種情況就是父元素（表格除外）擁有vertical-align屬性設(shè)置的時(shí)候，里面的子元素中英文也會(huì)對(duì)不齊。
代碼拷貝框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Mtime時(shí)光網(wǎng)</title><style type="text/css">* { margin:0; padding:0; }html { background:#fff; }body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; color:#333; }</style></head><body><div style="vertical-align:middle;"><a href="http://www.mtime.com" id="aa" title="Mtime時(shí)光網(wǎng)"><img src="http://i.mtime.cn/20080731114455/images/logo_main.png" alt="Mtime時(shí)光網(wǎng)" /></a><a href="">為什么我老是對(duì)不齊呢？why??</a></div></body></html>            </SPAN>
</div>
</div>
<div   id="iwvjtn8m0"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="iwvjtn8m0"   class="fenxiang">
<!--分享 -->
<div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1338883.html'>HTML和CSS的關(guān)鍵:盒子模型(Box model)</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1338885.html'>CSS framework日常開發(fā)的經(jīng)驗(yàn)總結(jié)</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>
<!--分享 -->
</div>

<div   id="iwvjtn8m0"   class="pinglun">
<!-- 評(píng)論 -->
<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title">
<tr>
<td><strong>發(fā)表評(píng)論</strong></td>
<td align="right"><a href="/e/pl/?classid=215&id=1338884">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1338884&down=2"></script></span>條評(píng)論</a></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="56%" align="left">用戶名:
<input name="username" type="text" class="inputText" id="username" value="" size="16" /></td>
<td width="44%" align="left">密碼:
<input name="password" type="password" class="inputText" id="password" value="" size="16" /></td>
</tr>
<tr>
<td align="left">驗(yàn)證碼:
<input name="key" type="text" class="inputText" size="10" />
<img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td>
<td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" />
匿名發(fā)表</td>
</tr>
</table>
<textarea name="saytext" cols="70" rows="6" id="saytext">

學(xué)習(xí)交流