Este é um problema menos perceptível. Quando as fontes chinesas e inglesas são misturadas no navegador IE, geralmente ocorre desalinhamento.
Então surge novamente a dúvida, o que causa o desvio entre o chinês e o inglês? ! Qual é a solução? ! Então, após meus testes, encontrei duas situações (é claro que pode haver mais situações causadoras. Você pode tentar você mesmo. Os elementos adjacentes dos objetos chineses e ingleses têm a configuração de atributo de alinhamento vertical (como a imagem pequena anterior). ou a caixa de texto, precisamos alinhá-los verticalmente. Geralmente, quando definimos vertical-align:middle; para imagens e caixas de texto (qualquer outro elemento de bloco embutido), isso afetará o desalinhamento do chinês e do inglês.
Outra situação é que quando o elemento pai (exceto tabelas) tem o atributo de alinhamento vertical definido, o chinês e o inglês dos elementos filhos internos também ficarão desalinhados.
<!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 ">
<cabeça>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<título>Teste</título>
<style type="texto/css">
* {margem:0;
html { background:#fff;
corpo {posição:relativa; fonte:12px/1.6em Verdana, Lucida, Arial, Helvetica, Dinastia Song, cor sem serifa };
</estilo>
</head>
<corpo>
<div style="vertical-align:middle;">
<a href="">Por que estou sempre desalinhado? por quê??</a>
</div>
</body>
</html>
Como resolver este problema? !
Vamos falar primeiro do primeiro, que é a solução para o problema de desalinhamento causado pelo meio vertical dos elementos adjacentes:
adicione um zoom:1 aos objetos chineses e ingleses para acionar seu haslayout. tem um haslayout, os objetos chinês e inglês Não haverá desalinhamento.
<!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 ">
<cabeça>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<título>Teste</título>
<style type="texto/css">
* {margem:0;
html { background:#fff;
corpo {posição:relativa; fonte:12px/1.6em Verdana, Lucida, Arial, Helvetica, Dinastia Song, cor sem serifa };
</estilo>
</head>
<corpo>
<div>
<a href="" style="zoom:1;">Por que estou sempre desalinhado? por quê??</a>
</div>
</body>
</html>
O segundo caso é a solução para o problema de desalinhamento causado pelo meio vertical do elemento pai:
Adicione a frase vertical-align:baseline aos objetos chinês e inglês para resolver o problema!
<!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 ">
<cabeça>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<título>Teste</título>
<style type="texto/css">
* {margem:0;
html { background:#fff;
corpo {posição:relativa; fonte:12px/1.6em Verdana, Lucida, Arial, Helvetica, Dinastia Song, cor sem serifa };
</estilo>
</head>
<corpo>
<div style="vertical-align:middle;">
<a href="" style="vertical-align:baseline;">Por que estou sempre desalinhado? por quê??</a>
</div>
</body>
</html>
Mas podemos ver que o sublinhado parece muito apertado. Neste momento, ainda precisamos adicionar zoom:1 para acionar seu hasLayout para evitar que fique muito apertado! .
<a href="" style="zoom:1;"vertical-align:baseline;">Por que estou sempre desalinhado? por quê??</a>
Se você encontrar outras situações em que o chinês e o inglês estão desalinhados Neste caso, você também pode tentar usar os dois métodos acima para resolver o problema. Obviamente, a maneira mais segura e eficaz é usar o Song Dynasty em chinês e inglês.