用CSS控制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