但是經過測試,預設的直接在頁面裡設定連結的時候是不會出現這個情況的!
程式碼
<!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>php中文网</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.php.cn" id="aa" title="php中文网"><img src="http://i.mtime.cn/20080731114455/images/logo_main.png" style="vertical-align:middle;" alt="php中文网" /> </a> <a href="">为什么我老是对不齐呢?why??</a> </div> </body> </html>
那麼疑惑又來了,是什麼導致了中英文偏差呢? !解決方法又是什麼呢? !於是經過我測試發現兩種情況(當然有可能有更多導致的情況。你們可以自己去嘗試),當中英文對象的相鄰元素擁有vertical-align屬性設置(比如前面一張小圖片,或者文本框,我們需要把他們垂直對齊,一般都會給圖片,文本框(其他任意內聯塊元素)設置vertical-align:middle;來實現)的時候,那麼就會影響到中英文的不對齊。
還有一種情況就是父元素(表格除外)擁有vertical-align屬性設定的時候,裡面的子元素中英文也會對不齊。
程式碼
#<!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>php中文网</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.php.cn" id="aa" title="php中文网"><img src="http://i.mtime.cn/20080731114455/images/logo_main.png" alt="php中文网" /></a> <a href="">为什么我老是对不齐呢?why??</a> </div> </body> </html> 登入後複製 |
先說第一種,就是臨近元素的vertical-middle導致的無法對齊的偏差問題解決方案: 給中英文對象加一個zoom:1觸發它的haslayout,通過研究發現一旦它有了haslayout之後,中英文就不會對不齊。
程式碼方塊
#<!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>php中文网</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.php.cn" id="aa" title="php中文网"> <img src="http://i.mtime.cn/20080731114455/images/logo_main.png" style="max-width:90%" alt="php中文网" /></a> <a href="" style="zoom:1;">为什么我老是对不齐呢?why??</a> </div> </body> </html> 登入後複製 |
第二種情況就是父元素的vertical-middle導致的無法對齊的偏差問題解決方案: 給中英文物件加句vertical-align:baseline就可以解決!
程式碼框
#<!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>php中文网</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.php.cn" id="aa" title="php中文网"><img src="http://i.mtime.cn/20080731114455/images/logo_main.png" alt="php中文网" /></a> <a href="" style="vertical-align:baseline;">为什么我老是对不齐呢?why??</a> </div> </body> </html> 登入後複製 |
程式碼框
<!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>php中文网</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.php.cn" id="aa" title="php中文网"><img src="http://i.mtime.cn/20080731114455/images/logo_main.png" alt="php中文网" /></a> <a href="" style="zoom:1; vertical-align:baseline;">为什么我老是对不齐呢?why??</a> </div> </body> </html> 登入後複製 如果您碰到其他情況的中英文對不齊的情況,那麼也可以嘗試使用上述兩種方法來解決。當然最保險最有效的莫過於就是直接中英文都統一使用宋體。 以上是IE下中英文字體下劃線對齊問題的詳細內容。更多資訊請關注PHP中文網其他相關文章! 本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
透過新增 Width 屬性將內容向左移動
我已經為主體提供了邊距。主要{左邊緣:200px;右邊距:200px;文本對齊:居中}由於我想以兩行而不是一行顯示文本,因此我在樣式中添加了width屬性。 .p{字體大小:12p...
來自於 2024-04-06 22:01:35
0
3
816
頁面突然無法拉動 css 或 bootstrap
所以我正在開發一個頁面,我昨天做了一部分,效果很好,今天我繼續做剩下的部分,一切都很好。當我嘗試將其作為普通html頁面打開時,CSS或BOOTSTRAP不起作用,僅顯示頁面文本,...
來自於 2024-04-06 21:58:04
0
1
800
有沒有辦法強制彈性框中的文字垂直居中,無論我們有什麼其他 CSS 程式碼?
我有以下CSS程式碼,它是我正在開發的網站中使用的更大CSS程式碼的一部分:.cards-u{display:flex;flex-wrap:wrap;justify-content...
來自於 2024-04-06 20:41:51
0
1
518
MySQL:'從......中選擇文字作為<此處變數或子查詢>”
我有下表,其中包含以下數據:id文本語言1德語文本德語2英文文本英語我想要的是獲得以下格式的結果:german="deutschertext"english=&...
來自於 2024-04-06 19:25:54
0
2
529
熱門教學
更多>
|