1. 程式人生 > >用CSS控制IE下中英文字型顯示對齊

用CSS控制IE下中英文字型顯示對齊

這是一個不太引人注意的問題,在IE瀏覽器下面中英文字型混排的時候,常常會出現不對齊的情況。
那麼疑惑又來了,是什麼導致了中英文偏差呢?!解決辦法又是什麼呢?!於是經過我測試發現兩種情況(當然有可能有更多導致的情況。你們可以自己去嘗 試),當中英文物件的相鄰元素擁有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>Test</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="">為什麼我老是對不齊呢?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>Test</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="" 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>Test</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="" style="vertical-align:baseline;">為什麼我老是對不齊呢?why??</a>
</div>
</body>
</html>


  但是我們可以看到,下劃線好像貼的過緊,這個時候我們依然還需要給它加句zoom:1;觸發它的hasLayout來避免過緊貼合!。

<a href="" style="zoom:1;"vertical-align:baseline;">為什麼我老是對不齊呢?why??</a>

  如果您碰到其他情況的中英文對不齊的情況,那麼也可以嘗試使用上述兩種方法來解決。當然最保險最有效的莫過於就是直接中英文都統一使用宋體

相關推薦

CSS控制IE中英文字型顯示

這是一個不太引人注意的問題,在IE瀏覽器下面中英文字型混排的時候,常常會出現不對齊的情況。那麼疑惑又來了,是什麼導致了中英文偏差呢?!解決辦法又是什麼呢?!於是經過我測試發現兩種情況(當然有可能有更多導致的情況。你們可以自己去嘗 試),當中英文物件的相鄰元素擁有vertica

btn劃線 字型

    NSString *appleNum = [NSString stringWithFormat:@"%@",ObjectToNumber(model.amount)];     // 下劃線     NSDictiona

學習19 css控制文字樣式

text utf har 文字 weight title color eight pan <!doctype html> <html> <head> <meta charset="utf-8"> <title>認

JPG 圖片在IE不能顯示的問題

可能 軟件 保存 低版本 body 不同 cnblogs ps軟件 正常 最近碰到一些客戶說,我傳的產品圖片怎麽在網站上無法顯示啊。圖片也是正常的jpg格式呢。 是的,你傳的圖片是JPG的,但是怎麽就顯示不出來呢? 你找深圳網站建設的公司給你建了一個網站,然後

關於IE英文字型跟中文字型不能的根源以及解決辦法

問題描述: 在IE下當一行文字同時有英文跟中文的時候,連結下劃線就會發生折行,也就表示這個時候中英文是沒有對齊的!(FIREFOX不受此問題影響)   但是經過測試,預設的直接在頁面裡設定連結的時候是不會出現這個情況的!   <!DOCTYPE html PUBLIC

wine應用程式字型顯示問題

在網上搜索了一下相關的問題。可以參考下面的文章。 http://blog.csdn.net/zengxyuyu/article/details/54620104 1、準備字型 為了讓 Windows 應用程式看上去更美觀,所以需要 Windows 下面的字型。 到w

嵌入式Linux中文字型顯示

By Toradex 胡珊逢 1). 簡介 嵌入式平臺預設釋出的嵌入式Linux版本通常並不包含中文字型支援,本文就通過Toradex計算機模組平臺來演示如何新增中文字型的顯示,因為Toradex的Linux釋出是基於OpenEmbedded/Yocot 專案編譯的,因此這

hack css編寫ie才生效的css

CSS hack方式二:類內屬性字首法 屬性字首法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack字首,以達到預期的頁面展現效果。 IE瀏覽器各版本 CSS hack 對照表 hack 寫法 例項 IE6(S) IE6(Q) IE7(S) IE7(

ckplayer的z-index調整,ckplayer在ie的視訊顯示優先順序最高,ckplayer的視訊優先順序在谷歌中正常

ckplayer 播放器和一個高優先順序(z-index)顯示的div在同一個介面,兩者在同一位置時,在谷歌中z-index大的div浮於視訊上方,在ie中則相反。 解決方式: 在ckplayer.js 中修改這個函式,新增一個屬性即可: getparam: fun

利用CSS控制表格顏色的交替顯示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><style type="text/css">  <!--  TABLE.

ubuntu 11.10英文介面中文字型顯示楷體的問題

/etc/fonts 下面有兩個目錄,conf.avail 和conf.d 。真正配置系統的檔案全部放在conf.d (準確的說是系統檢測配置檔案只檢測該資料夾),但是裡面的檔案多數是連結(符號連結)到conf.avail 裡面的相應檔案。conf.avail 裡面的檔案是大雜燴,中文簡體繁體、日文韓文那些的

python學習之網站的編寫(HTML,CSS,JS)(十三)----------CSS字型方式的設定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>逆水行舟不進則退</title> </head> <b

CSS 拉內容的方式

<!DOCTYPE html > <html> <head> <meta charset="utf-8"> <title>自學教程

css中text-align:justify文字兩端ie相容屬性text-justify

在css中使用text-align:justify可以使文字兩端對齊。現在我們來看一個例子。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" cont

SylixOS ARM平臺的內存訪問

硬件 一個 空間 不同 我們 宏定義 順序 ifdef 32位 1.內存對齊1.1 內存對齊概要現代計算機中內存空間都是按照byte劃分的,從理論上講對任何類型的變量的訪問可以從任何地址開始,但實際情況是在訪問特定變量的時候經常在特定的內存地址訪問,這就需要各類型數

css文字少時居中,多時左

參考文件:https://demo.cssworld.cn/3/2-5.php   .box{ width: 200px; height: 100px; text-align: center; background: red;}.content{ display:

NV12剪區域時的程式碼

如果沒有對齊,底邊有時顏色會有點問題(比如綠色)。 所以專門寫了程式碼進行對齊。 #define NV12_PACK 2 //如果沒有對齊,NV12無法生成JPG,或者底邊顏色異常。對齊時要避免剪下區域變小。 int clipNv12Pack(int* pnClipLe

自定義View指示器讓指示器劃線和文字

指示器的標籤分為兩種情形,一種是固定的一般3~5個標籤,另一種的移動的標籤;開發中經常會使用MD風格的TabLayout控制元件,這個控制元件什麼都很好,就是指示器的下滑線和文字不能夠對齊,這一點用過的同學都會知道的,我也在網上找了好久,也找到不到現成的,只好自

字型兩端,相容ios和安卓系統

這是小編要的效果: 在安卓和ios系統下面都可以實現效果 HTML: <div class="text-align"> <p>姓名</p> <p>

CSS:文字樣式(縮排//字元間隔/文字裝飾/空白格處理)

通過CSS樣式,可以設定文字的縮排,對齊,字元間隔等屬性。 程式碼整理自w3school:http://www.w3school.com.cn <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN