Это менее заметная проблема. Когда в браузере IE смешаны китайские и английские шрифты, часто возникает несовпадение.
Итак, снова возникает сомнение: в чем причина расхождения между китайским и английским языками? ! Каково решение? ! Итак, после тестирования я обнаружил две ситуации (конечно, причин может быть больше. Вы можете попробовать сами. Соседние элементы китайского и английского объектов имеют настройку атрибута вертикального выравнивания (например, предыдущая маленькая картинка). или текстовое поле, нам нужно выровнять их по вертикали. Обычно, когда мы устанавливаемverter-align:middle; для изображений и текстовых полей (любых других встроенных блочных элементов), это влияет на несовпадение китайского и английского языков.
Другая ситуация заключается в том, что когда у родительского элемента (кроме таблиц) установлен атрибут вертикального выравнивания, китайский и английский дочерних элементов внутри также будут смещены.
<!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 ">
<голова>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Тест</title>
<style type="text/css">
* {маржа:0; заполнение:0;
html {фон:#fff;
body {position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, Dynasty Song, цвет без засечек: #333;
</стиль>
</голова>
<тело>
<div style="vertical-align:middle;">
<a href="">Почему я всегда смещаюсь? почему??</a>
</div>
</тело>
</html>
Как решить эту проблему? !
Давайте сначала поговорим о первом, который является решением проблемы смещения, вызванной вертикальным расположением соседних элементов:
добавьте 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 ">
<голова>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Тест</title>
<style type="text/css">
* {маржа:0; заполнение:0;
html {фон:#fff;
body {position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, Dynasty Song, цвет без засечек: #333;
</стиль>
</голова>
<тело>
<дел>
<a href="" style="zoom:1;">Почему я всегда смещаюсь? почему??</a>
</div>
</тело>
</html>
Второй случай — это решение проблемы смещения, вызванной вертикальной серединой родительского элемента:
добавьте предложениевертикальное выравнивание:базовая линия к объектам на китайском и английском языках, чтобы решить проблему!
<!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 ">
<голова>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Тест</title>
<style type="text/css">
* {маржа:0; заполнение:0;
html {фон:#fff;
body {position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, Dynasty Song, цвет без засечек: #333;
</стиль>
</голова>
<тело>
<div style="vertical-align:middle;">
<a href="" style="vertical-align:baseline;">Почему я всегда смещен? почему??</a>
</div>
</тело>
</html>
Но мы видим, что подчеркивание кажется слишком узким. На данный момент нам все еще нужно добавить Zoom:1; чтобы вызвать hasLayout, чтобы не быть слишком узким! .
<a href="" style="zoom:1;"vertical-align:baseline;">Почему я всегда смещаюсь? Почему??</a>
Если вы сталкиваетесь с другими ситуациями, когда китайский и английский языки не совпадают В этом случае, вы также можете попробовать использовать два вышеуказанных метода для решения проблемы. Конечно, самый безопасный и эффективный способ — использовать Song Dynasty как на китайском, так и на английском языке.