นี่เป็นปัญหาที่เห็นได้ชัดเจนน้อยกว่า เมื่อมีการผสมแบบอักษรภาษาจีนและภาษาอังกฤษในเบราว์เซอร์ 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 ">
<หัว>
<meta content="text/html; charset=utf-8" http-equiv="ประเภทเนื้อหา" />
<title>ทดสอบ</title>
<style type="text/css">
* { ระยะขอบ:0;
html { พื้นหลัง:#fff; }
body { ตำแหน่ง: ญาติ; แบบอักษร: 12px/1.6em Verdana, Lucida, Arial, Helvetica, ราชวงศ์ซ่ง, sans-serif;
</สไตล์>
</หัว>
<ร่างกาย>
<div style="vertical-align:middle;">
<a href="">เหตุใดฉันจึงจัดแนวไม่ตรงอยู่เสมอ ทำไม??</a>
</div>
</ร่างกาย>
</html>
จะแก้ไขปัญหานี้อย่างไร? -
เรามาพูดถึงเรื่องแรกกันก่อน ซึ่งเป็นวิธีแก้ปัญหาการวางแนวที่ไม่ตรงที่เกิดจากองค์ประกอบที่อยู่ติดกันในแนวตั้ง:
เพิ่มการซูม:1 ให้กับออบเจ็กต์ภาษาจีนและอังกฤษเพื่อทริกเกอร์เลย์เอาต์ของมัน จากการวิจัยพบว่าครั้งหนึ่ง มีเลย์เอาต์วัตถุจีนและอังกฤษ จะไม่มีการวางแนวที่ไม่ตรง
<!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="ประเภทเนื้อหา" />
<title>ทดสอบ</title>
<style type="text/css">
* { ระยะขอบ:0;
html { พื้นหลัง:#fff; }
body { ตำแหน่ง: ญาติ; แบบอักษร: 12px/1.6em Verdana, Lucida, Arial, Helvetica, ราชวงศ์ซ่ง, sans-serif;
</สไตล์>
</หัว>
<ร่างกาย>
<div>
<a href="" style="zoom:1;">ทำไมฉันถึงจัดแนวไม่ตรงอยู่เสมอ? ทำไม??</a>
</div>
</ร่างกาย>
</html>
กรณีที่สองคือวิธีแก้ปัญหาการวางแนวที่ไม่ตรงซึ่งเกิดจากแนวตั้ง-ตรงกลางขององค์ประกอบหลัก:
เพิ่มประโยค 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 ">
<หัว>
<meta content="text/html; charset=utf-8" http-equiv="ประเภทเนื้อหา" />
<title>ทดสอบ</title>
<style type="text/css">
* { ระยะขอบ:0;
html { พื้นหลัง:#fff; }
body { ตำแหน่ง: ญาติ; แบบอักษร: 12px/1.6em Verdana, Lucida, Arial, Helvetica, ราชวงศ์ซ่ง, sans-serif;
</สไตล์>
</หัว>
<ร่างกาย>
<div style="vertical-align:middle;">
<a href="" style="vertical-align:baseline;">ทำไมฉันถึงจัดแนวไม่ตรงอยู่เสมอ? ทำไม??</a>
</div>
</ร่างกาย>
</html>
แต่เราเห็นว่าขีดเส้นใต้ดูเหมือนจะแน่นเกินไป ในเวลานี้ เรายังต้องเพิ่มการซูม:1; เพื่อทริกเกอร์ hasLayout เพื่อหลีกเลี่ยงไม่ให้แน่นเกินไป! -
<a href="" style="zoom:1;"vertical-align:baseline;">เหตุใดฉันจึงจัดแนวไม่ตรงเสมอ เพราะเหตุใด</a>
หากคุณพบสถานการณ์อื่นที่ภาษาจีนและภาษาอังกฤษไม่ตรงแนว ในกรณีนี้ คุณสามารถลองใช้สองวิธีข้างต้นเพื่อแก้ไขปัญหาได้ แน่นอนว่าวิธีที่ปลอดภัยที่สุดและมีประสิทธิภาพที่สุดคือการใช้ราชวงศ์ซ่งทั้งภาษาจีนและภาษาอังกฤษ