Este es un problema menos notable cuando se mezclan fuentes chinas e inglesas en el navegador IE, a menudo se produce una desalineación.
Entonces surge nuevamente la duda, ¿qué causa la desviación entre chino e inglés? ! ¿Cuál es la solución? ! Entonces, después de mis pruebas, encontré dos situaciones (por supuesto, puede haber más situaciones causantes. Puede probarlo usted mismo. Los elementos adyacentes de los objetos chino e inglés tienen la configuración del atributo de alineación vertical (como la imagen pequeña anterior). o el cuadro de texto, necesitamos alinearlos verticalmente. Generalmente, cuando configuramos vertical-align:middle; para imágenes y cuadros de texto (cualquier otro elemento de bloque en línea), afectará la desalineación del chino y el inglés.
Otra situación es que cuando el elemento principal (excepto las tablas) tiene el atributo de alineación vertical establecido, el chino y el inglés de los elementos secundarios internos también estarán desalineados.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Estricto//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeza>
<meta content="text/html; charset=utf-8" http-equiv="Tipo de contenido" />
<título>Prueba</título>
<tipo de estilo="texto/css">
* { margen:0; relleno:0;
html { fondo:#fff }
cuerpo { posición: relativa; fuente: 12px/1.6em Verdana, Lucida, Arial, Helvetica, dinastía Song, color sans-serif;
</estilo>
</cabeza>
<cuerpo>
<div estilo="vertical-align:middle;">
<a href="">¿Por qué siempre estoy desalineado? ¿¿Por qué??</a>
</div>
</cuerpo>
</html>
¿Cómo solucionar este problema? !
Hablemos primero del primero, que es la solución al problema de desalineación causado por el medio vertical de los elementos adyacentes:
agregue un zoom:1 a los objetos chino e inglés para activar su diseño has. A través de la investigación, se descubre que una vez. tiene un diseño has, los objetos chino e inglés no habrá desalineación.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Estricto//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeza>
<meta content="text/html; charset=utf-8" http-equiv="Tipo de contenido" />
<título>Prueba</título>
<tipo de estilo="texto/css">
* { margen:0; relleno:0;
html { fondo:#fff }
cuerpo { posición: relativa; fuente: 12px/1.6em Verdana, Lucida, Arial, Helvetica, dinastía Song, color sans-serif;
</estilo>
</cabeza>
<cuerpo>
<div>
<a href="" style="zoom:1;">¿Por qué siempre estoy desalineado? ¿¿Por qué??</a>
</div>
</cuerpo>
</html>
El segundo caso es la solución al problema de desalineación causado por el centro vertical del elemento principal:
agregue la oración vertical-align:baseline a los objetos chino e inglés para resolver el problema.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Estricto//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeza>
<meta content="text/html; charset=utf-8" http-equiv="Tipo de contenido" />
<título>Prueba</título>
<tipo de estilo="texto/css">
* { margen:0; relleno:0;
html { fondo:#fff }
cuerpo { posición: relativa; fuente: 12px/1.6em Verdana, Lucida, Arial, Helvetica, dinastía Song, color sans-serif;
</estilo>
</cabeza>
<cuerpo>
<div estilo="vertical-align:middle;">
<a href="" style="vertical-align:baseline;">¿Por qué siempre estoy desalineado? ¿¿Por qué??</a>
</div>
</cuerpo>
</html>
Pero podemos ver que el subrayado parece demasiado ajustado. En este momento, todavía necesitamos agregar zoom:1 para activar su hasLayout para evitar que sea demasiado ajustado. .
<a href="" style="zoom:1;"vertical-align:baseline;">¿Por qué siempre estoy desalineado? ¿Por qué?</a>
Si encuentra otras situaciones en las que el chino y el inglés están desalineados. En este caso, También puede intentar utilizar los dos métodos anteriores para resolver el problema. Por supuesto, la forma más segura y eficaz es utilizar Song Dynasty tanto en chino como en inglés.