Home Web Front-end HTML Tutorial Problem with underline alignment in Chinese and English fonts under IE

Problem with underline alignment in Chinese and English fonts under IE

Aug 21, 2017 pm 12:01 PM
ie Underline

First describe the problem: As shown in the picture, when a line of text contains both English and Chinese under IE, the link underline will break, which means that the Chinese and English are not aligned at this time! (FIREFOX is not affected by this problem)

Problem with underline alignment in Chinese and English fonts under IE

However, after testing, this situation will not occur when the link is set directly on the page by default!

Code

<!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>
Copy after login

Problem with underline alignment in Chinese and English fonts under IE

Then the doubt comes again, what causes the deviation between Chinese and English? ! What's the solution? ! So after my testing, I found two situations (of course there may be more causing situations. You can try it yourself). The adjacent elements of the Chinese and English objects have the vertical-align attribute setting (such as the previous small picture, or the text box , we need to align them vertically. Generally, when we set vertical-align:middle; for pictures and text boxes (any other inline block elements)), it will affect the misalignment of Chinese and English.

Another situation is that when the parent element (except the table) has the vertical-align attribute set, the Chinese and English of the child elements inside will not be aligned.

Code

##
<!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>
Copy after login
How to solve this problem? !
Let’s talk about the first one, which is the solution to the deviation problem that cannot be aligned due to the vertical-middle of adjacent elements: Add a zoom:1 to the Chinese and English objects to trigger its haslayout. Through research, we found that once it has a haslayout, There will be no misalignment between Chinese and English.

Code box


##
<!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>
Copy after login
The second case is The solution to the misalignment problem caused by the vertical-middle of the parent element: Add the sentence vertical-align:baseline to the Chinese and English objects to solve the problem!

Code box


<!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>
Copy after login
But we can see that the underline looks like If it is too tight, we still need to add zoom:1; to trigger its hasLayout to avoid being too tight!
Code box


##
<!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>
Copy after login
If you encounter other situations, is it correct in Chinese and English? If the situation is uneven, you can also try to use the above two methods to solve the problem. Of course, the safest and most effective thing is to use Song font in both Chinese and English.
-->

The above is the detailed content of Problem with underline alignment in Chinese and English fonts under IE. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to type underline on the keyboard? How to type only underline without typing? How to type underline on the keyboard? How to type only underline without typing? Feb 22, 2024 pm 07:46 PM

Adjust the input method to English and hold down the Shift key and the minus key. Applicable model of the tutorial: Lenovo AIO520C System: Windows 10 Professional Edition: Microsoft Office Word 2022 Analysis 1 First check the Chinese and English typing of the input method and adjust it to English. 2Then hold down the Shift key and the Minus key on your keyboard at the same time. 3 Check the interface to see the underlined words. Supplement: How to quickly enter underline in Word document 1. If you need to enter an underline in Word, select the space with the mouse, then select the underline type in the font menu to enter. Summary/Notes: Be sure to change the input method to English before proceeding, otherwise the underscore cannot be successfully entered.

Why can't the blank underline in the wps document be printed? How should I underline it? Why can't the blank underline in the wps document be printed? How should I underline it? Mar 20, 2024 am 09:40 AM

When entering text in Word, sometimes some positions need to be underlined to explain or emphasize. So why can't the blank underline in the WPS document be printed? How should I underline? The editor will introduce it to you in detail below, let’s take a look. In WPS documents, you can underline the blank spaces, as shown in the figure. How to do it? Please read below for detailed operations. Take the document in the picture as an example to demonstrate how to underline the blank space. Place the cursor on the right side of the colon of &quot;Name&quot; in the picture, and press the space bar on the keyboard. In order to facilitate the demonstration, I have increased the font size, as shown below: 2. Then, after the cursor reaches the set position, click and hold without letting go, and move to Drag on the left to the side of the colon, as shown in the picture: 3. Then click the &quot;underline&quot; icon, as indicated by the arrow in the picture.

How to type underline in Excel How to type underline in Excel Mar 20, 2024 am 08:37 AM

With the progress of society, technology has also developed rapidly, and electronic equipment has become a standard configuration in today's office. There are various types of office software today. Excel is still a commonly used operation in office software. We sometimes set settings in tables. In order to highlight these contents, we will choose different color fonts or deepen the fonts, and sometimes underline them for emphasis. The fonts are easy to set, but not everyone knows how to add underlines. Editor Today I will teach my novice friends how to underline in excel. 1. Open Excel and type a few words, as shown in the picture below. 2. Select the text, right-click and select &quot;Format Cells&quot; option, as shown in the figure below. 3. Find “single underline” and

How to remove underline in css a How to remove underline in css a Jan 28, 2023 pm 03:07 PM

How to cancel the underline in css a: 1. Create an HTML sample file; 2. Add the a tag to the body; 3. Cancel the underline by adding "#none{text-decoration: none;}" to the specified a tag.

Internet Explorer opens Edge: How to stop MS Edge redirection Internet Explorer opens Edge: How to stop MS Edge redirection Apr 14, 2023 pm 06:13 PM

It's no secret that Internet Explorer has fallen out of favor for a long time, but with the arrival of Windows 11, reality sets in. Rather than sometimes replacing IE in the future, Edge is now the default browser in Microsoft's latest operating system. For now, you can still enable Internet Explorer in Windows 11. However, IE11 (the latest version) already has an official retirement date, which is June 15, 2022, and the clock is ticking. With this in mind, you may have noticed that Internet Explorer sometimes opens Edge, and you may not like it. So why is this happening? exist

What should I do if win11 cannot use ie11 browser? (win11 cannot use IE browser) What should I do if win11 cannot use ie11 browser? (win11 cannot use IE browser) Feb 10, 2024 am 10:30 AM

More and more users are starting to upgrade the win11 system. Since each user has different usage habits, many users are still using the ie11 browser. So what should I do if the win11 system cannot use the ie browser? Does windows11 still support ie11? Let’s take a look at the solution. Solution to the problem that win11 cannot use the ie11 browser 1. First, right-click the start menu and select "Command Prompt (Administrator)" to open it. 2. After opening, directly enter "Netshwinsockreset" and press Enter to confirm. 3. After confirmation, enter "netshadvfirewallreset&rdqu

How to cancel the automatic jump to Edge when opening IE in Win10_Solution to the automatic jump of IE browser page How to cancel the automatic jump to Edge when opening IE in Win10_Solution to the automatic jump of IE browser page Mar 20, 2024 pm 09:21 PM

Recently, many win10 users have found that their IE browser always automatically jumps to the edge browser when using computer browsers. So how to turn off the automatic jump to edge when opening IE in win10? Let this site carefully introduce to users how to automatically jump to edge and close when opening IE in win10. 1. We log in to the edge browser, click... in the upper right corner, and look for the drop-down settings option. 2. After we enter the settings, click Default Browser in the left column. 3. Finally, in the compatibility, we check the box to not allow the website to be reloaded in IE mode and restart the IE browser.

How to solve the problem that IE shortcut cannot be deleted How to solve the problem that IE shortcut cannot be deleted Jan 29, 2024 pm 04:48 PM

Solutions to IE shortcuts that cannot be deleted: 1. Permission issues; 2. Shortcut damage; 3. Software conflicts; 4. Registry issues; 5. Malicious software; 6. System issues; 7. Reinstall IE; 8. Use third-party tools; 9. Check the target path of the shortcut; 10. Consider other factors; 11. Consult professionals. Detailed introduction: 1. Permission issue, right-click the shortcut, select "Properties", in the "Security" tab, make sure you have sufficient permissions to delete the shortcut. If not, you can try running as an administrator, etc.

See all articles