IE下中英文字體下劃線對齊問題-html教學-PHP中文網

首頁

web前端

html教學

IE下中英文字體下劃線對齊問題

巴扎黑

Aug 21, 2017 pm 12:01 PM

ie 底線

先描述問題：如圖所示，在IE下當一行文字同時有英文跟中文的時候，連結下劃線就會發生折行，也就表示這個時候中英文是沒有對齊的！（FIREFOX不受此問題影響）

IE下中英文字體下劃線對齊問題

但是經過測試，預設的直接在頁面裡設定連結的時候是不會出現這個情況的！

程式碼

<!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="/static/imghw/default1.png"  data-src="http://i.mtime.cn/20080731114455/images/logo_main.png"  class="lazy"   
   style="vertical-align:middle;" alt="php中文网" />
   </a> 
   <a href="">为什么我老是对不齐呢？why??</a> 
  </div>  
 </body>
</html>

登入後複製

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>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="/static/imghw/default1.png"  data-src="http://i.mtime.cn/20080731114455/images/logo_main.png"  class="lazy"   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="/static/imghw/default1.png"  data-src="http://i.mtime.cn/20080731114455/images/logo_main.png"  class="lazy"     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="/static/imghw/default1.png"  data-src="http://i.mtime.cn/20080731114455/images/logo_main.png"  class="lazy"   alt="php中文网" /></a> 
   <a href="" style="vertical-align:baseline;">为什么我老是对不齐呢？why??</a> 
  </div>  
 </body>
</html>

登入後複製

　　但是我們可以看到，底線好像貼的過緊，這時候我們依然還需要給它加句zoom:1;觸發它的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 style="vertical-align:middle;"> 
   <a href="http://www.php.cn" id="aa" title="php中文网"><img src="/static/imghw/default1.png"  data-src="http://i.mtime.cn/20080731114455/images/logo_main.png"  class="lazy"   alt="php中文网" /></a> 
   <a href="" style="zoom:1; vertical-align:baseline;">为什么我老是对不齐呢？why??</a> 
  </div>  
 </body>
</html>

登入後複製

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

以上是IE下中英文字體下劃線對齊問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7843

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1240

Related knowledge

底線在鍵盤上怎麼打如何不打字只打底線 Feb 22, 2024 pm 07:46 PM

將輸入法調至英文後按住Shift鍵和減號鍵即可。教學適用型號：聯想AIO520C系統：Windows10專業版版本：MicrosoftOfficeWord2022解析1先檢查輸入法的中英文打字，調整至英文。 2然後同時按住鍵盤上的Shift鍵和減號鍵。 3檢查介面，即可查看已打出的底線。補充：Word文件如何快速輸入底線1如果需要在Word中輸入下劃線，用滑鼠選取空格後，選擇字體選單中選擇底線類型即可輸入。總結/注意事項一定要先將輸入法換至英文再進行操作，否則無法成功輸入底線。

wps文檔空白底線怎麼打不出來該怎麼打底線 Mar 20, 2024 am 09:40 AM

在word上輸入文字時，有時候有些位置需要設定底線，用來說明或著重強調等作用，那麼wps文檔空白下劃線怎麼打不出來？該怎麼打下劃線呢?下面小編就為大家詳細介紹一下，來看看吧。 WPS文件中可以在空白處打下劃線，如圖中的樣式。如何做到呢？詳細操作請往下看。以圖中的文件為例示範如何在空白處打下劃線。遊標放在圖中「姓名」冒號右側，連按鍵盤的空格鍵，為了方便示範小編把字體調大，如下圖：2、然後，遊標到設定的位置後，點住不放手，往左邊拖動，拖到冒號側邊，如圖所示：3、再點「下劃線」圖標，如圖中的箭頭所

excel底線怎麼打出來 Mar 20, 2024 am 08:37 AM

社會的進步，讓科技也取得了快速的發展，電子設備也成了現在辦公的標準配置，如今的辦公軟體種類多樣，excel依然是辦公軟體中常用到的操作，我們有時候在表格裡設置的數據，為了重點突出這些內容，我們會選擇不同顏色字體或是加深字體，有時還會在它下邊標註下劃線進行重點標註，字體很容易設置，但是下劃線不是大家都知道怎麼填加的，小編今天教新手朋友excel下劃線怎麼打。 1.打開Excel，打上幾個文字，如下圖。　　2、選取文字，點選右鍵「設定儲存格格式」選項，如下圖所示。　　3、找到“單下劃線”，並

css a怎麼取消底線 Jan 28, 2023 pm 03:07 PM

css a取消底線的方法：1.建立一個HTML範例檔案；2、在body中新增a標籤；3、透過給指定a標籤新增「#none{text-decoration: none;}」實作取消底線即可。

Internet Explorer 開啟 Edge：如何停止 MS Edge 重新導向 Apr 14, 2023 pm 06:13 PM

長期以來，InternetExplorer的失寵一直不是秘密，但隨著Windows11的到來，現實開始了。 Edge將來不再有時取代IE，它現在是微軟最新作業系統中的預設瀏覽器。目前，您仍然可以在Windows11中啟用InternetExplorer。但是，IE11（最新版本）已經有了一個正式的退役日期，即2022年6月15日，時間在流逝。考慮到這一點，您可能已經注意到InternetExplorer有時會打開Edge，而您可能不喜歡它。那為什麼會這樣呢？在

win11無法使用ie11瀏覽器怎麼辦？ (win11用不了ie瀏覽器) Feb 10, 2024 am 10:30 AM

越來越多的用戶開始升級win11系統，由於每個用戶的使用習慣不同，還是有不少用戶在使用ie11瀏覽器，那麼win11系統用不了ie瀏覽器，該怎麼辦呢？ windows11還支援ie11嗎？下面就來看看解決方法。 win11無法使用ie11瀏覽器的解決方法1、先右鍵開始選單，選擇「命令提示字元（管理員）」開啟。 2.開啟之後，直接輸入“Netshwinsockreset”，回車確定。 3.確定之後再輸入「netshadvfirewallreset&rdqu

Win10開啟IE自動跳到Edge怎麼取消_IE瀏覽器頁面自動跳轉的解決方法 Mar 20, 2024 pm 09:21 PM

近期不少的win10用戶們在使用電腦瀏覽器的時候發現自己的ie瀏覽器總是自動的跳到edge瀏覽器，那麼win10打開ie自動跳轉edge怎麼關閉?。下面就讓本站來為用戶們來仔細的介紹一下win10打開ie自動跳轉edge關閉方法吧。 1.我們登入edge瀏覽器，點選右上角...，找下拉的設定選項。 2.我們進入設定後，在左側欄點選預設瀏覽器。 3.最後我們在相容性中，勾選不允許IE模式下重新載入網站，重啟ie瀏覽器即可。

一個時代的結束：Internet Explorer 11 已退役，這是你需要知道的 Apr 20, 2023 pm 06:52 PM

2022年6月15日是Microsoft結束對InternetExplorer11(IE11)的支援並關閉其舊版瀏覽器章節的日子。一段時間以來，該公司一直在提醒用戶注意這一生命週期結束日期，並呼籲他們計劃遷移到MicrosoftEdge。 Microsoft將IE11與Windows8.1捆綁在一起，作為Windows的現代預設網頁瀏覽器。儘管它從未達到Chrome的（目前）高度，但它是2014年使用量第二大的桌面瀏覽器，僅次於IE8。當然，隨著20

See all articles

IE下中英文字體下劃線對齊問題

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題