คำตอบที่ได้รับเลือกจากเจ้าของกระทู้
ความคิดเห็นที่ 3
ผมแก้ไขให้แล้วครับ เข้าไปดูที่ https://jsfiddle.net/02s3ee44/
ทดสอบกับ IE 11, Microsoft EDGE 13, Chrome 48, Safari 7, Opera 35 และ Firefox 44 แล้วผลออกมาเหมือนกันหมดครับ
โดยที่คลาส navp li ผมเพิ่ม
display: inline-block;
box-sizing: border-box;
height: 53px;
และคลาส navp ได้ตัด
margin-top: 15px;
margin-bottom: 15px;
และผมปรับ padding ให้ตัวอักษรขยับขึ้นไป 1px อยู่ตรงกึ่งกลางในแนวดิ่ง
ปัญหาอยู่ที่ padding และ border ของ tag <li> อย่างที่เจ้าของกระทู้ว่าครับ บางบราวเซอร์รวมและไม่รวม padding/border เข้าไว้ใน width/height property ด้วยทำให้บางทีขอบล้นออกมา จึงต้องกำนด box-sizing property แบบ border-box คือรวม border และ padding อยู่ใน width/height ที่กำหนดด้วย และผมกำนด display property เป็น inline-block แทนเพื่อแสดง list item ในแบบตารางเรียงกันตามยาวที่กำนดขนาดได้
ทดสอบกับ IE 11, Microsoft EDGE 13, Chrome 48, Safari 7, Opera 35 และ Firefox 44 แล้วผลออกมาเหมือนกันหมดครับ
โดยที่คลาส navp li ผมเพิ่ม
display: inline-block;
box-sizing: border-box;
height: 53px;
และคลาส navp ได้ตัด
margin-top: 15px;
margin-bottom: 15px;
และผมปรับ padding ให้ตัวอักษรขยับขึ้นไป 1px อยู่ตรงกึ่งกลางในแนวดิ่ง
ปัญหาอยู่ที่ padding และ border ของ tag <li> อย่างที่เจ้าของกระทู้ว่าครับ บางบราวเซอร์รวมและไม่รวม padding/border เข้าไว้ใน width/height property ด้วยทำให้บางทีขอบล้นออกมา จึงต้องกำนด box-sizing property แบบ border-box คือรวม border และ padding อยู่ใน width/height ที่กำหนดด้วย และผมกำนด display property เป็น inline-block แทนเพื่อแสดง list item ในแบบตารางเรียงกันตามยาวที่กำนดขนาดได้
แสดงความคิดเห็น
[CSS] border-bottom ในแต่ละ browser แสดงผลไม่เท่ากันครับ
ใน Chrome มันพอดีครับ แต่พอเปิดใน Firefox และ IE border-bottom มันต่ำกว่าที่ตั้งใจไว้ และถ้าแก้ CSS ให้แสดงผลใน Firefox กับ IE ได้พอดี ใน Chrome ก็จะสูงเกินพอดีครับ
element อื่นไม่มีปัญหาเลย มีแต่ border-bottom (padding) เนี่ย ผมจนปัญญาจะหาสาเหตุแล้วครับ
พอจะสันนิษฐานได้ไหมครับว่ามีสาเหตุจากอะไรบ้าง
อยากจะถามในเว็บ stackoverflow แต่ภาษาอังกฤษไม่แข็งแรงพอครับ เลยมาถามในนี้แทน
บัญชีผมโพสต์รูปไม่ได้ครับ ต้องขออภัยด้วยครับ
เพิ่มเติมข้อมูลครับ:
นี่ลิงค์โค้ดครับ https://jsfiddle.net/0kyf6rtr/2/
ผมเปิดลิงค์ใน Chrome ก็ปกติครับ แต่ Firefox กับ IE ไม่เป๊ะ
ที่ผมสังเกตคือ
Firefox จะต่ำกว่า Chrome 3px ครับ
IE จะต่ำกว่า Chrome 1px ครับ
อย่างนี้เป็นที่ Browser หรือเปล่าครับ?