MozTW 討論區

各項 Mozilla 相關軟體與技術討論
現在的時間是 2021-04-13, 13:12

所有顯示的時間為 UTC + 8 小時





發表新文章 回覆主題  [ 5 篇文章 ] 
發表人 內容
文章發表於 : 2010-08-03, 23:29 
離線

註冊時間: 2010-08-03, 22:58
文章: 1
目的:
讓網頁的menu選單裡面的文字垂直置中。

目前狀況:
中文比英文高一點,沒辦法垂直置中對齊。

狀況截圖:
圖檔

嘗試:
我試過了 vertical-align 以及 line-height 兩種方式,還是不行

網頁原始碼:
代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
  <div class="header_resize">
    <div class="header">
      <div class="logotop"></div><div class="logomain"></div><div class="logobottom"></div>
      <div class="logotable" align="center"><a href="#" title="">Admin Control Panel</a></div>
      <div class="logotop"></div><div class="logomain"></div><div class="logobottom"></div>
      <div class="clr"></div>
    </div>
  </div>
  <div class="menu_resize">
    <div class="menu">
      <div class="search">
        <form id="form1" name="form1" method="post" action="">
          <span>
            <input name="q" type="text" class="keywords" maxlength="50" value="Search..." />
          </span>
          <input name="b" type="image" src="images/search.gif" class="button" />
        </form>
      </div>
      <ul>
        <li><a href="#" class="active">測試</a></li>   
        <li><a href="#">abc</a></li>
        <li><a href="#">abc</a></li>
        <li><a href="#">abc</a></li>
      </ul>
      <div class="clr"></div>
    </div>
    <div class="clr"></div>
  </div>
  <div class="clr"></div>
</div>
<div class="clr"></div>
<div class="body">
  <div class="body_resize">
    <div class="left">
      <h2>abc</h2>
    </div>
    <div class="right">
        <h2>abc</h2>
       </div>
      <div class="clr"></div>
    </div>
  </div>
  <div class="clr"></div>
  <div class="footer">
    <div class="footer_resize">
      <p class="leftt">abc</p>
      <div class="clr"></div>
    </div>
    <div class="clr"></div>
  </div>
</div>
</body>
</html>


CSS原始碼:
代碼:
@charset "utf-8";
body { margin:0; padding:0; width:100%; background: #000000; color: #ffffff;}
html { padding:0; margin:0;}
.main { margin:0 auto; padding:0;}
/********** header **********/
.header_resize { margin:0; padding:0; background:url(images/header_bg.gif) top repeat-x;}
.header { width:100; padding:0; margin:0 auto; border-bottom:1px solid #484848;}
/* logo */
.logotop { height: 2px; background: #666666 }
.logomain { height: 5px; background: #555555 }

.logotable { background: #555555 }
.logotable a { font-size: 50px; color: #fff; text-decoration: none;}
.logobottom { height: 2px; background: #333333 }

.logotop, .logomain, .logobottom, { line-height: 0px; padding: 0px; }
/*menu*/
.menu_resize { margin:0 auto; padding:0;padding:0;}
.menu { border:1px solid #666666; background:#444444; padding:0; margin:0 auto; height: 37px; line-height:37px;}
.menu ul { padding:0; margin:0; list-style:none; border:0; float:left;}
.menu ul li { float:left; margin-top:5px; padding:0; border:0; border-right:1px solid #666666; height: 27px; line-height:27px;}
.menu ul li a {text-align:left; position:relative; top:10px; height:37px; line-height:37px; color:#ffffff; float:left; margin-top:-5px; padding:0 15px; font:normal 20px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a:hover { background:#000000;}
.menu ul li a.active { }
/* search */
.search { padding:0; margin:0 auto; width:200px; float:right; margin-top:5px;}
.search form { padding:0; margin:0 auto;}
.search span { display:block; float:left; background: url(images/search_bg.gif) left top no-repeat; width:146px; padding:0 5px;}
.search form .keywords { width:146px; line-height:13px; height:13px; float:left; background:none; border:0; padding:7px 0; margin:0; font:normal 15px Arial, Helvetica, sans-serif;}
.search form .button { float:left; margin:0; padding:0;}
/* body */
.body_resize {padding:0; margin:0 auto;}
.body { padding:0; margin:0 auto; border-bottom:1px solid #111;}
.body h2 { font:normal 18px Arial, Helvetica, sans-serif;  padding:20px 5px; margin:0 0 10px 0;}
.body p { font:normal 12px Arial, Helvetica, sans-serif; line-height:1.8em; padding:3px 5px; margin:0;}
.body p span { font: normal 11px Arial, Helvetica, sans-serif;}
.body a { color:#801e14; text-decoration:none;}
.right { width:680px; margin:0; padding:0 10px; float:right;}
.left { width:240px; margin:0; padding:0 10px; float:left;}
/*************footer**********/
.footer { padding:0; margin:0; border-top:1px solid #666666; background:#444444;}
.footer_resize { margin:0 auto; padding:10px 10px;}
.footer p { font:normal 15px  Arial, Helvetica, sans-serif;}
.footer a { font:bold 15px Arial, Helvetica, sans-serif; text-decoration:none; padding:5px; margin:0;}
.footer p.right { text-align:right; width:350px; margin:0; padding:0; float:right;}
.footer p.leftt { text-align:left; width:550px; margin:0; padding:0; float:left;}

p.clr, .clr { clear:both; padding:0; margin:0; background:none;}


附加檔案:
檔案註釋: (圖片文字)
中文字和英文字明顯
沒有對齊,英文字比
中文字稍微偏下方了
一點兒,沒辦法對齊

.png [8.16 KiB]
被下載 2365 次


↓這個 User-Agent 用附加元件改成 IE8 :P 順便加上系統版本


回頂端
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2)
 個人資料  
引用回覆  
文章發表於 : 2010-08-04, 10:54 
離線

註冊時間: 2003-11-18, 10:59
文章: 3473
好像是 bug
把 abc 改成 gql
可以看到下方好像有對齊
可能是中英文的 baseline 不一致
不知道是什麼時候有的 bug
我在 Windows + Fx 3.6.8 測的確如您所回報
但在 Linux + Iceweasel 3.5.9 測試正常

_________________
:::: 簽名檔分隔線 ::::
免費好用又自由的輸入法 gcin Windows | 勸大家以後不要再買 ATI


回頂端
Mozilla/5.0 (Windows; U; Windows NT 6.1; zh-TW; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
 個人資料  
引用回覆  
文章發表於 : 2010-08-04, 11:47 
離線

註冊時間: 2005-02-16, 11:07
文章: 575
測試看起來蠻正常的...
圖檔

正黑體測試:
圖檔


回頂端
Mozilla/5.0 (Windows; U; Windows NT 6.1; zh-TW; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
 個人資料  
引用回覆  
文章發表於 : 2010-08-04, 12:21 
離線

註冊時間: 2003-11-18, 10:59
文章: 3473
alex301 寫:
測試看起來蠻正常的...
圖檔

正黑體測試:
圖檔

上圖不正常,正黑體 ok,我想跟字型有關,如把字型設為英文字型,中文會自動 fallback 到 font.name-list.[sans-serif|serif|monospace].zh-TW 設定的字型,此時基線就沒有對齊。

克難的解決方式,是在 css 中指定英文、中文字型,譬如:
代碼:
.menu ul li a { 20px arial,microsoft jhenghei,Arial,Helvetica,sans-serif;}

不要用新細明體,因為新細明體的基線與 arial 相差較大

_________________
:::: 簽名檔分隔線 ::::
免費好用又自由的輸入法 gcin Windows | 勸大家以後不要再買 ATI


回頂端
Mozilla/5.0 (Windows; U; Windows NT 6.1; zh-TW; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
 個人資料  
引用回覆  
文章發表於 : 2010-08-04, 21:19 
離線

註冊時間: 2003-11-18, 10:59
文章: 3473
先前沒仔細看
alex301 正黑體的圖,英文不是正黑體
所以也是不正常的
像下面這樣才 ok (選單的部分)
圖檔


附加檔案:
檔案註釋: Microsoft Jhenghei
test.png [3.4 KiB]
被下載 2346 次

_________________
:::: 簽名檔分隔線 ::::
免費好用又自由的輸入法 gcin Windows | 勸大家以後不要再買 ATI
回頂端
Mozilla/5.0 (Windows; U; Windows NT 6.1; zh-TW; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
 個人資料  
引用回覆  
顯示文章 :  排序  
發表新文章 回覆主題  [ 5 篇文章 ] 

所有顯示的時間為 UTC + 8 小時


誰在線上

正在瀏覽這個版面的使用者:沒有註冊會員 和 5 位訪客


不能 在這個版面發表主題
不能 在這個版面回覆主題
不能 在這個版面編輯您的文章
不能 在這個版面刪除您的文章
不能 在這個版面上傳附加檔案

搜尋:
前往 :  
cron
Powered by phpBB® Forum Software © phpBB Group
正體中文語系由 竹貓星球 維護製作
© moztw.org, Mozilla Foundation
MozTW,Mozilla 台灣社群